شرح صفوف ومحتوى الفقرة
عرفنا في الدرس السابق أن محرك العرض ( مثل و و) هو القلب النابض داخل المتصفح. ولكن كيف تتحول البايتات النصية الخام القادمة من الخادم إلى شجرة عناصر حية وبكسلات ملونة تُرسم على شاشتك في أقل من 16 مللي ثانية؟ تُعرف هذه الرحلة الهندسية الدقيقة باسم مسار العرض الحرج ().
قبل الغوص في التفاصيل الهندسية، استعرض جدول المصطلحات التقنية الأساسية لهذا الدرس:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى الهندسي المبسط |
|---|---|---|---|
| مسار العرض الحرج | كريتيكال ريندرينج باث | سلسلة المراحل الهندسية التي ينفذها المتصفح لتحويل أكواد HTML وCSS وJS إلى بكسلات مرئية على الشاشة. | |
| شجرة كائنات المستند | دوم تري | التمثيل الشجري الحي لعناصر صفحة HTML في ذاكرة المتصفح والذي يمكن التفاعل معه عبر جافاسكريبت. | |
| شجرة كائنات التنسيق | سي إس إس أوم | الشجرة التي يبنيها المتصفح بعد حساب جميع قواعد وأولويات CSS المطبقة على عناصر الصفحة. | |
| شجرة العرض المرئية | ريندر تري | ناتج دمج شجرتي DOM وCSSOM معاً، وتضم العناصر المرئية فقط التي ستُطبع فعلياً على الشاشة. | |
| حساب التخطيط وإعادة التخطيط | لاي آوت / ريفلو | حساب العرض والارتفاع والإحداثيات الهندسية الدقيقة لكل صندوق على الشاشة حسب حجم النافذة. | |
| الطلاء والتركيب المسرع | بينت آند كومبوزيتنج | تلوين البكسلات وتقسيمها لطبقات يركبها معالج الرسوميات GPU بسرعة 60 إطاراً في الثانية. |
