رندر-درخت ساخت، چیدمان، و رنگ

ایلیا گریگوریک

درخت‌های CSSOM و DOM در یک درخت رندر ترکیب می‌شوند، که سپس برای محاسبه چیدمان هر عنصر قابل مشاهده استفاده می‌شود و به‌عنوان ورودی برای فرآیند رنگ‌سازی عمل می‌کند که پیکسل‌ها را به صفحه نمایش می‌دهد. بهینه سازی هر یک از این مراحل برای دستیابی به عملکرد رندر بهینه بسیار مهم است.

در بخش قبلی در مورد ساخت مدل شی، درخت‌های DOM و CSSOM را بر اساس ورودی HTML و CSS ساختیم. با این حال، هر دوی اینها اشیاء مستقلی هستند که جنبه‌های مختلف سند را به تصویر می‌کشند: یکی محتوا را توصیف می‌کند، و دیگری قوانین سبکی را که باید در سند اعمال شود، توصیف می‌کند. چگونه این دو را ادغام کنیم و مرورگر را وادار کنیم تا پیکسل ها را روی صفحه نمایش دهد؟

خلاصه

  • درخت های DOM و CSSOM با هم ترکیب می شوند تا درخت رندر را تشکیل دهند.
  • درخت رندر فقط شامل گره های مورد نیاز برای رندر صفحه است.
  • Layout موقعیت و اندازه دقیق هر شی را محاسبه می کند.
  • آخرین مرحله رنگ است که درخت رندر نهایی را می گیرد و پیکسل ها را به صفحه نمایش می دهد.

ابتدا، مرورگر DOM و CSSOM را در یک "درخت رندر" ترکیب می کند، که تمام محتوای DOM قابل مشاهده در صفحه و تمام اطلاعات سبک CSSOM برای هر گره را می گیرد.

DOM و CSSOM برای ایجاد درخت رندر ترکیب می شوند

برای ساخت درخت رندر، مرورگر تقریباً کارهای زیر را انجام می دهد:

  1. با شروع از ریشه درخت DOM، هر گره قابل مشاهده را طی کنید.

    • برخی از گره ها قابل مشاهده نیستند (به عنوان مثال، تگ های اسکریپت، تگ های متا، و غیره)، و حذف می شوند، زیرا در خروجی رندر شده منعکس نمی شوند.
    • برخی از گره ها از طریق CSS پنهان می شوند و همچنین از درخت رندر حذف می شوند. برای مثال، گره span---در مثال بالا---در درخت رندر وجود ندارد زیرا یک قانون صریح داریم که ویژگی "display: none" را روی آن تنظیم می کند.

  2. برای هر گره قابل مشاهده، قوانین CSSOM منطبق را پیدا کنید و آنها را اعمال کنید.

  3. گره های قابل مشاهده را با محتوا و سبک های محاسبه شده آنها منتشر کنید.

خروجی نهایی یک درخت رندر است که حاوی اطلاعات محتوا و سبک تمام محتوای قابل مشاهده روی صفحه است. با قرار دادن درخت رندر، می‌توانیم به مرحله «طرح‌بندی» برویم.

تا این مرحله، ما محاسبه کرده‌ایم که کدام گره‌ها باید قابل مشاهده باشند و سبک‌های محاسبه‌شده‌شان، اما موقعیت و اندازه دقیق آن‌ها را در نمای دستگاه محاسبه نکرده‌ایم---این مرحله «طرح‌بندی» است که به عنوان «جریان مجدد» نیز شناخته می‌شود. "

برای تعیین اندازه و موقعیت دقیق هر شی در صفحه، مرورگر از ریشه درخت رندر شروع می شود و آن را طی می کند. بیایید یک مثال ساده و کاربردی را در نظر بگیریم:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

آن را امتحان کنید

بدنه صفحه فوق شامل دو div تو در تو است: div اول (والد) اندازه نمایش گره را روی 50% عرض نمای پورت تنظیم می کند و div دوم --- که توسط والد موجود است --- عرض آن را بر روی 50٪ از والدین خود باشد. یعنی 25 درصد از عرض دید.

محاسبه اطلاعات چیدمان

خروجی فرآیند چیدمان یک "مدل جعبه" است که دقیقاً موقعیت و اندازه هر عنصر را در نمای دید نشان می دهد: همه اندازه گیری های نسبی به پیکسل های مطلق روی صفحه تبدیل می شوند.

در نهایت، اکنون که می‌دانیم کدام گره‌ها قابل مشاهده هستند و سبک‌های محاسبه‌شده و هندسه آن‌ها، می‌توانیم این اطلاعات را به مرحله نهایی منتقل کنیم، که هر گره در درخت رندر را به پیکسل‌های واقعی روی صفحه تبدیل می‌کند. این مرحله اغلب به عنوان "نقاشی" یا "راسترینگ" نامیده می شود.

این ممکن است کمی طول بکشد زیرا مرورگر باید کمی کار کند. با این حال، Chrome DevTools می‌تواند اطلاعاتی در مورد هر سه مرحله توضیح داده شده در بالا ارائه دهد. بیایید مرحله چیدمان را برای مثال اصلی "سلام جهان" بررسی کنیم:

اندازه‌گیری طرح‌بندی در DevTools

  • رویداد "Layout" ساختار درخت رندر، موقعیت و محاسبه اندازه را در Timeline ثبت می کند.
  • هنگامی که چیدمان کامل شد، مرورگر رویدادهای "Paint Setup" و "Paint" را منتشر می کند که درخت رندر را به پیکسل روی صفحه تبدیل می کند.

زمان مورد نیاز برای اجرای ساخت درخت رندر، طرح‌بندی و رنگ بر اساس اندازه سند، سبک‌های اعمال‌شده و دستگاهی که روی آن اجرا می‌شود متفاوت است: هرچه سند بزرگ‌تر باشد، مرورگر کار بیشتری دارد. هر چه سبک‌ها پیچیده‌تر باشند، زمان بیشتری برای نقاشی نیز صرف می‌شود (به عنوان مثال، رنگ آمیزی یک رنگ ثابت «ارزان» است، در حالی که محاسبه و رندر کردن یک سایه «گران» است).

صفحه در نهایت در viewport قابل مشاهده است:

صفحه Hello World ارائه شده است

در اینجا خلاصه ای سریع از مراحل مرورگر آمده است:

  1. نشانه گذاری HTML را پردازش کنید و درخت DOM را بسازید.
  2. نشانه گذاری CSS را پردازش کنید و درخت CSSOM را بسازید.
  3. DOM و CSSOM را در یک درخت رندر ترکیب کنید.
  4. طرح بندی را روی درخت رندر اجرا کنید تا هندسه هر گره را محاسبه کنید.
  5. گره های جداگانه را روی صفحه رنگ آمیزی کنید.

صفحه نمایشی ما ممکن است ساده به نظر برسد، اما نیاز به کمی کار دارد. اگر DOM یا CSSOM اصلاح می شد، باید این فرآیند را تکرار کنید تا بفهمید کدام پیکسل ها باید دوباره روی صفحه نمایش داده شوند.

بهینه‌سازی مسیر رندر بحرانی فرآیند به حداقل رساندن کل زمان صرف شده برای انجام مراحل 1 تا 5 در توالی بالا است. انجام این کار محتوا را در سریع ترین زمان ممکن به صفحه نمایش می دهد و همچنین مدت زمان بین به روز رسانی صفحه پس از رندر اولیه را کاهش می دهد. یعنی برای محتوای تعاملی به نرخ تازه سازی بالاتری دست پیدا کنید.

بازخورد