شرح صفوف ومحتوى الفقرة
يطلق المتصفح حدثين برمجيين رئيسيين يتيحان للمطور تتبع اكتمال مراحل مسار العرض الحرج وقياس سرعتها بدقة:
- حدث اكتمال الشجرة : ينطلق فور انتهاء المتصفح من تحليل وبناء شجرة وتنفيذ السكربتات المؤجلة ()، دون انتظار اكتمال تنزيل الصور الكبيرة.
- حدث التحميل الكامل : ينطلق بعد اكتمال تحميل الصفحة وجميع مواردها الفرعية من ملفات تنسيق وصور وخطوط.
JavaScript
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 () لتتعلم كيف تفحص وتعدل شجرة الحية وتراقب الشبكة والأداء عملياً!