في الآونة الأخيرة ، أتعلم تحسين أداء الواجهة الأمامية. من الضروري فهم عملية تقديم الصفحة من أجل وصف الدواء المناسب ومعرفة عنق الزجاجة الأداء. فيما يلي بعض الأشياء التي رأيتها ، وسأشاركها معك.
المرجع: فهم العارض
عرض الصفحة له الخصائص التالية :• استطلاع الحدث المفرد
• عملية محددة بوضوح ومستمرة ومنظمة (HTML5)
• التقسيم وبناء أشجار دوم
• طلب الموارد والتحميل المسبق
• بناء الأشجار التقديم ورسوم الصفحات
خاصة :عندما نحصل على البايتات المقابلة لـ HTML من الشبكة ، تبدأ شجرة DOM في بناؤها. الخيط الذي يقوم بتحديث واجهة المستخدم مسؤولة عن المتصفح. يتم حظر بناء شجرة دوم عندما:
• يتم حظر دفق استجابة HTML في الشبكة
• هناك برامج نصية تفريغها
• تمت مواجهة عقدة البرنامج النصي ، ولكن لا يزال هناك ملف نمط تم تفريغه في هذا الوقت
تم تصميم شجرة التقديم من شجرة DOM وسيتم حظرها بواسطة ملف النمط.
نظرًا لأنه يعتمد على استطلاع الأحداث المفردة ، حتى لو لم يكن هناك حظر من البرامج النصية والأنماط ، فسيتم حظر تقديم الصفحة عند تحليل هذه البرامج النصية أو الأنماط وتنفيذها وتطبيقها.
بعض الحالات التي لا يحظر فيها عرض الصفحة :• تحديد السمات المؤجلة وسمات التزامن
• ملف النمط بدون نوع وسائط مطابقة
• لا يتم إدخال عقدة نصية أو عقدة نمط من خلال المحلل
هنا ، دعونا نوضح هذا بمثال (رمز كامل) :انسخ الرمز