CSSVì chúng đi qua số bước khác nhau trong render pipeline của browser.
JS/CSS → Style → Layout → Paint → Composite| Animate cái gì | Chạy lại bước nào |
|---|---|
top, left, width, margin | Layout → Paint → Composite |
background-color, box-shadow | Paint → Composite |
transform, opacity | chỉ Composite |
Layout tốn nhất vì đổi vị trí một element có thể buộc browser tính lại vị trí của mọi element sau nó. Composite thì chỉ là ghép các layer đã vẽ sẵn, chạy trên GPU và không chiếm main thread.
css
/* 60fps = 16.6ms mỗi khung hình. Layout nặng là rớt khung ngay */
.bad { transition: left 0.3s; } /* layout mỗi frame */
.good { transition: transform 0.3s; } /* chỉ composite */
.bad { left: 100px; }
.good { transform: translateX(100px); }Cách kiểm chứng: Performance panel trong DevTools → bật Paint flashing và xem timeline; các khối tím "Layout" xuất hiện mỗi frame là dấu hiệu đang animate sai thuộc tính.
Lưu ý: transform chỉ mượt khi element đã ở đúng chỗ. Vẫn phải dùng top/left (hoặc grid/flex) để đặt vị trí ban đầu — transform chỉ dịch tương đối từ đó.