مرورگر چگونه کار می‌کند؟ _ قسمت اول : نمایش صفحات

عارف زمانی — Tue, 02 Dec 2025 15:50:32 +0330

مقدمههر صفحهٔ وب که در مرورگر می‌بینیم، نتیجهٔ یک فرآیند چندمرحله‌ای است که به آن Rendering Pipeline گفته می‌شود. این فرآیند تعیین می‌کند مرورگر چگونه از کدهای خام HTML، CSS و JavaScript به تصویری قابل مشاهده روی صفحه تبدیل می‌شود.درک درست این مراحل برای توسعه‌دهندگان بسیار مهم است زیرا:می‌توانیم علت کندی یا سنگینی UI را بفهمیممی‌دانیم Reflow، Repaint و Composite دقیقاً چه زمانی اتفاق می‌افتندمتوجه می‌شویم رفتارهای CSS مثل z-index، stacking-context، position، flex، grid، transform و responsive layout چگونه توسط مرورگر محاسبه می‌شوندیاد می‌گیریم چرا تغییر اندازهٔ صفحه باعث layout دوباره می‌شودمعماری پردازشی مرورگر (Browser Architecture)مرورگر از چند بخش کلیدی تشکیل شده است:۱) لایه Networkingوظایفش شامل دانلود HTML، CSS، JS، فونت‌ها و تصاویر است.این مرحله فقط مسئول دریافت داده‌هاست.۲) Render Engineاین لایه مسئول مراحل مربوط به ساخت ساختاربصری صفحه است که شامل مراحل زیر می‌شود :ساخت DOMساخت CSSOMادغام DOM + CSSOM و ساخت Render Treeمحاسبه Layoutمرحله Paint۳) JavaScript Engineمثل V8 در کروم.تمام کد JavaScript در این لایه اجرا می‌شود.نکته مهم: JS ممکن است Render Engine را مجبور به Reflow یا Repaint کند (مثلاً با تغییر style ها یا اندازه‌ها).۴) Compositorاین لایه، تمام لایه‌های گرافیکی ساخته‌شده را از GPU گرفته و روی هم می‌گذارد (Composition) تا فریم نهایی ساخته شود.در ادامه به ساخت ساختار بصری صفحه و compose کردن تمام لایه ها خواهیم پرداخت. این مراحل از وظایف لایه Render Engine و Compositor است .همانطور که در سطور بالا توضیح داده شد لایه Render Engine مسئول ساخت ساختار بصری صفحه است و بخش Compositor هم لایه های گرافیکی ساخته شده در Render Engine را روی هم می‌گذارد. شش مرحله زیر پس از دریافت فایل html از طریق لایه شبکه اتفاق می‌افتد و باعث نمایش صفحه می‌شود مرحله اول — Parse HTML (ساخت DOM)لایه اجرا: HTML Parserمرورگر HTML را خط به خط می‌خواند، تگ‌ها را شناسایی می‌کند و درخت DOM ساخته می‌شود.

