Summary - Fast card list

Build a fast card list with performance techniques.

How is a fast card list built?

A fast card list rests on four techniques. First, an efficient selector: a single class like .card beats deep descendant selectors. Then contain: it isolates .card-list and .card.

For hover you use transform; it does not trigger layout. Before it, you write will-change: transform to prepare the layer. Combined, the long list scrolls smoothly.

contain and will-change together

On a long card list the two techniques work as a pair. contain: content isolates each card from outside; when one card changes the whole list is not recomputed. will-change: transform prepares a separate layer for the card.

Combined, the hover animation runs only on that card's layer; the list stays fluid. But apply will-change only to cards that will be hovered; writing it on all of them bloats memory.

Exercise Build the fast card list

Complete the CSS below. In .card-list add display: grid and contain: content. In .card add contain: layout paint. In .card-title add font-size: 1.25rem.

Show example solution

/* fast card list */
.card-list {
  display: grid;
  contain: content;
}

.card {
  contain: layout paint;
}

.card-title {
  font-size: 1.25rem;
}

Exercise Add the card hover animation

Complete the CSS below. Add transition: transform 0.2s ease to .card. In .card:hover add transform: scale(1.03) and will-change: transform.

Show example solution

/* card hover animation */
.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: scale(1.03);
  will-change: transform;
}

Test yourself

Match each technique to its purpose

.card class

Efficient selector
contain: content

Isolation
transform: scale

Hover animation
will-change: transform

Layer prep
color: red

Paint only
Which render operation is the most expensive?
- Composite
- Layout
- Paint
- Style
Show answer

Layout — Correct. Layout recomputes the entire arrangement; it is the most expensive stage.

Next lesson: What is Houdini?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies