به طور کلی مراحل پردازش یک صفحه وب در مرورگر شامل این 5 مرحله است :‌

  1. مرورگر HTML را پردازش و DOM را ایجاد می نماید
  2. مرورگر CSS ها را پردازش کرده و CSSOM را ایجاد می نماید
  3. DOM و CSSOM با هم ترکیب شده و Render-Tree ایجاد میشود.
  4. مرورگر در مرحله Layout مختصات و اندازه هر یک از بخش ها را مشخص می کند.
  5. در مرحله Painting رنگهای مشخص شده در صفحه نمایش ثبت شده و نمایش داده می شود.

DOM مخفف Document Object Model است که مربوط به ساختار HTML در مرورگر هاست. قبل از اینکه مرورگر بخواهد یک صفحه را نمایش دهد بایستی از HTML دریافت شده یک ساختار درختی ایجاد نماید. روند کار مرورگر به این شکل است که ابتدا مرورگر بایت به بایت اطلاعات را دریافت مینماید و از این بایت ها کاراکتر ها را تشخیص میدهد سپس تگ های HTML را از هم تفکیک میکند و از هر تگ یک نود(Node) ایجاد میکند. و در نهایت با پردازش این نود ها ساختار درختی ایجاد مینماید مانند تصویر زیر :‌

full-process

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model#document-object-model-dom

هر بار که مرورگر صفحه ای را پردازش مینماید تمام مراحل بالا مجددا انجام می شود. بعد از پردازش و ایجاد DOM هنوز نحوه نمایش صفحه مشخص نیست و مرورگر بایستی با استفاده از CSS های موجود در DOM قالب صفحه را ایجاد نماید. اما همه مرورگر ها برای بیشتر تگ های HTML یک قالب و CSS پیش فرضی دارند که با نام user agent styles شناخته میشوند. در برخی مرورگر ها امکان مشاهده Computed Styles وجود دارد که همان خصوصیاتی است که مرورگر به صورت پیش فرض بر روی هر المنت اعمال می نماید. پروسه پردازش CSS ها نیز مشابه DOM انجام می شود و بایت ها به کاراکتر تبدیل می شوند سپس بخش به بخش کد ها تفکیک شده و هر نود و المنت مشخص می شود و در نهایت به صورت آبشاری پردازش می شود و در نهایت ساختار درختی زیر ایجاد می شود.

cssom-tree

به این ساختار درختی CSSOM می گویند. (CSS Object Model)

در مرحله بعد DOM و CSSOM با هم ترکیب می شوند و Render-Tree ایجاد میگردد که شامل تمام المنت هایی است که با استفاده از CSS ها قرار است در صفحه مورد نظر نمایش داده شود. مرورگر Render-Tree ایجاد شده را بایستی برای پردازش به بخشی که کار نمایش پیکسل به پیکسل را برعهده دارد ارسال نماید(رنگ هر پیکسل در این بخش تنظیم میشود). Render-Tree فقط شامل المنت هایی است که باید نمایش داده شوند و بخش هایی که با Display:none تنظیم شده اند درون Render-Tree قرار نخواهند گرفت.

render-tree-construction

تا به اینجا بخش هایی که بایستی در صفحه نمایش داده شوند به همراه قالب هر یک مشخص شده است. اما محل قرار گیری دقیق هر یک در صفحه نمایش مشخص نشده است. به مرحله ای که این کار را انجام میدهد Layout  و یا Reflow گفته میشود. در این مرحله نرم افزار مرورگر, از شاخه اصلی شروع کرده و موقعیت هر المنت را با استفاده از CSS های اعمال شده تشخیص میدهد. اینکه هر المنت در کجای صفحه نمایش داده شود در این مرحله مشخص می شود. در واقع مختصات هر المنت مشخص می شود. در مرحله بعد این المنت ها بایستی بر روی صفحه نمایش داده شود. این مرحله Painting نامیده می شود.

معمولا بخش های ایجاد Render-Tree و محاسبه اندازه و موقعیت المنت ها با نام Layout شناخته می شوند. در برخی مرورگر ها امکان مشاهده اینکه این مرحله از پردازش مرورگر چقدر به طول انجامیده قابل مشاهده است. زمانی که برای پردازش این سه مرحله نیاز است به نوع سخت افزار(موبایل-تبلت و …) و اندازه صفحه نمایش و استایل هایی که اعمال شده است مرتبط است و هرچقدر صفحه رزولوشن پایین تری داشته باشد سرعت بالاتر خواهد بود. البته پردازش و نمایش رنگ های مسطح Flat خیلی سریعتر از بخش هایی مانند سایه ها انجام می شود.

CSS

مرورگر تا زمانی که DOM و CSSOM را به طور کامل پردازش نکرده باشد وارد مرحله نمایش صفحه نخواهد شد چرا که ممکن است چند لحظه کوتاه صفحه وب بدون CSS نمایش داده شود. (Flash of Unstyled Content – FOUC)

با استفاده از خصوصیت media در تگ link می توانبد سرعت پردازش صفحه را افزایش دهید. به عنوان مثال :‌

 

قراردادن خصوصیت media=print به مرورگر اعلام میکند که برای پردازش صفحه خارج از حالت پرینت این استایل اهمیت زیادی ندارد و مرورگر با اینکار این استایل را تا زمانی که عملیات painting انجام نشده است نادیده میگیرد. در واقع اولویت پردازش این استایل را به تاخیر می اندازد.

 

در حالت فوق نیز مرورگر در صورتی که تشخیص دهد اندازه صفحه نمایش با شرط ایجاد شده یکسان است عملیات painting را تا زمانی که استایل مورد نظر دانلود شده و پردازش شود به تاخیر می اندازد. حتما زمانی که از این خصوصیت استفاده میکنید کارایی و سرعت لود صفحه را در نظر بگیرید.

مرورگر با مشاهده خط اول این استایل را در تمام حالت ها دانلود و پردازش میکند.

خط دوم هم مشابه خط اول است.

خط سوم در حالتی که سخت افزار مورد نظر (مانند موبایل) در حالت portrait قرار داشته باشد تا پردازش کامل این استایل عملیات painting را به تاخیر می اندازد.

خط آخر نیز فقط زمانی که صفحه در موقعیت پرینت قرار میگیرد اعمال می شود و تاثیری بر روی مرحله painting نخواهد گذاشت.

در بخش بعدی در رابطه با نحوه پردازش جاوا اسکریپت و تاثیر آن در سرعت پردازش بحث خواهیم کرد. با ما همراه باشید …

منابع :‌

https://developers.google.com

محمد باقر رستمی

برنامه نویسی رو دوست دارم و از کارم و بیشتر از اون از یادگرفتن لذت می برم. دوست دارم از این طریق برای مردم دنیا مفید باشم. فارغ از رنگ، نژاد، ملیت و جنسیت.

Latest posts by محمد باقر رستمی (see all)

facebooktwittergoogle_pluslinkedin

دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

*


+ هفت = 8