الدرس 18 · Motion and scale

How the browser renders: style, layout, paint

لم يُترجم بعد؛ يُعرض باللغة الإنجليزية

Follow one small card from code to pixels. The browser turns the DOM and the CSSOM into a frame in four stages: style works out every element's values, layout sizes and places each box, paint fills the pixels into layers, and composite puts the layers on the screen. Then change three properties and watch each one rerun only the stages it needs: width all four, background skips layout, translate skips layout and paint.

12 دقيقة10 خطوات5 أسئلةAdvanced

شكل 18 · تفاعلي

جارٍ تحميل الرسم…

أو ← →

اختبر نفسك

5 أسئلة سريعة

اختر إجابة لتعرف السبب. تُحفَظ نتيجتك مع تقدّمك.

01Which stage works out how big each box is and where it sits?

Style works out the values (width: 200px), but layout turns them into geometry: the card's box is 200 by 40 CSS pixels at x 8, y 8.

02The CSS has p { display: none; }. What happens to the p element?

Style still works out its values (that is how the browser learns display is none), but display: none generates no box, so nothing later in the pipeline sees it.

03You change an element's background from gold to tomato. Which stages run again?

A new colour does not change any box's size or place, so layout is skipped; the changed pixels must be painted again and composited.

04Why do smooth animations usually change transform (or translate) and opacity rather than width or left?

Changing width reruns layout, then paint and composite, on every frame. A transform moves an already painted layer, which the compositor can do on its own.

05On a 60 Hz screen, about how long does the browser have to produce each frame?

60 frames each second leaves 1000 ÷ 60 ≈ 16.7 ms per frame, for every stage the change reruns plus the browser's other work.

المصطلحات الأساسية

المسرد

Rendering pipeline: The stages the browser runs to turn the DOM and the CSSOM into pixels on the screen: style, layout, paint and composite.
CSSOM: The CSS Object Model: the browser's tree of the rules in a page's stylesheets, built by parsing the CSS.
Computed style: The final value of every property for one element, after matching the rules, the cascade and the defaults.
Layout: The stage that works out each box's size and position on the page. Running it again is often called reflow.
Paint: The stage that draws each box's pixels (backgrounds, borders, text) into layers, in a fixed order.
Layer: A painted picture of part of the page, kept off screen so the compositor can move or fade it without painting again.
Composite: The stage that stacks the painted layers in order, applies transform and opacity, and hands the finished frame to the screen.
Frame budget: The time the browser has for each frame: about 16.7 ms on a 60 Hz screen.

تفاصيل إضافية

الملاحظات والمصادر

Each browser engine has its own names and extra stages (Chrome, for example, splits paint into recording and rasterising, and running layout again is often called reflow), but every one runs style, layout, paint and composite in this order.
Whether a translate or transform change also skips paint depends on the element having its own compositor layer. Browsers usually give one to an element while its transform or opacity is animating, and will-change: transform asks for it ahead of time.
translate is one of the individual transform properties; translate: 40px moves the box exactly like transform: translateX(40px).
The figure shows one element; a real page runs each stage over every box. The text position inside the card is drawn approximately. The full index.html also has <!DOCTYPE html>, <head> with a <title> and the <link rel="stylesheet" href="style.css">, and <body>.

اختبار يتاح بعد الخطوة الأخيرة.