CSSHai bước trong pipeline dựng hình của browser, xếp theo mức tốn kém:
Style → Layout (reflow) → Paint (repaint) → Composite- Reflow / Layout — tính lại vị trí và kích thước. Tốn nhất, vì một thay đổi có thể lan ra toàn cây. Xảy ra khi: đổi
width/height/padding/margin, thêm/xoá DOM node, đổi font, resize cửa sổ. - Repaint — vẽ lại pixel mà không đổi hình học. Xảy ra khi đổi:
color,background,visibility,box-shadow. - Composite — ghép layer đã vẽ. Rẻ nhất, chạy GPU:
transform,opacity.
Đọc thuộc tính hình học giữa lúc đang ghi buộc browser reflow đồng bộ — gọi là layout thrashing:
js
// SAI: đọc-ghi xen kẽ → reflow mỗi vòng lặp
for (const el of items) {
el.style.height = el.offsetHeight + 10 + 'px'
}
// ĐÚNG: đọc hết rồi mới ghi
const heights = items.map((el) => el.offsetHeight)
items.forEach((el, i) => { el.style.height = heights[i] + 10 + 'px' })Nhóm thuộc tính buộc reflow khi đọc: offsetTop/Left/Width/Height, clientWidth/Height, scrollTop/Height, getComputedStyle(), getBoundingClientRect().
Chốt: biết được danh sách "đọc là buộc reflow" ở trên là điểm phân biệt rõ giữa câu trả lời học thuộc và người đã thật sự đi tối ưu.