javascript css - متى يحدث إعادة التدفق في بيئة DOM؟




in function (4)

ما أنواع الأنشطة التي ستؤدي إلى إعادة تدفق صفحة الويب باستخدام DOM؟

يبدو أن هناك وجهات نظر مختلفة. وفقًا لـ http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/ ، فإنه يحدث

  • عند إضافة أو إزالة عقدة DOM.
  • عند تطبيق نمط ديناميكيًا (مثل element.style.width = "10px").
  • عند استرجاع قياس يجب حسابه ، مثل الوصول إلى offsetWidth أو clientHeight أو أي قيمة CSS محسوبة (عبر getComputedStyle () في المتصفحات المتوافقة مع DOM أو currentStyle في IE).

ومع ذلك ، وفقا ل http://dev.opera.com/articles/view/efficient-javascript/?page=3 ، مع أخذ مدخلات قياس إعادة التدفق فقط عندما يكون هناك بالفعل تدفق العمل في قائمة الانتظار.

هل لدى أي شخص المزيد من الأفكار؟


Answers

document.body.style.display = 'none';
document.body.style.display = 'block';

هذا غالبا ما يحل هذه الأخطاء تخطيط غير مفهومة.


انظر قسم "التقديم الذي يتم تشغيله بواسطة خاصية قراءة الوصول" في فهم سلوك التقديم في برنامج Internet Explorer ، حيث ستسبب التعليمة البرمجية التالية في IE نشاط العرض.

function askforHeight () {
  $("#lower").height();  
}

كلا المقالات صحيحة. يمكن للمرء أن يفترض بأمان أنه عندما تقوم بفعل شيء يمكن أن يتطلب بشكل معقول أن يتم حساب أبعاد العناصر في DOM ، فسوف تؤدي إلى إعادة التدفق.

بالإضافة إلى ذلك ، بقدر ما أستطيع أن أقول ، كلا المادتين تقولان نفس الشيء.

تقول المقالة الأولى إن إعادة التدفق تحدث عندما:

عند استرجاع قياس يجب حسابه ، مثل الوصول إلى offsetWidth أو clientHeight أو أي قيمة CSS محسوبة (عبر getComputedStyle () في المتصفحات المتوافقة مع DOM أو النمط الحالي في IE) ، في حين يتم وضع قائمة الانتظار للتغييرات DOM.

المادة الثانية تنص على ما يلي:

كما ذكرنا سابقًا ، قد يخبئ المتصفح العديد من التغييرات نيابةً عنك ، ويتم إعادة التدفق مرة واحدة فقط عند إجراء جميع هذه التغييرات. ومع ذلك ، لاحظ أن أخذ قياسات العنصر سيجبره على إعادة التدفق ، بحيث تكون القياسات صحيحة. قد تكون التغييرات أو لا يمكن إعادة رسمها بشكل واضح ، ولكن إعادة التدفق نفسها لا يزال يتعين أن يحدث وراء الكواليس.

يتم إنشاء هذا التأثير عندما يتم أخذ القياسات باستخدام خصائص مثل offsetWidth ، أو باستخدام طرق مثل getComputedStyle . حتى إذا لم يتم استخدام الأرقام ، فببساطة باستخدام أيٍّ من هذين المستعرضين في الوقت الذي لا يزال فيه المتصفّح يغيّر التغييرات ، سيكون هذا كافياً لتحريك الإنسياب المخفي. إذا تم أخذ هذه القياسات بشكل متكرر ، فعليك التفكير في أخذها مرة واحدة فقط ، وتخزين النتيجة ، والتي يمكن استخدامها لاحقًا.

أنا أعتبر هذا يعني نفس الشيء قالوا في وقت سابق. ستحاول الأوبرا أصعب تخزين القيم وتجنب إعادة التدفق بالنسبة لك ، ولكن لا يجب الاعتماد على قدرتها على القيام بذلك.

لجميع المقاصد والأغراض فقط أعتقد ما يقول كل منهما عندما يقولون أن جميع أنواع التفاعلات الثلاثة يمكن أن تتسبب في إعادة التدفق.

في صحتك.


المثال الكلاسيكي "فهرس في الكتب"

ضع في الاعتبار "كتاب" من 1000 صفحة ، مقسومًا على 100 مقطع ، كل قسم يحتوي على صفحات X.

بسيطة ، هاه؟

الآن ، بدون صفحة فهرس ، للبحث عن قسم معين يبدأ بالحرف "S" ، لا يوجد لديك خيار آخر سوى المسح خلال الكتاب بأكمله. أي: 1000 صفحة

ولكن مع صفحة فهرس في البداية ، فأنت هناك. وأكثر من ذلك ، لقراءة أي قسم معين يهم ، تحتاج فقط إلى النظر إلى صفحة الفهرس ، مرارا وتكرارا ، في كل مرة. بعد العثور على الفهرس المطابق ، يمكنك الانتقال بكفاءة إلى القسم عن طريق تخطي الأقسام الأخرى.

ولكن بعد ذلك ، بالإضافة إلى 1000 صفحة ، ستحتاج إلى 10 صفحات أخرى لعرض صفحة الفهرس ، بحيث تكون 1010 صفحة تمامًا.

وبالتالي ، فإن الفهرس عبارة عن قسم منفصل يخزن قيم العمود المفهرس + المؤشر إلى الصف المفهرس في ترتيب تم فرزه للبحث الفعال.

الأشياء بسيطة في المدارس ، أليس كذلك؟ : P





javascript performance dom reflow