تسمى العملية التي يقوم المتصفح من خلالها بإعادة حساب المواضع والأشكال الهندسية لعناصر الصفحة من أجل إعادة عرض جزء أو الصفحة بأكملها بإعادة التدفق. نظرًا لأن إعادة التدفق هي عملية حظر للمستخدم في المتصفح، فمن المهم فهم كيفية تقليل عدد عمليات إعادة التدفق وكيف تؤثر سمات المستند المختلفة (عمق DOM، وكفاءة CSS، وتغييرات النمط بدون كتابة) على عدد عمليات إعادة التدفق ضروري جدا للمطورين. في بعض الأحيان، يقوم عنصر في صفحة إعادة التدفق بإعادة تدفق العنصر الأصلي (التعليق التوضيحي: الجمع هنا) وجميع العناصر الفرعية.
هناك العديد من عمليات المستخدم وتغييرات DHTML التي قد تؤدي إلى إعادة التدفق. سيؤدي ضبط حجم نافذة المتصفح، واستخدام جافا سكريبت لحساب الأنماط ( الأنماط المحسوبة )، وإنشاء العناصر وحذفها في DOM، وتغيير فئة العناصر إلى إعادة التدفق. تجدر الإشارة إلى أن بعض العمليات ستؤدي إلى إعادة التدفق عدة مرات، بما يتجاوز خيالك. الصورة التالية مأخوذة من خطاب ستيف سودرس " مواقع الويب الأسرع ":
من الجدول أعلاه، من الواضح أنه ليست كل الأنماط التي تسيطر عليها JavaScript تؤدي إلى إعادة التدفق في جميع المتصفحات، وحتى إذا تم تشغيلها، فإن عدد المرات ليس هو نفسه. وفي الوقت نفسه، يمكن ملاحظة أن المتصفحات الحديثة تتحسن أكثر فأكثر في التحكم في عدد عمليات إعادة التدفق.
في Google، نقيس سرعة صفحاتنا وتطبيقات الويب لدينا بعدة طرق، ويعد إعادة التدفق عاملاً رئيسيًا نأخذه في الاعتبار عند إضافة واجهة المستخدم. نحن نسعى جاهدين لتقديم تجربة مستخدم حية وتفاعلية وممتعة.
مبدئيا
فيما يلي بعض المبادئ لتقليل إعادة التدفق:
في الفيديو أدناه (التعليق التوضيحي: مقتبس من YouTube، لا يمكن مشاهدته، يرجى الانتقال إلى النص الأصلي لتجاوز الجدار)، تقدم Lindsey بعض الطرق لتقليل إعادة التدفق.
مزيد من القراءة
الترجمة الأصلية: http://www.99css.com/2009/06/minimizing-browser-reflow.html