PerformanceReflow (layout) là browser tính lại vị trí và kích thước phần tử — tốn kém; repaint chỉ vẽ lại pixel — rẻ hơn; layout thrashing là ép reflow đồng bộ lặp lại do xen kẽ đọc–ghi style.
- Reflow trigger — thay đổi ảnh hưởng geometry:
width/height,font-size, thêm/xóa DOM node, đổidisplay; reflow thường kéo theo repaint. - Repaint trigger — thay đổi chỉ ảnh hưởng hình ảnh:
color,background,visibility— không cần tính lại layout. transform/opacity— thường chạy ở compositor thread, không gây reflow lẫn repaint → lựa chọn đúng cho animation.- Layout thrashing (forced synchronous layout) — đọc thuộc tính layout (
offsetHeight,getBoundingClientRect()) ngay sau khi ghi style buộc browser phải layout ngay lập tức để trả lời; lặp trong vòng for → hàng loạt layout đồng bộ, main thread nghẽn. - Cách tránh — batch: đọc tất cả trước, ghi sau; dồn write vào
requestAnimationFrame; cache giá trị đã đọc; thư viện như FastDOM tự tách read/write.
Debug: DevTools Performance tab đánh dấu forced reflow kèm stack trace tới dòng code gây ra.