في هذا الدرس 8تصفّح المواضيع
عرفنا في الدرس السابق أن محرك العرض ( مثل و و) هو القلب النابض داخل المتصفح. ولكن كيف تتحول البايتات النصية الخام القادمة من الخادم إلى شجرة عناصر حية وبكسلات ملونة تُرسم على شاشتك في أقل من 16 مللي ثانية؟ تُعرف هذه الرحلة الهندسية الدقيقة باسم مسار العرض الحرج ().
قبل الغوص في التفاصيل الهندسية، استعرض جدول المصطلحات التقنية الأساسية لهذا الدرس:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى الهندسي المبسط |
|---|---|---|---|
| مسار العرض الحرج | كريتيكال ريندرينج باث | سلسلة المراحل الهندسية التي ينفذها المتصفح لتحويل أكواد HTML وCSS وJS إلى بكسلات مرئية على الشاشة. | |
| شجرة كائنات المستند | دوم تري | التمثيل الشجري الحي لعناصر صفحة HTML في ذاكرة المتصفح والذي يمكن التفاعل معه عبر جافاسكريبت. | |
| شجرة كائنات التنسيق | سي إس إس أوم | الشجرة التي يبنيها المتصفح بعد حساب جميع قواعد وأولويات CSS المطبقة على عناصر الصفحة. | |
| شجرة العرض المرئية | ريندر تري | ناتج دمج شجرتي DOM وCSSOM معاً، وتضم العناصر المرئية فقط التي ستُطبع فعلياً على الشاشة. | |
| حساب التخطيط وإعادة التخطيط | لاي آوت / ريفلو | حساب العرض والارتفاع والإحداثيات الهندسية الدقيقة لكل صندوق على الشاشة حسب حجم النافذة. | |
| الطلاء والتركيب المسرع | بينت آند كومبوزيتنج | تلوين البكسلات وتقسيمها لطبقات يركبها معالج الرسوميات GPU بسرعة 60 إطاراً في الثانية. |
بمجرد وصول أول دفعة من بايتات ملف عبر الشبكة، يبدأ محلل المتصفح بتنفيذ أربع خطوات متسلسلة لبناء شجرة كائنات المستند ():
- 1. تحويل البايتات إلى حروف (): يقرأ المتصفح الأرقام الثنائية الخام ويترجمها إلى حروف نصية وفق نظام الترميز المحدد في الملف (وهو قياسياً ).
- 2. التقطيع اللغوي إلى رموز (): يقسم المحلل النص إلى وحدات معيارية () مثل وسم بداية ووسم نهاية ومحتوى نصي.
- 3. إنشاء العقد البرمجية (): يُحوّل كل رمز إلى كائن برمجي مستقل في الذاكرة يُسمى عقدة () يحمل خصائص العنصر وسماته.
- 4. ربط شجرة : يربط المحلل هذه العقد في علاقة أب وابن وشقيق لتكوين شجرة هرمية تبدأ من الجذر .
<!DOCTYPE html>
<html lang="en">
<head>
<title>CloseTag DOM</title>
</head>
<body>
<h1 id="hero-title">Web Rendering</h1>
<p class="lead">Fast DOM Tree Construction</p>
</body>
</html>أثناء بناء شجرة ، يصادف المتصفح وسم ربط ملف التنسيق فيبدأ بتحويل قواعد التنسيق إلى شجرة موازية في الذاكرة تُسمى شجرة كائنات التنسيق ().
تتميز شجرة بتطبيق مبدأ التعاقب والوراثة ()؛ حيث ترث العناصر الفرعية تلقائياً خصائص الخط واللون من العناصر الأب، مع إعطاء الأولوية للمحددات الأكثر تخصيصاً.
فور اكتمال شجرتي و، يدمجهما محرك العرض معاً لتكوين شجرة العرض المرئية () ثم ينتقل لمرحلة حساب التخطيط ():
- ضم العناصر المرئية فقط: تستبعد شجرة العرض جميع الوسوم غير المرئية بطبيعتها (مثل و) وكذلك أي عنصر يحمل خاصية الإخفاء التام .
- الفرق الهندسي بين و: العنصر ذو يُحذف تماماً من شجرة العرض فلا يحجز أي مساحة؛ أما العنصر ذو فيبقى داخل شجرة العرض لأنه يحجز مساحته الهندسية كصندوق شفاف.
- مرحلة حساب التخطيط (): يحسب المتصفح الإحداثيات الدقيقة والعرض والارتفاع بالبكسل لكل صندوق بناءً على أبعاد شاشة الجهاز ().
تأمل المخطط الآتي الذي يوضح عملية الدمج والفلترة لتوليد شجرة العرض:
بعد معرفة أبعاد ومكان كل عنصر في مرحلة التخطيط، ينفذ المتصفح المرحلتين الأخيرتين لإظهار الصفحة أمام عين المستخدم:
- 1. مرحلة الطلاء والرسم (): يحول المتصفح الصناديق الهندسية إلى أوامر رسم فعلية تشمل تعبئة الألوان الخلفية، ورسم الحروف النصية، والصور، والحدود، والظلال.
- 2. مرحلة تركيب الطبقات عبر المعالج الرسومي (): لتجنب إعادة رسم الصفحة كاملة عند تحريك عنصر واحد، يقسم المتصفح عناصر الصفحة المتراكبة أو المتحركة إلى طبقات مستقلة ()، ويتولى معالج الرسوميات () دمجها وعرضها على الشاشة بسرعة 60 إطاراً في الثانية (أي بميزانية زمنية قدرها فقط لكل إطار).
يمنحك فهم مسار العرض قدرة هندسية فائقة على كتابة واجهات سريعة وسلسة؛ لأن تعديل خصائص ينقسم من حيث تكلفة الأداء إلى ثلاث درجات:
- 1. إعادة التخطيط الكامل ( — الأعلى تكلفة): عند تغيير خاصية هندسية تغير أبعاد أو موقع العنصر (مثل أو أو أو )، يضطر المتصفح لإعادة حساب مواقع العناصر المجاورة وتنفيذ المراحل الثلاث: التخطيط ثم الطلاء ثم التركيب.
- 2. إعادة الطلاء فقط ( — متوسطة التكلفة): عند تغيير لون النص أو الخلفية () دون المساس بأبعاد الصندوق، يتخطى المتصفح مرحلة التخطيط وينفذ الطلاء والتركيب فقط.
- 3. التركيب المباشر عبر ( — الأسرع على الإطلاق): عند تحريك العناصر باستخدام أو تغيير شفافيتها بـ ، يتخطى المتصفح التخطيط والطلاء معاً وينفذ الحركة مباشرة على معالج الرسوميات بسلاسة فائقة!
جرّب المحاكي التفاعلي الآتي لمقارنة المسارات الثلاثة وتأثيرها على سرعة الإطارات:
عندما يصادف محلل وسم سكربت تقليدياً بدون سمات تحكم، فإنه يضطر إلى إيقاف بناء شجرة مؤقتاً حتى ينتهي تنزيل وتنفيذ ملف الجافاسكريبت! السبب الهندسي هو أن الكود البرمجي قد يغير محتوى الصفحة أو يقرأ عناصرها أثناء التحميل.
لتسريع مسار العرض ومنع هذا التوقف، يوفر معيار سمتين أساسيتين لتحميل السكربتات الخارجية بكفاءة:
- السمة (الخيار القياسي الموصى به لسكربتات الموقع): يُنزّل المتصفح الملف بالتوازي دون إيقاف تحليل ، ويؤجل تنفيذه بالترتيب الصحيح حتى تكتمل شجرة بالكامل.
- السمة (للسكربتات المستقلة كالإحصائيات): يُنزّل الملف بالتوازي وينفذه فور انتهاء تنزيله دون اشتراط ترتيب معين.
<!-- 1. Recommended: Non-blocking download, executes in order after DOM is ready -->
<script defer src="/js/app-bundle.js"></script>
<!-- 2. Independent analytics script: downloads and runs asynchronously -->
<script async src="/js/analytics.js"></script>يطلق المتصفح حدثين برمجيين رئيسيين يتيحان للمطور تتبع اكتمال مراحل مسار العرض الحرج وقياس سرعتها بدقة:
- حدث اكتمال الشجرة : ينطلق فور انتهاء المتصفح من تحليل وبناء شجرة وتنفيذ السكربتات المؤجلة ()، دون انتظار اكتمال تنزيل الصور الكبيرة.
- حدث التحميل الكامل : ينطلق بعد اكتمال تحميل الصفحة وجميع مواردها الفرعية من ملفات تنسيق وصور وخطوط.
document.addEventListener("DOMContentLoaded", () => {
console.log("1. DOM Tree is ready for interactive JS!");
});
window.addEventListener("load", () => {
const nav = performance.getEntriesByType("navigation")[0];
console.log("2. Full Load (ms):", Math.round(nav.loadEventEnd));
});ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمنا في هذا الدرس رحلة مسار العرض الحرج () داخل محرك المتصفح؛ بدءاً من تحويل بايتات إلى شجرة ، وتحليل قواعد التنسيق في شجرة ، ودمجهما في شجرة العرض المرئية ()، والفرق الهندسي بين إعادة التخطيط () وإعادة الطلاء () والتركيب عبر ، وتحميل السكربتات بسمتي و. الخطوة التالية: انتقل الآن إلى الدرس التالي أدوات مطور المتصفح DevTools () لتتعلم كيف تفحص وتعدل شجرة الحية وتراقب الشبكة والأداء عملياً!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات12
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Critical Rendering Path (CRP) مسار العرض الحرج
- سلسلة المراحل الهندسية التي ينفذها المتصفح لتحويل أكواد HTML وCSS وJS إلى بكسلات مرئية على الشاشة.
- للمراجعة
- 02 Document Object Model (DOM) نموذج كائنات المستند DOM
- التمثيل الشجري الهرمي الحي لعناصر صفحة HTML في ذاكرة المتصفح والذي يمكن قراءته وتعديله عبر جافاسكريبت.
- للمراجعة
- 03 CSS Object Model (CSSOM) نموذج كائنات التنسيق CSSOM
- الشجرة البرمجية التي يبنيها المتصفح من ملفات CSS لحساب القواعد الموروثة والأولويات لكل عنصر.
- للمراجعة
- 04 Render Tree شجرة العرض المرئية
- الشجرة الناتجة عن دمج DOM وCSSOM معاً وتضم العناصر المرئية فقط (بعد استبعاد head وscript وdisplay:none).
- للمراجعة
- 05 Layout (Reflow) حساب التخطيط وإعادة التخطيط
- مرحلة حساب الأبعاد الهندسية الدقيقة والموقع الفعلي بالبكسل لكل عنصر مرئي داخل نافذة العرض.
- للمراجعة
- 06 Paint (Repaint) مرحلة الطلاء وإعادة الرسم
- مرحلة تلوين العناصر ورسم النصوص والحدود والظلال والصور داخل الصناديق التي حُسبت أبعادها.
- للمراجعة
- 07 GPU Compositing تركيب الطبقات عبر GPU
- تقسيم عناصر الصفحة المتحركة أو المتراكبة إلى طبقات مستقلة يدمجها معالج الرسوميات GPU بسرعة 60 إطاراً بالثانية.
- للمراجعة
- 08 Render-Blocking Resource مورد حاجز للعرض
- ملف (مثل ملفات CSS الأساسية) يوقف المتصفح عملية رسم الصفحة لحين اكتمال تنزيله وتحليله لمنع تشوه المظهر.
- للمراجعة
- 09 Flash of Unstyled Content (FOUC) وميض المحتوى غير المنسق
- ظهور الصفحة لحظياً بشكل نصي خام غير منسق قبل تطبيق قواعد CSS، وهو ما يمنعه المتصفح بانتظار شجرة CSSOM.
- للمراجعة
- 10 Script Defer Attribute سمة التأجيل المنظم defer
- سمة في وسم script تسمح بتنزيل ملف جافاسكريبت بالتوازي دون إيقاف تحليل HTML وتنفذه بالترتيب فور اكتمال شجرة DOM.
- للمراجعة
- 11 DOMContentLoaded Event حدث اكتمال شجرة DOMContentLoaded
- حدث ينطلق فور اكتمال بناء شجرة DOM وتنفيذ السكربتات المؤجلة دون انتظار انتهاء تنزيل الصور.
- للمراجعة
- 12 Layout Thrashing الاستنزاف المتكرر للتخطيط
- مشكلة أداء تحدث عندما يكرر الكود تعديل التنسيق ثم قراءة الأبعاد الهندسية مباشرة داخل حلقة برمجية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CRP CRP
- Critical Rendering Path
- مسار العرض الحرج لتحويل أكواد الويب إلى بكسلات مرئية.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- نموذج كائنات المستند الشجري الناتج عن تحليل HTML.
- للمراجعة
- 03 CSSOM CSSOM
- CSS Object Model
- نموذج كائنات التنسيق الناتج عن تحليل ملفات CSS.
- للمراجعة
- 04 FOUC FOUC
- Flash of Unstyled Content
- وميض ظهور المحتوى بدون تنسيق قبل تطبيق قواعد CSS.
- للمراجعة
- 05 GPU GPU
- Graphics Processing Unit
- وحدة معالجة الرسوميات المسؤولة عن تسريع رسم وتركيب طبقات الصفحة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
قارن بين عنصر يحمل display: none وآخر يحمل visibility: hidden وحدد أيهما يبقى في شجرة العرض Render Tree ويحجز مساحة في التخطيط.
-
استبدل تحريك عنصر عبر خاصيتي top/left المكلفة بخاصية transform: translateX() لتخطي مرحلتي التخطيط والطلاء والعمل مباشرة على GPU.
-
أضف مستمعي أحداث لـ DOMContentLoaded وload في صفحة تجريبية واطبع التوقيت الزمني لكل منهما لملاحظة أيهما يسبق الآخر.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.