منذ إصدار عنصر تحكم شجرة MzTreeView1.0، تلقيت الكثير من التعليقات. وقد قدم لي العديد من مستخدمي الإنترنت الكثير من الاقتراحات ذات الصلة وأشاروا إلى العديد من الأخطاء وأوجه القصور في عنصر التحكم هذا، لذلك أخطط لكتابة إصدار جديد. شجرة، ودمج اقتراحات الجميع في التنفيذ. لقد كنت أكتب نسخة جديدة من الشجرة هذه الأيام، أهم شيء في التحكم في الشجرة هو الكفاءة، خاصة عندما يكون عدد العقد كبيرًا، فإن الوضع الأقل كفاءة قليلاً سيعطل المتصفح الشجرة، أولويتي الأولى هي تحسين الكفاءة، مثل إضافة دعم لتحميل البيانات غير المتزامن، وما إلى ذلك. بالإضافة إلى ذلك، لدي أيضًا فكرة أن الخطوط الرأسية لبنية الشجرة يتم تنفيذها باستخدام ورقة أنماط (صورة الخلفية). تحتاج صورة خلفية ورقة الأنماط إلى التحميل مرة واحدة فقط، والآن هذا الوضع (باستخدام صور <img> المتعددة) يحتوي على آلية تخزين مؤقت، إلا أنه لا يزال من الممكن طلب الخادم مرة واحدة لكل صورة صغيرة، لذلك فكرت في مدى جودة ذلك سيكون استخدام ورقة أنماط لتحقيق ذلك هو تبسيط الكود والهيكل واضح والتأثير رائع، ولكن بعد ما يقرب من أسبوع من الاختبار، فشلت فكرتي تمامًا ورقة الأنماط رديئة جدًا. لم يكن من الممكن تحقيق الفكرة الجديدة، وشعرت ببعض الإحباط، لكنني فكرت في مشاركة نتائج الاختبار مع الجميع.
سأشرح هنا الخطوط الرأسية في شكل الشجرة. هناك ┌ ├ └ │ على الجانب الأيسر من الشجرة. تمثل هذه الخطوط العمودية مستويات الشجرة في الإصدار 1.0 الخاص بي، وقد استخدمت صورًا صغيرة متراكمة واحدة تلو الأخرى نوع الاستخدام يتم تنفيذ ورقة الأنماط باستخدام تعليمات برمجية مثل <div class="l2"></div>، وتكون ورقة الأنماط مسؤولة عن ملء صورة الخلفية.
#mtvroot div td{width:20px;height:20px;}
#mtvroot .l0{background:url(line0.gif) مركز عدم التكرار}
#mtvroot .l1{background:url(line1.gif) مركز عدم التكرار}
#mtvroot .l2{background:url(line2.gif) مركز عدم التكرار}
#mtvroot .l3{background:url(line3.gif) مركز عدم التكرار}
#mtvroot .l4{background:url(line4.gif) مركز عدم التكرار}
#mtvroot .ll{background:url(line5.gif) مركز عدم التكرار}
#mtvroot .pm0{background:url(plus0.gif) مركز عدم التكرار}
#mtvroot .pm1{background:url(plus1.gif) مركز عدم التكرار}
#mtvroot .pm2{background:url(plus2.gif) مركز عدم التكرار}
#mtvroot .pm3{background:url(plus3.gif) مركز عدم التكرار}
#mtvroot .expand .pm0{background:url(minus0.gif) مركز عدم التكرار}
#mtvroot .expand .pm1{background:url(minus1.gif) مركز عدم التكرار}
#mtvroot .expand .pm2{background:url(minus2.gif) مركز عدم التكرار}
#mtvroot .expand .pm3{background:url(minus3.gif) no-repeat center}
CSS أعلاه هو جزء من النمط الذي قمت بإنشائه ديناميكيًا في البرنامج النصي ونشرته للمساعدة في الشرح لاحقًا. بعد استخدام ورقة الأنماط، تم تبسيطها حقًا وكان إنشاء كل عقدة سريعًا بدرجة كافية، ومع ذلك، وجدت أنه عندما يصل عدد عقد الشجرة الخاصة بي، على سبيل المثال، إلى 300-500 عقدة، لم يكن لكفاءة إنشاء العقد أي تأثير. ، ولكن في كل مرة يكون توسيع/تقليص العقدة بطيئًا جدًا، ويستغرق أكثر من بضع ثوانٍ أو حتى 10 ثوانٍ، ويكون استخدام وحدة المعالجة المركزية خلال هذه الفترة 100٪. للتوضيح، يتم تحقيق توسيع/تقلص الشجرة عن طريق تعيين style.display = none|block للعقدة الأصلية. تكوين جهاز الكمبيوتر الخاص بي هو: ذاكرة AMD2800+ 1GDDR400، التكوين ليس سيئًا.
كان رد فعلي الأول هو: هل يؤثر استخدام عدد كبير جدًا من <table> على الكفاءة؟ لأنني أستخدم <table> لكل عقدة، لكنني استبدلت <table> بـ <div> و<span> وما إلى ذلك، لكن لا يوجد تحسن في الكفاءة، مما يعني أن مشكلة استخدام وحدة المعالجة المركزية بنسبة 100٪ ليست كذلك مشكلة علامات HTML، فالمشكلة المتبقية هي استخدام أوراق الأنماط هنا.
بأخذ مبلغ 500 عقدة كمثال، سيكون هناك حوالي 2000 صورة صغيرة متراكمة على الجانب الأيسر في 1.0. في هذه الحالة، ستكون هناك مشكلة كبيرة عندما يتم ضبط المتصفح على عدم التخزين المؤقت محليًا، ويستغرق تحميل هذه الصور الصغيرة الكثيرة الكثير من الوقت وموارد الخادم، لذلك لدي ورقة الأنماط الجديدة هذه، والآن يجب استخدامها طريقة ورقة الأنماط، مما يعني أن هناك حوالي 2000 مكان تحتاج إلى أوراق الأنماط لعرض صور الخلفية. لقد اختبرت مواقف مختلفة وقارنتها بكود الإصدار 1.0 وتوصلت إلى نتيجة مفادها أن معدل استخدام وحدة المعالجة المركزية مرتفع جدًا والسبب الوحيد هو استغراق الوقت في العرض. التحقق أيضًا بسيط للغاية. لقد قمت بإزالة الجزء #mtvroot على الجانب الأيسر من ورقة الأنماط أعلاه، مما يعني إزالة علاقة التبعية لورقة الأنماط. وجدت نتائج الاختبار أن الكفاءة قد تحسنت كثيرًا، ولكن استهلاك الوقت لا يزال كبيرا، 3-5 ثواني.
بالإضافة إلى ذلك، قمت بالتغيير إلى متصفحات مختلفة، كما أن نتائج الاختبار مختلفة أيضًا، والأكثر إثارة للاشمئزاز هو في IE. على سبيل المثال، إذا كان لدي 500 عقدة فرعية على عقدة معينة، فسوف أقوم بإغلاقها (وحدة المعالجة المركزية 100٪، انتظر 3). -5 ثواني) ، أي عرض = "لا شيء". في هذا الوقت، إذا قمت بطي العقدة الأصلية لهذه العقدة (لا تحتوي هذه العقدة على عقد شقيقة أخرى، أي أن العقدة الأصلية لديها عقدة فرعية واحدة فقط مثلها) من المنطقي أن يكون هناك عقدة واحدة فقط، ويجب أن يكون الانهيار أمرًا فوريًا، لكن النتيجة ليست كذلك، وهي وحدة المعالجة المركزية بنسبة 100٪ لمدة 3-5 ثوانٍ، وهذا يجعلني مجنونًا ومكتئبًا كائن HTML مخفي بواسطة العرض = "none"، الأصل الخاص به. عند إجراء أي عملية على المستوى، سيعيد IE عرض هذه الكائنات المخفية باستخدام أوراق الأنماط، ولا أفهم حقًا ما كان يفكر فيه مطورو IE.
ذهبت إلى FIREFOX لاختباره مرة أخرى عندما يكون مطويًا (العرض=لا شيء)، يكون الأمر فوريًا. بالطبع، جميع المتصفحات هي نفسها عند التوسيع: 3-5 ثواني من وحدة المعالجة المركزية 100٪، ولكن FF أسرع قليلاً.
من خلال الظواهر المذكورة أعلاه، توصلت إلى استنتاج مفاده أن أوراق الأنماط ليست فعالة عند العرض ديناميكيًا؛ لن يتم إعادة عرض الكائنات المخبأة ولكن IE سوف يقوم بذلك.
فلماذا لم يتم اكتشاف مشكلة كفاءة عرض ورقة الأنماط هذه من قبل؟ مهلا، عندما تقوم بإنشاء صفحات ويب، نادرًا ما تذهب إلى مثل هذه الحدود القصوى. هناك الآلاف من صور الخلفية في الصفحة التي تتطلب أوراق أنماط لعرض صور الخلفية. عادة لا يوجد سوى عدد قليل من الأماكن أو عشرات الأماكن، لذلك لا يمكنك أن تشعر بكفاءة العرض، ولا يمكنك أن تشعر بالفرق بين المتصفحات المختلفة في هذا الصدد. ومع ذلك، عند إنشاء عناصر تحكم مثل الأشجار، ستواجه بالتأكيد مشكلات خطيرة مختلفة، مثل مصفوفات البيانات الكبيرة، وعدد كائنات HTML التي تم إنشاؤها، وما إلى ذلك. والفرق في كفاءة العرض هو فقط عندما أكتب نصوص JS مواجهة. اليوم أشارك نتيجة الاختبار هذه على أمل أن تكون مفيدة للجميع عند كتابة البرامج في المستقبل وأخذها في الاعتبار عند القيام بالتصميم.
وأخيرا، أشكركم جميعا على تأكيدكم ودعمكم للتحكم الذي كتبته، شكرا لكم!