همه چیز در مورد Critical rendering path در مرورگر

دسته بندی: آموزش
زمان مطالعه: 7 دقیقه
۲۷ آذر ۱۳۹۷

همه چیز در مورد Critical rendering path در مرورگردر این مطلب میخوام در مورد Critical rendering path یا مسیر رندر شدن بحرانی، توضیحاتی رو خدمتتون عرض کنم و ببینیم که چطوری عمل میکنه و چطوری میتونیم کارکرد اون رو بهتر کنیم تا سایتی سریعتر و بهتر داشته باشیم.

زمانی که مرورگر از سرور کدهای HTML یک صفحه وب رو دریافت میکنه، قبل از رندر شدن چیزی بر روی screen، مراحل زیادی طی میشه. این دنباله که مرورگر برای paint کردن اولیه صفحه وب نیاز هست که اون رو طی کنه، Critical rendering path یا مسیر رندر شدن بحرانی نام داره.

داشتن اطلاعات در مورد Critical rendering path خیلی به بهینه‌سازی وبسایت شما کمک میکنه و هر چه فهم شما از این موضوع بیشتر باشه، میتونین بهتر سایتتون رو بهینه‎سازی کنید.

دنباله Critical rendering path

این دنباله حاوی 6 آیتم هست:

  1. ساخت درخت DOM یا DOM tree
  2. ساخت درخت CSSOM یا CSS object model
  3. اجرا شدن Javascript
  4. ساخت Render tree
  5. تولید شدن Layout
  6. Painting یا نقاشی کردن

حالا این مراحل رو یکی یکی توضیح میدیم. پس با سون لرن همراه باشید.

1. ساخت درخت DOM یا DOM tree

درخت DOM یا Document Object Model یک Object یا شئ هست که نشون‌دهنده ساختار صفحه وب هست و کل المنتهای HTML پس از تجزیه و تحلیل شدن در اون قرار میگیرن. برای هر المنت یا متن یک node در صفحه ایجاد میشه و اینکار از المنت ریشه که همون المنت html هست آغاز میشه.

المنتهایی که درون المنتهای دیگر بصورت تو در تو قرار میگیرن رو child nodes میگن و هر node شامل همه ویژگی‌های مربوط به المنت می‌باشد. برای مثال، در node  مربوط به المنت <a> ویژگی href قرار داده میشه.

برای مثال سند HTML زیر رو مشاهده کنید:

<html>
<head>
  <title>Understanding the Critical Rendering Path</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
      <h1>Understanding the Critical Rendering Path</h1>
  </header>
  <main>
      <h2>Introduction</h2>
      <p>Lorem ipsum dolor sit amet</p>
  </main>
  <footer>
      <small>Copyright 2017</small>
  </footer>
</body>
</html>

کد بالا باعث به وجود اومدن ساختار DOM زیر میشه:

خبر خوبی که در مورد HTML باید بدونین اینه که بصورت جزئی و تکه تکه هم میتونه اجرا بشه و جزئیات رو در صفحه نشون بده و نیاز نیست که کل سند دانلود و لود بشه و بعد از اون در مرورگر نمایش داده بشه و هر چیزی که دانلود میشه همون لحظه نشون داده میشه. در صورتی که منابع دیگر مثل CSS و Javascript تا زمانی که بصورت کامل لود نشده باشند، جلوی رندر شدن صفحه رو میگیرن.

2. ساخت درخت CSSOM یا CSS object model

CSSOM یا CSS Object Model یک Object یا شئ نشان‌دهنده استایلهای مربوط به DOM می‌باشد. این شئ شبیه به DOM هست با این تفاوت که ویژگی‌های مربوط به هر node رو نشون میده. برای مثال فرض کنید که برای سند HTML بالا، کدهای CSS زیر رو استفاده کنیم:

body { font-size: 18px; }

header { color: plum; }
h1 { font-size: 28px; }

main { color: firebrick; }
h2 { font-size: 20px; }

footer { display: none; }

با اینکار درخت CSSOM بصورت زیر خواهد شد:

CSS یک render blocking resource محسوب میشه. یعنی درخت render یا render tree تا زمانی که اون CSS دانلود و بصورت کامل تجزیه و تحلیل نشه، ساخته نمیشه و جلوی رندر شدن رو تا زمانی میگیره. برخلاف HTML، کدهای CSS به دلیل Cascade و آبشاری بودن، نمیتونن بصورت جزئی یا تکه تکه مورد استفاده قرار بگیرن.

مثلا استایلهایی که در خط 50 تعریف میکنید، میتونه استایلهای خط 5 رو بازنویسی کنه و تغییر بده. پس اگر از CSS بصورت جزئی استفاده کنیم، ممکنه که استایلهای اشتباه برای المنتهای HTML اعمال بشه و به مشکل بر بخوریم. پس با این تفاسیر در این مرحله کدهای CSS باید بصورت کامل لود شده و parse بشن و بعد از اون میتونیم سراغ مرحله بعد بریم.

