مرورگر پشت‌صحنه با CSS چیکار می‌کنه؟

تا الان یاد گرفتیم CSS چیه، چطور نوشته می‌شه و چطور به HTML وصل می‌شه. اما یه سؤال مهم باقی می‌مونه: وقتی مرورگر یه صفحه رو باز می‌کنه، دقیقاً چه اتفاقاتی پشت‌صحنه می‌افته تا نهایتاً یه صفحه رنگی و آراسته جلوی چشم‌مون ظاهر بشه؟ این آخرین درس فصل اوله و یه جمع‌بندی خوب از کل مسیریه که تا اینجا طی کردیم.

مراحل کلی پردازش یک صفحه وب

وقتی مرورگر آدرس یک صفحه رو دریافت می‌کنه، این مراحل به‌ترتیب اجرا می‌شن:

  1. دریافت و خواندن فایل HTML
  2. ساخت DOM (Document Object Model)
  3. دریافت فایل‌ها یا بلوک‌های CSS مرتبط
  4. ساخت CSSOM (CSS Object Model)
  5. ترکیب DOM و CSSOM و ساخت Render Tree
  6. محاسبه Layout (چیدمان و مکان هر عنصر)
  7. رسم نهایی صفحه روی صفحه‌نمایش (Paint)

بیایم هرکدوم از این مراحل رو با جزئیات بیشتری ببینیم.

مرحله اول: ساخت DOM

مرورگر ابتدا فایل HTML رو خط‌به‌خط می‌خونه و از روی تگ‌ها یه ساختار درختی می‌سازه به اسم DOM. هر تگ HTML تبدیل به یک گره (Node) در این درخت می‌شه.

<body>
  <header>
    <h1>عنوان</h1>
  </header>
  <p>متن نمونه</p>
</body>

این ساختار HTML به یه درخت شبیه این تبدیل می‌شه: body والد header و p، و header هم والد h1. این درخت فقط ساختار رو نشون می‌ده، هنوز هیچ اطلاعاتی درباره رنگ یا اندازه نداره.

مرحله دوم: ساخت CSSOM

هم‌زمان یا بلافاصله بعد، مرورگر تمام Ruleهای CSS (چه External، چه Internal) رو می‌خونه و یه ساختار مشابه ولی مخصوص استایل می‌سازه به اسم CSSOM. این ساختار مشخص می‌کنه هر عنصر باید چه مقادیری برای هر Property داشته باشه.

نکته مهم اینجاست که CSSOM باید Cascade، Specificity و Inheritance رو هم در نظر بگیره؛ یعنی اگه چند Rule مختلف روی یک عنصر اثر بذارن، مرورگر باید تصمیم بگیره کدوم مقدار نهایی برنده می‌شه. این فرایند دقیق رو در فصل ۲ به‌طور کامل بررسی می‌کنیم.

مرحله سوم: ساخت Render Tree

مرورگر حالا DOM و CSSOM رو با هم ترکیب می‌کنه و یه ساختار جدید می‌سازه به اسم Render Tree. این درخت فقط شامل عناصری‌ه که واقعاً باید روی صفحه دیده بشن؛ یعنی عناصری که مقدار display: none دارن، اصلاً وارد Render Tree نمی‌شن (این تفاوت مهم رو با جزئیات کامل در فصل ۵ می‌بینیم).

مرحله چهارم: Layout

بعد از ساخت Render Tree، مرورگر باید محاسبه کنه که هر عنصر دقیقاً کجای صفحه قرار می‌گیره و چه اندازه‌ای داره. به این مرحله Layout (یا Reflow) گفته می‌شه. اینجاست که مفاهیمی مثل Box Model، Width، Height و Margin وارد عمل می‌شن.

مرحله پنجم: Paint

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

چرا ترتیب بارگذاری CSS مهمه؟

چون مرورگر باید CSSOM رو کامل بسازه قبل از اینکه بتونه Render Tree رو تشکیل بده، فایل‌های CSS معمولاً Render-Blocking در نظر گرفته می‌شن؛ یعنی مرورگر تا وقتی همه CSSهای ضروری رو دریافت و پردازش نکرده، صفحه رو رسم نمی‌کنه. به همین دلیله که قرار دادن تگ link در head (به‌جای انتهای body) اهمیت داره؛ چون باعث می‌شه مرورگر هرچه زودتر شروع به دانلود CSS کنه.

یک مثال کامل برای جمع‌بندی

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>نمونه پردازش CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>سلام دنیا</h1>
</body>
</html>
h1 {
  color: teal;
  font-size: 30px;
}

در این مثال ساده، مرورگر این مراحل رو طی می‌کنه:

  1. فایل HTML رو می‌خونه و DOM می‌سازه (شامل یک گره h1)
  2. فایل style.css رو دانلود و پردازش می‌کنه و CSSOM می‌سازه (که می‌گه h1 باید رنگ teal و اندازه ۳۰ پیکسل داشته باشه)
  3. DOM و CSSOM رو ترکیب می‌کنه و Render Tree می‌سازه
  4. محل و اندازه دقیق h1 رو محاسبه می‌کنه (Layout)
  5. نهایتاً متن رو با رنگ و اندازه مشخص‌شده رسم می‌کنه (Paint)

نکات مهم

  • DOM فقط ساختاره، CSSOM فقط استایله؛ Render Tree ترکیب هردوئه.
  • عناصر با display: none اصلاً وارد Render Tree نمی‌شن.
  • هر تغییری که باعث تغییر در Layout بشه (مثل تغییر Width یک عنصر)، مرورگر رو مجبور می‌کنه دوباره مراحل Layout و Paint رو تکرار کنه؛ این موضوع در فصل Performance به‌طور کامل بررسی می‌شه.

اشتباهات رایج

  • تصور اینکه CSS بعد از رسم اولیه صفحه اعمال می‌شه؛ در واقع مرورگر قبل از هرگونه Paint، منتظر آماده شدن CSSOM می‌مونه.
  • قرار دادن فایل‌های CSS در انتهای صفحه، که باعث تأخیر در نمایش استایل‌دار صفحه می‌شه.

جمع‌بندی

مرورگر برای نمایش یک صفحه، ابتدا HTML رو به DOM و CSS رو به CSSOM تبدیل می‌کنه، سپس این دو رو ترکیب کرده و Render Tree می‌سازه، بعد Layout را محاسبه و در نهایت Paint را انجام می‌ده. درک این فرایند کمک می‌کنه بفهمیم چرا محل قرارگیری فایل CSS و ساختار Ruleها می‌تونه روی سرعت و نحوه نمایش صفحه اثر بذاره.