Layout and paint

Learn layout and paint cost.

What is the layout cost?

When an element's size or position changes, the browser computes layout. This is also called reflow. Properties like width, height, margin, top, left and display trigger layout.

Layout is costly: a single change can recompute the whole page's arrangement. That is why animation code avoids layout-triggering properties.

Paint cost and the render pipeline

Paint is the stage where pixels are drawn to the screen. color, background, border-color and box-shadow trigger paint. It is cheaper than layout but still costly.

Composite is the cheapest stage: the browser combines layers. transform and opacity trigger only composite. That is why animations prefer these two. Writing transform: translateX(...) is faster than writing left: ....

Exercise Write the animation with transform

Complete the CSS below. Add transform: translateX(100px) and transition: transform 0.3s ease to the .nav block. The animation then runs without triggering layout.

Show example solution

/* new: transform animation */
.nav {
  transform: translateX(100px);
  transition: transform 0.3s ease;
}

Test yourself

Which change triggers a layout recalculation?
```
/* which is the most expensive? */
.box { ___: 200px; }
```
- width
- color
- opacity
- transform
Show answer

width — Correct. width changes the box size; the browser recomputes the entire layout.

Write the property that does not trigger layout

.nav {
  /* composite instead of layout */
  ____: translateX(100px);
}

Show answer

.nav {
  /* composite instead of layout */
  transform: translateX(100px);
}

Match each property to the stage it triggers

width

Layout recalculation
color

Paint redraw
transform

Composite (motion)
opacity

Composite (alpha)

Next lesson: Will-change

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies