مسیر رندر بحرانی چیست؟
Critical Rendering Path مراحلی است که مرورگر برای تبدیل HTML، CSS و جاوا اسکریپت به پیکسل روی صفحه انجام می دهد. مسیر رندر بحرانی شامل Document Object Model (DOM)، CSS Object Model (CSSOM)، درخت رندر و layout است.
DOM با تجزیه HTML ایجاد می شود. HTML ممکن است جاوا اسکریپت را درخواست کند که ممکن است DOM را تغییر دهد. HTML شامل یا درخواست هایی برای سبک ها می کند که CSSOM را می سازد.
موتور مرورگر این دو را برای ایجاد درخت رندر ترکیب می کند. Layout اندازه و مکان همه چیز را در صفحه تعیین می کند. پس از تعیین طرح، پیکسل ها روی صفحه نمایش داده می شوند.
مسیر رندر بحرانی شیرجه عمیق
با این مراحل می توانیم وارد جزئیات CRP شویم:
- درخواست برای یک صفحه وب یا برنامه با یک درخواست HTML شروع می شود. سرور HTML را برمی گرداند
- سپس مرورگر شروع به تجزیه HTML می کند و بایت های دریافتی را به درخت DOM تبدیل می کند
- مرورگر هر بار که پیوندهایی به منابع خارجی پیدا می‌کند، درخواست‌ها را آغاز می‌کند، این درخواست‌ها شامل شیوه‌نامه‌ها، اسکریپت‌ها یا ارجاع‌های تصویر تعبیه‌شده هستند، برخی از درخواست‌ها مسدود می‌شوند، به این معنی که تجزیه بقیه HTML متوقف می‌شود تا زمانی که دارایی وارد شده مدیریت شود. در زمانی که بهینه سازی درخواست ها وارد می شود
- مرورگر به تجزیه HTML درخواست‌ها و ساختن DOM ادامه می‌دهد تا زمانی که به پایان برسد، در این مرحله مدل شی CSS را می‌سازد.
- با تکمیل DOM و CSSOM، مرورگر درخت رندر را می‌سازد و استایل‌ها را برای تمام محتوای قابل مشاهده محاسبه می‌کند.
- پس از تکمیل درخت رندر، layout رخ می دهد که مکان و اندازه همه عناصر درخت رندر را مشخص می کند
- پس از تکمیل، صفحه رندر می‌شود یا روی صفحه «نقاشی» می‌شود.
مدل شیء سند
ساخت DOM افزایشی است. پاسخ HTML به گره هایی تبدیل می شود که به درخت DOM تبدیل می شوند. گره ها حاوی تمام اطلاعات مرتبط در مورد عنصر HTML هستند. .
هر چه تعداد گره های ما بیشتر باشد، رویدادهای زیر در مسیر رندر بحرانی بیشتر طول می کشد. به یاد داشته باشید که چند گره اضافی تفاوت زیادی ایجاد نمی کند، اما به خاطر داشته باشید که اضافه کردن تعداد زیادی گره اضافی بر عملکرد تأثیر می گذارد.
مدل شیء CSS
DOM شامل تمام محتوای صفحه است. CSSOM حاوی تمام اطلاعات استایل است. CSSOM مشابه DOM است، اما متفاوت است.
در حالی که ساخت DOM افزایشی است، CSSOM نیست. CSS مسدود کردن رندر است: مرورگر رندر صفحه را تا زمانی که تمام CSS را دریافت و پردازش کند مسدود می کند. CSS مسدود کردن رندر است زیرا قوانین را می توان بازنویسی کرد، بنابراین تا زمانی که CSSOM کامل نشود، محتوا قابل ارائه نیست.
درخت رندر
درخت رندر هم محتوا و هم سبک ها را می گیرد: درخت های DOM و CSSOM در درخت رندر ترکیب می شوند.
برای ساختن درخت رندر، مرورگر هر گره را که از ریشه درخت DOM شروع می‌شود، بررسی می‌کند و تعیین می‌کند که کدام قوانین CSS پیوست شده‌اند.
درخت رندر فقط محتوای قابل مشاهده را می گیرد. بخش head (به طور کلی) حاوی اطلاعات قابل مشاهده نیست، بنابراین در درخت رندر گنجانده نشده است.
اگر نمایشگر وجود دارد: هیچ. تنظیم شده بر روی یک عنصر، نه آن، و نه هیچ یک از فرزندان آن، در درخت رندر نیستند.
چیدمان
هنگامی که درخت رندر ساخته شد، چیدمان ممکن می شود. طرح بندی به اندازه صفحه نمایش بستگی دارد.
مرحله layout تعیین می کند که عناصر در کجا و چگونه در صفحه قرار می گیرند، عرض و ارتفاع هر عنصر را تعیین می کند و آنها در کجا نسبت به یکدیگر قرار دارند.
رنگ کنید
آخرین مرحله رنگ آمیزی پیکسل ها روی صفحه است.
پس از ایجاد درخت رندر و چیدمان، پیکسل ها را می توان روی صفحه نمایش داد.
در بارگذاری، کل صفحه رنگ آمیزی می شود. پس از آن، فقط مناطق آسیب دیده از صفحه نمایش دوباره رنگ آمیزی می شوند، زیرا مرورگرها برای رنگ آمیزی حداقل منطقه مورد نیاز بهینه شده اند. زمان رنگ آمیزی بستگی به نوع به روز رسانی هایی دارد که در درخت رندر اعمال می شود.
در حالی که نقاشی فرآیند بسیار سریعی است، و بنابراین احتمالاً تاثیرگذارترین مکان برای تمرکز در بهبود عملکرد نیست، مهم است که به یاد داشته باشید هنگام اندازه‌گیری مدت زمانی که ممکن است یک فریم انیمیشن طول بکشد، زمان‌های طرح‌بندی و رنگ‌آمیزی مجدد را در نظر بگیرید.
