Rendering Pipeline CSS OM View
| Stage | Input | Output |
|---|
Style | DOM + CSSOM | Render tree with computed styles |
Layout | Render tree | Box positions and dimensions |
Paint | Layout tree | Paint records (draw commands) |
Composite | Layers | Final pixels on screen |
Layout Box Model
| Property | Default | Affects |
|---|
box-sizing | content-box | width/height calculation |
display | element-dependent | box type (block/inline) |
position | static | layout flow |
width | auto | content box width |
height | auto | content box height |
Paint Drawing Order
| Property | Creates Layer | Triggers Paint |
|---|
color | No | Yes |
background | No | Yes |
box-shadow | No | Yes |
border-radius | No | Yes |
visibility | No | Yes |
Composite GPU Layers
| Property | Creates Compositor Layer |
|---|
transform | Yes (3D or will-change) |
opacity | Yes (when animated) |
will-change | Yes (hints to browser) |
filter | Yes |
position: fixed | Yes (in most browsers) |
Reflow vs Repaint Performance
| Trigger | Reflow | Repaint |
|---|
width, height | Yes | Yes |
margin, padding | Yes | Yes |
top, left (positioned) | Yes | Yes |
font-size | Yes | Yes |
color, background | No | Yes |
transform | No | No (composite only) |
opacity | No | No (composite only) |
GPU Acceleration Composite Only
/* Promote to compositor layer */
.animated {
will-change: transform;
transform: translateZ(0); /* hack */
}
/* Fast properties (composite only) */
transform: translate(x, y);
transform: scale(n);
transform: rotate(deg);
opacity: 0..1; | Property | Why Fast |
|---|
transform | GPU handles matrix math, no reflow |
opacity | Alpha blending on GPU, no repaint |
filter | GPU shader processing |
Frame Budget 60fps Target
| Target FPS | Frame Budget | Practical Budget |
|---|
| 60 fps | 16.67 ms | ~10 ms (browser overhead) |
| 120 fps | 8.33 ms | ~6 ms |
| 30 fps | 33.33 ms | ~28 ms |
Viewport Defaults CSS Device Adaptation
<meta name="viewport" content="width=device-width, initial-scale=1.0">
| Property | Default | Description |
|---|
width | 980px (mobile) | Viewport width in pixels or device-width |
height | auto | Viewport height |
initial-scale | calculated | Initial zoom level (1.0 = 100%) |
minimum-scale | 0.1 | Minimum zoom allowed |
maximum-scale | 10 | Maximum zoom allowed |
user-scalable | yes | Allow pinch-to-zoom |