CSSComposite layer là một mặt phẳng vẽ riêng mà browser giao cho GPU ghép lại ở bước cuối. Element nằm trên layer riêng có thể di chuyển hoặc đổi độ mờ mà không phải vẽ lại phần còn lại của trang.
Cái gì khiến một element được tách layer:
- transform hoặc opacity đang được animate
- will-change: transform | opacity
- position: fixed
- <video>, <canvas>, iframe
- backdrop-filter, filter trong một số trường hợp
- element nằm trên một layer đã có (buộc phải nâng lên theo)
.drawer {
transform: translateX(-100%);
transition: transform 0.24s ease; /* animate transform → chạy ở bước composite */
}Đánh đổi: mỗi layer chiếm bộ nhớ GPU theo diện tích × 4 byte/pixel. Một layer full-HD tốn khoảng 8MB. Vài chục layer là đủ làm điện thoại tầm trung hết bộ nhớ và chậm hơn lúc chưa tối ưu.
Cách kiểm tra: DevTools → menu ⋮ → More tools → Layers. Xem số layer, diện tích, bộ nhớ, và lý do từng layer được tạo.
Lưu ý — "layer explosion": một element được nâng layer sẽ kéo theo mọi element vẽ đè lên nó. Đặt will-change: transform cho một card trong danh sách dài có thể sinh ra hàng chục layer ngoài dự tính — đây là lý do phải kiểm tra ở panel Layers thay vì đoán.