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

Causes of Slow Page Loading أسباب بطء تحميل صفحات الويب

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

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

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

عندما يصادف محلل وسم سكربت تقليدياً بدون سمات تحكم، فإنه يضطر إلى إيقاف بناء شجرة مؤقتاً حتى ينتهي تنزيل وتنفيذ ملف الجافاسكريبت! السبب الهندسي هو أن الكود البرمجي قد يغير محتوى الصفحة أو يقرأ عناصرها أثناء التحميل.

لتسريع مسار العرض ومنع هذا التوقف، يوفر معيار سمتين أساسيتين لتحميل السكربتات الخارجية بكفاءة:

  • السمة (الخيار القياسي الموصى به لسكربتات الموقع): يُنزّل المتصفح الملف بالتوازي دون إيقاف تحليل ، ويؤجل تنفيذه بالترتيب الصحيح حتى تكتمل شجرة بالكامل.
  • السمة (للسكربتات المستقلة كالإحصائيات): يُنزّل الملف بالتوازي وينفذه فور انتهاء تنزيله دون اشتراط ترتيب معين.
الصف 2 كود برمجي
HTML
<!-- 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>