تقليل إعادة تدفّق المتصفّح

المؤلف: ليندسي سيمون، مطور تجربة مستخدم

المعرفة المقترَحة: لغة HTML الأساسية وJavaScript الأساسية ومعرفة عملية بلغة CSS

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

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

من الجدول أعلاه، من الواضح أن التغييرات التي تطرأ على النمط في JavaScript لا تتسبب في إعادة التدفق في جميع المتصفحات، وأن الوقت اللازم لإعادة التدفّق يختلف. ومن الواضح إلى حد ما أيضًا أن المتصفحات الحديثة تتحسن في أوقات إعادة التدفق.

في Google، نختبر سرعة صفحات الويب والتطبيقات بعدة طرق، وتُعد إعادة التدفّق عاملاً رئيسيًا نأخذه في الاعتبار عند إضافة ميزات إلى واجهات المستخدم الخاصة بنا. نحن نسعى جاهدين لتقديم تجارب مستخدمة نابضة بالحياة وتفاعلية وممتعة.

الإرشادات

في ما يلي بعض الإرشادات السهلة لمساعدتك على تقليل إعادة التدفّق في صفحاتك على الويب:

  1. تقليل عمق DOM غير الضروري يمكن أن تتسبب التغييرات على مستوى واحد في شجرة نموذج كائن المستند (DOM) في حدوث تغييرات على كل مستوى من الشجرة - وصولاً إلى الجذر، وصولاً إلى العناصر الثانوية للعقدة المُعدَّلة. يؤدي ذلك إلى قضاء المزيد من الوقت في تنفيذ إعادة التدفّق.
  2. يمكنك تصغير قواعد CSS وإزالة قواعد CSS غير المستخدَمة.
  3. إذا أجريت تغييرات عرض معقدة، مثل الرسوم المتحركة، فافعل ذلك خارج التدفق. استخدم الموضع المطلق أو الموضع الثابت لتحقيق ذلك.
  4. تجنَّب أدوات اختيار لغة CSS المعقّدة غير الضرورية، مثل أدوات الاختيار الثانوية، والتي تتطلب المزيد من طاقة وحدة المعالجة المركزية (CPU) لمطابقة أدوات الاختيار.

في هذا الفيديو، توضّح Lindsey بعض الطرق البسيطة لتقليل إعادة التدفق على صفحاتك:

مراجع إضافية

إضافة ملاحظات

هل كان المحتوى في هذه الصفحة مفيدًا؟