فایلهای CSS فقط اگر به دستگاه فعلی نسبت داشته باشن، render block محسوب میشن. همونطور که میدونین تگ <link rel="stylesheet"> یک ویژگی بنام media قبول میکنه که میتونین در اون media query رو قرار بدین و مشخص کنید که این استایلها تحت چه شرایطی باید لود و اعمال بشن.

برای مثال اگر ما یک تگ link با ویژگی media با مقدار orientation:landscape داشته باشیم و صفحه رو در حالت portrait مشاهده کنیم، اون فایل CSS یک render blocking resource محسوب نمیشه چون اصلا مورد استفاده قرار نمیگیره.

CSS همچنین script blocking هست. بخاطر اینکه Javascript باید منتظر بمونه تا CSSOM بصورت کامل تشکیل بشه و بعد از اون اجرا بشه.

یک ابزار بنام critical وجود داره که با استفاده از اون میتونین CSS های مهم که مربوط به above the fold سایت شما هستند رو استخراج کرده و بصورت inline در بیارید و بقیه کدهای CSS که در جاهای دیگه مورد نیاز هستند رو بعدا لود کنید. با اینکار سایت شما خیلی سریعتر میشه. برای مطالعه بیشتر در این زمینه میتونین این لینک رو ببینید.

3. اجرا شدن Javascript

Javascript یک parser blocking resource محسوب میشه. یعنی تجزیه و تحلیل کردن کدهای HTML متوقف میشه و بعد از لود شدن کامل فایل Javascript ادامه پیدا میکنه.

زمانی که parser به یک تگ script میرسه، چه internal و چه external باشه، اون script اول دانلود و اجرا میشه و بعد parser به کار خودش ادامه میده. برای اینکه جلوی parser blocking بودن Javascript رو بگیرید، میتونین از ویژگی async استفاده کنید. بصورت زیر:

<script async src="script.js">

4. ساخت Render tree

Render tree ترکیبی از DOM و CSSOM می‌باشد. این درخت مشخص میکنه که چه چیزی باید بر روی صفحه رندر بشه. پس فقط اون المنتهایی که visible هستند در این درخت قرار میگیرن و برای مثال اون المنتهایی که display برابر با none دارند در این درخت قرار نمیگیرن. در مثالهای بالا render tree بصورت زیر خواهد شد:

5. تولید شدن Layout

Layout مشخص میکنه که سایز viewport چه اندازه هست تا استایلهای CSS بسته به اون اعمال بشن. سایز viewport رو میتونین با استفاده از تگ meta مشخص کنید و باید این تگ رو در head سند HTML خودتون قرار بدین. اگر هیچ تگی برای viewport در نظر گرفته نشه، بصورت پیش‌فرض 980 پیکسل مورد استفاده قرار میگیره.

برای مثال از تگ meta در بیشتر موارد بصورت زیر استفاده میکنند:

<meta name="viewport" content="width=device-width,initial-scale=1">

6. Painting یا نقاشی کردن

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

قرار دادن همه چیز در کنار هم

برای اینکه Critical rendering path رو در عمل ببینیم، میتونیم از chrome inspector استفاده میکنیم. برای اینکار میتونیم از تب Performance استفاده کنیم. برای مثال سند زیر رو در یک فایل قرار بدین و اون رو در مرورگر باز کنید:

<html>
<head>
  <title>Understanding the Critical Rendering Path</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
      <h1>Understanding the Critical Rendering Path</h1>
  </header>
  <main>
      <h2>Introduction</h2>
      <p>Lorem ipsum dolor sit amet</p>
  </main>
  <footer>
      <small>Copyright 2017</small>
  </footer>
  <script src="main.js"></script>
</body>
</html>

فایل style.css و main.js رو هم بسازید و کدهایی رو درونشون قرار بدین. حالا فایل HTML بالا رو در مرورگر Chrome باز کنید و Inspector رو باز کرده و وارد تب Performance بشید:

همونطور که در تصویر بالا مشخص شده بر روی Reload and profile کلیک کنید. با اینکار صفحه Reload میشه و بعد از چند ثانیه نتیجه آنالیز در اختیارتون قرار میگیره.

بر روی تب Event Log کلیک کنید تا اطلاعات مورد نظر رو مشاهده کنید.

  1. درخواست برای دریافت index.html ارسال میشه
  2. در این مرحله کدهای HTML تجزیه تحلیل میشه و درخواست برای دریافت فایلهای style.css و main.js ارسال میشه.
  3. CSSOM برای StyleSheet ساخته میشه
  4. main.js ارزیابی و اجرا میشه
  5. ساخت layout بر اساس تگ meta viewport
  6. نقاشی کردن پیکسل‌ها بر روی صفحه نمایش

با استفاده از این اطلاعات میتونیم کدهامون رو بهینه‌تر کنیم و سایتی سریعتر از قبل داشته باشیم.

چه امتیازی به این مقاله می دید؟
نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

ehsankhodayariiii

اخ اخ. یه مشکلی اینجا داشتم که خداروشکر برطرف شد

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل