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.