تصف هذه المقالة طريقة JS لمنع الوميض عند التمرير DIV ، ويتم مشاركتها معك للرجوع إليها. الطرق المحددة هي كما يلي:
لقد تعرضت لأداء الصفحة مؤخرًا ، وهناك العديد من المحتوى الدقيق والأصلي ، مثل عرض المتصفح. هناك الكثير من المعلومات ، لذلك اخترت بعضًا للترجمة والمذكرة.
يكتب JavaScript ويقرأ DOM عدة مرات ويتسبب
نسخة الكود كما يلي: من DOM Tree1).
// يقرأ
var H1 = element1.clientheight ؛
// اكتب (التصميم غير صالح)
element1.style.height = (H1 * 2) + 'px' ؛
// اقرأ (إصدار اللمس)
var h2 = element2.clientheight ؛
// اكتب (التصميم غير صالح)
element2.style.height = (H2 * 2) + 'px' ؛
// اقرأ (إصدار اللمس)
var h3 = element3.clientheight ؛
// اكتب (التصميم غير صالح)
element3.style.height = (H3 * 2) + 'px' ؛
عند كتابة DOM ، يكون التصميم غير صالح ويجب إعادة ترتيبه في وقت معين. لكن المتصفح كسول ، ويريد الانتظار حتى تنتهي العملية الحالية (أو الإطار) قبل إعادة الترتيب.
ومع ذلك ، إذا قرأنا القيم الهندسية من DOM قبل نهاية العملية الحالية (أو الإطار) ، فإننا نجبر المتصفح على إعادة ترتيب التخطيط مقدمًا. وهذا ما يسمى "التصميم المتزامن القسري" ، والذي سيقتل الأداء.
على متصفحات سطح المكتب الحديثة ، قد لا تكون الآثار الجانبية للتخطيطات الوعرة واضحة ؛ ولكن على الأجهزة المحمولة المنخفضة ، فإن المشكلة خطيرة.
حل سريع
في عالم مثالي ، يمكننا قراءة وكتابة DOM على دفعات ببساطة عن طريق إعادة ترتيب أمر تنفيذ التعليمات البرمجية. هذا يعني أنه يجب إعادة ترتيب المستند دفعة واحدة.
انسخ الرمز كما يلي:/ اقرأ
var H1 = element1.clientheight ؛
var h2 = element2.clientheight ؛
var h3 = element3.clientheight ؛
// اكتب (التصميم غير صالح)
element1.style.height = (H1 * 2) + 'px' ؛
element2.style.height = (H2 * 2) + 'px' ؛
element3.style.height = (H3 * 2) + 'px' ؛
// يتم إعادة ترتيب المستندات في نهاية الإطار
إذن ماذا عن العالم الحقيقي؟
الأمر ليس بهذه البساطة في الواقع. في البرامج الكبيرة ، تنتشر الرموز في كل مكان ، وهناك مثل هذه الدوامات الخطرة. لا يمكننا بسهولة (ومن الواضح أنه لا ينبغي) خلط كودنا الجميل الذي يتسم بالدراسة فقط للتحكم في ترتيب التنفيذ. لذلك من أجل تحسين الأداء ، كيف يمكننا القراءة والكتابة؟
تعرف على requestAnimationFrame
Window.RequestAnimationFrame جدولة وظيفة يتم تنفيذها في الإطار التالي ، على غرار setTimout (FN ، 0). هذا مفيد للغاية لأنه يمكننا استخدامه لجدولة جميع عمليات كتابة DOM ليتم تنفيذها معًا في الإطار التالي ، وسيتم تنفيذ عمليات قراءة DOM بشكل متزامن بالترتيب الحالي.
انسخ الرمز كما يلي:/ اقرأ
var H1 = element1.clientheight ؛
// يكتب
requestAnimationFrame (function () {
element1.style.height = (H1 * 2) + 'px' ؛
}) ؛
// يقرأ
var h2 = element2.clientheight ؛
// يكتب
requestAnimationFrame (function () {
element2.style.height = (H2 * 2) + 'px' ؛
}) ؛
...
آمل أن يكون الوصف في هذه المقالة مفيدًا لبرمجة الويب للجميع بناءً على JavaScript.