تبدیل می‌شود به:DOM Tree └─ body ├ header └ mainDOM فقط ساختار “محتوا” را نشان می‌دهد، نه ظاهر آن.مرحله دوم — Parse CSS → ساخت CSSOMلایه اجرا: CSS ParserCSS فایل‌ها خوانده و تبدیل به مجموعه قوانین (CSSOM Tree) می‌شود: main { display:flex; gap:20px } header { height:60px; background:#000 }تبدیل می‌شود بهCSSOM Tree ├ header { height:60, bg:black } └ main { display:flex, gap:20 }بدون CSSOM امکان شروع Layout وجود ندارد.مرحله سوم — ترکیب DOM + CSSOM → ساخت Render Treeلایه اجرا: Render EngineRender Tree فقط شامل المنت‌هایی است که روی صفحه نمایش داده می‌شوند.مثال: اگر بخشی display: none باشد در Render Tree وجود ندارد.Render Tree موارد زیر را نگه می‌دارد:چه چیزی چه اندازه‌ای داردچه نوع باکسی استچه استایلی رویش اعمال شدهاین مرحله جایی است که مفاهیمی مثل:positionflexgridfloatz-indexstacking contextبرای اولین بار معنی پیدا می‌کنند.فرض کنید این HTML و CSS را داریم:

Title

Hello

.top { height: 60px; background: black; } .hero { width: 100%; height: 300px; background: blue; } .hidden { display: none; } p { color: red; font-size: 20px; } DOM Tree که ساخته می‌شود به شکل زیر است:DOM Tree └ body ├ header.top └ main ├ section.hero ├ div.hidden └ pهمانطور که مشاهده کردید DOM همه عناصر را شامل می‌شود از جمله (even those with display:none.)CSSOM Tree:CSSOM ├ .top { height:60px; background:black } ├ .hero { width:100%; height:300px; background:blue } ├ .hidden { display:none } └ p { color:red; font-size:20px }Render Tree (نتیجه واقعی ادغام DOM + CSSOM) در مثال بالا:Render Tree فقط شامل چیزهایی است که واقعاً باید روی صفحه دیده شوند.display:none حذف می‌شود.اما visibility:hidden حذف نمی‌شود (فقط نامرئی است).پس Render Tree می‌شود: Render Tree └ [body] ├ header.top → height:60 → background:black └ [main] ├ section.hero → width:100% → height:300 → background:blue └ [p] → color:red → font-size:20 → text:Helloدر این مرحله هنوز موقعیت دقیق روی صفحه هنوز مشخص نشده است. این امر وظیفه‌ی مرحله‌ی Layout است.مرحله چهارم — Layout (Reflow)این مرحله تعیین می‌کند هر عنصر دقیقاً در کدام موقعیت قرار بگیرد و چه اندازه‌ای داشته باشد.لایه اجرا: Render Engine (مرحله Geometry)در Layout:Flexbox چیدمان عناصر child را حساب می‌کندGrid نواحی را محاسبه می‌کندposition: relative حرکت محاسباتی دارد (بدون خروج از flow)position: absolute از نزدیک‌ترین ancestor دارای position استفاده می‌کندتغییر اندازه صفحه مستقیماً Reflow را فعال می‌کندمثال:main { display: flex; gap: 20px; } در این مرحله مرورگر موارد زیر را محاسبه می‌کند:آیتم اول چند پیکسل عرض داردآیتم دوم از کجا شروع می‌شودفاصله ۲۰px دقیقاً کجاستحتی responsive نیز در مرحله Layout اتفاق می‌افتد؛زیرا تغییر اندازه صفحه، Media Query‌ها و محاسبات flex/grid را تغییر می‌دهد.Flexbox در مرحله‌ی Layout چه می‌کند؟Flexbox در زمان Layout تصمیم می‌گیرد هر child در چه جهتی، با چه فاصله‌ای و با چه اندازه‌ای قرار بگیرد.مرورگر بر اساس قوانین Flex مثل flex-direction، justify-content، align-items و flex-grow پهنا و ارتفاع نهایی هر آیتم را محاسبه می‌کند.به زبان ساده:Flexbox مغز چیدمان افقی/عمودی و اندازه‌دهی پویا است.Grid در مرحله Layout چه می‌کند؟Grid یک مرحله جلوتر می‌رود:مرورگر ابتدا یک شبکه (grid) می‌سازد، همه track‌ها (سطرها و ستون‌ها) را اندازه‌گیری می‌کند و سپس هر عنصر را در خانه مخصوصش می‌گذارد.به زبان ساده:Grid معمار صفحه است؛ ساختار، ردیف و ستون را تعیین می‌کند.position: relative چه تأثیری روی Layout دارد؟المان‌هایی که position:relative دارند جای اصلی‌شان در flow حفظ می‌شود.اما می‌توانند با top/right/... کمی جابجا شوند.مرورگر ابتدا مکان معمول عنصر را حساب می‌کند،بعد یک جابجایی کوچک تصویری روی آن اعمال می‌کند.به زبان ساده:relative جای عنصر را عوض نمی‌کند؛ فقط کمی آن را در همان جای خود تکان می‌دهد.position: absolute چه تأثیری روی Layout دارد ؟المان‌های absolute از جریان عادی صفحه (normal flow) خارج می‌شوند.مرورگر ابتدا نزدیک‌ترین ancestor که position دارد را پیدا می‌کند (relative/absolute/fixed) و سپس جای دقیق عنصر را نسبت به آن حساب می‌کند.به زبان ساده:absolute خودش را از بقیه جدا می‌کند و مکانش را براساس والد پوزیشن‌دار تعیین می‌کند.چرا تغییر اندازه صفحه Reflow ایجاد می‌کند؟چون Layout وابسته به اندازه viewport است: width, height, درصدها، flex، grid، media queries و …در نتیجه:وقتی اندازه صفحه تغییر می‌کند، مرورگر مجبور است دوباره همه اندازه‌ها و چیدمان‌ها را از اول محاسبه کند.به زبان ساده:Resize یعنی محاسبه دوباره کل چیدمان → Reflow کامل.مرحله پنجم — PaintPaint مرحله‌ای است که مرورگر:رنگ‌هاbordershadowsbackgroundمتنرا روی لایه‌ها نقاشی می‌کند.اینجا اولین‌بار توضیح پرسش مهم تو روشن می‌شود:Paint فقط رنگ زدن نیستمرورگر اینجا تصمیم می‌گیرد کدام عنصر روی کدام عنصر قرار بگیرد و چه چیزی باید قبل یا بعد کشیده شود.مثلاً:اگر سه div داشته باشیم:div1div2div3 با z-index: 999مرورگر باید تصمیم بگیرد:اول div1 کشیده می‌شود بعد div2 آخر div3 این کار بخشی از Paint Order و قوانینی به نام Stacking Context است.مرحله ششم — Compositingدر این مرحله:لایه‌های گرافیکی از Render Engine دریافت می‌شوندGPU آن‌ها را روی هم قرار می‌دهدفریم نهایی ساخته می‌شوداین دقیقاً همان‌جایی است که:«در نهایت چی روی چی می‌افتد»«ترکیب لایه‌ها چطور انجام می‌شود»تعیین می‌گردد.اگر transform یا opacity داشته باشیم، مرورگر برای آن‌ها یک composite layer جدا می‌سازد و GPU آن‌ها را بدون Reflow دوباره جابه‌جا می‌کند.برای درک بهتر کل فرآیند، می‌توانیم آن را با طراحی یک واحد آپارتمانی مقایسه کنیم:مرحله ۱ تا ۳ — DOM, CSSOM و Render Tree:این مراحل شبیه کشیدن نقشه ساختمان هستند. اسکلت ساختمان و فضاها مشخص می‌شوند، کجا اتاق‌ها هستند و چه دیوارهایی وجود دارد، ولی هنوز جزئیات روی زمین قرار نگرفته‌اند.مرحله ۴ — Layout / Reflow:در این مرحله، مرورگر جای دقیق اجزا را محاسبه می‌کند.دیوارهای کناف، پارتیشن‌ها، کابینت‌ها و میزها اندازه‌گیری و در جای خود قرار می‌گیرند. مانند این است که معمار می‌گوید هر وسیله دقیقاً کجا باشد و چه اندازه‌ای داشته باشد.مرحله ۵ — Paint:حالا مرورگر اجزا را رنگ‌آمیزی و طراحی می‌کند.مثل رنگ کردن دیوارها، قراردادن کف‌پوش، تابلوها، و جزییات بصری مانند میزها و کابینت‌ها.مرحله ۶ — Compositing:در این مرحله، همه لایه‌ها روی هم چیده می‌شوند و فریم نهایی نمایش داده می‌شود.مانند کشیدن پرده روی پنجره‌ها یا مشخص کردن اینکه کدام وسیله روی کدام قرار گیرد و چه چیزی در دید کاربر برتر است.Reflow چیستReflow (یا Layout) زمانی اتفاق می‌افتد که مرورگر مجبور شود مکان و اندازه عناصر را دوباره محاسبه کند.مثلا زمانی که اندازه مرورگر را تغییر می‌دهیم.چه تغییراتی Reflow را ایجاد می‌کنند؟هر تغییری که بر هندسه یا ساختار صفحه تأثیر بگذارد باعث Reflow می‌شود:تغییر width, height, padding, marginتغییر محتوای متن (مثلاً اضافه شدن متن طولانی)تغییر position (relative, absolute)تغییر display یا floatتغییرات Flexbox یا Gridتغییر اندازه مرورگر یا Media Queryتصور کنید یک div داریم:

Hello

#box { width: 100px; height: 100px; padding: 10px; border: 2px solid black; } اگر JS مقدار width را تغییر دهد:document.getElementById('box').style.width = '200px'; مرورگر باید اندازه جدید را محاسبه کندموقعیت عناصر دیگر نیز ممکن است تغییر کنداین همان Reflow است💡 به زبان ساده:Reflow یعنی مرورگر همه چیز را دوباره اندازه‌گیری می‌کند و تصمیم می‌گیرد چه چیزی کجا قرار گیرد.Repaint (Paint) چیست؟Repaint زمانی اتفاق می‌افتد که ظاهر یک عنصر تغییر کند ولی موقعیت آن ثابت بماند.🔹 چه تغییراتی Repaint ایجاد می‌کنند؟colorbackground-colorborder-colorvisibility: hidden / visible💡 توجه: این تغییرات باعث Reflow نمی‌شوند، فقط مرورگر آن عنصر را دوباره رنگ‌آمیزی یا رسم می‌کند.🔹 مثال ملموسdocument.getElementById('box').style.backgroundColor = 'red'; اندازه یا موقعیت div تغییر نکردهفقط رنگ آن تغییر کردهمرورگر عنصر را دوباره Paint می‌کندReflow انجام نمی‌شود💡 به زبان ساده:Repaint یعنی مرورگر رنگ و ظاهر را دوباره روی همان محل رسم می‌کند.Stacking Context چیست؟یک مفهوم CSS است که تعیین می‌کند کدام عناصر روی صفحه روی هم قرار می‌گیرند و ترتیب نمایش آن‌ها چگونه است.به زبان ساده:Stacking Context مثل یک لایه یا گروه است که عناصر داخل آن نسبت به هم ترتیب می‌گیرند، اما این ترتیب فقط درون همان گروه معتبر است و روی عناصر خارج از آن تاثیری ندارد.چرا اهمیت دارد؟وقتی چند عنصر روی هم قرار می‌گیرند، مرورگر باید تصمیم بگیرد:کدام عنصر جلوتر باشدکدام عنصر پشت سر دیگری قرار گیردStacking Context این کار را به‌صورت منظم انجام می‌دهد و از سردرگمی جلوگیری می‌کند.چه عواملی Stacking Context ایجاد می‌کنند؟یک عنصر زمانی Stacking Context می‌سازد که یکی از این شرایط را داشته باشد:position غیر static + z-index متفاوت از autoopacity کمتر از ۱transform یا filter یا perspectiveisolation: isolateبرخی ویژگی‌های CSS مثل mix-blend-mode یا will-changeفرض کنید سه div داریم:

.parent { position: relative; z-index: 10; /* ایجاد Stacking Context */ } .child1 { z-index: 5; } .child2 { z-index: 15; } .outside { z-index: 20; } .parent یک Stacking Context جدید ساخته است.داخل .parent، .child1 و .child2 نسبت به هم مرتب می‌شوند (child2 جلوتر).اما .outside که خارج از .parent است، نمی‌تواند صرفاً با z-index 20 نسبت به .child2 جلوتر یا عقب‌تر قرار بگیرد چون child2 داخل Stacking Context دیگری است.در واقع Stacking Context مانند یک صفحه شیشه‌ای مستقل است:عناصر داخل آن ترتیب خودشان را دارندعناصر بیرون نمی‌توانند آن ترتیب را تحت تأثیر قرار دهندبه همین دلیل وقتی z-index بالا روی یک عنصر اعمال می‌کنید ولی نتیجه نمی‌گیرید، معمولاً به دلیل Stacking Context والد است.جمع‌بندیدر این مقاله دیدیم که Rendering در مرورگر یک خط تولید منظم است:Parse HTML → DOMParse CSS → CSSOMRender TreeLayout (Reflow)PaintCompositionو یاد گرفتیم:flex/grid در مرحله Layout اثر می‌گذارندresponsive هنگام Layout اتفاق می‌افتدتغییر اندازه مرورگر Reflow را فعال می‌کندz-index و stacking context در مرحله Paint تصمیم‌گیری می‌شوندترکیب نهایی لایه‌ها در Compositor انجام می‌شوددر مقاله بعدی خواهیم دید مرحله اول چگونه انجام می‌شود و مرورگر چه مکانیزم هایی برای تولید DOM Tree دارد ؟

نوشته های عارف زمانی

مرورگر چگونه کار می‌کند؟ _ قسمت اول : نمایش صفحات