انتقل إلى محتوى الدرس

Painting Pixels on the Screen رسم البكسلات وإظهار الصفحة

افهم بعمق هندسي مسار العرض الحرج داخل المتصفح؛ كيف تتحول أكواد HTML وCSS إلى شجرتي DOM وCSSOM وشجرة العرض، والفرق بين إعادة التخطيط Reflow وإعادة الرسم Repaint والتركيب عبر GPU.
2 صفوف تعليمية
تكنولوجيا الويب
3 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

بعد معرفة أبعاد ومكان كل عنصر في مرحلة التخطيط، ينفذ المتصفح المرحلتين الأخيرتين لإظهار الصفحة أمام عين المستخدم:

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