Reflow và repaint khác nhau thế nào? Thao tác nào gây reflow?

Reflow (layout) là khi trình duyệt phải tính lại hình học — vị trí, kích thước của box. Repaint chỉ vẽ lại pixel mà hình học không đổi. Reflow luôn kéo theo repaint; repaint thì không kéo theo reflow.

Gây reflow: đổi width, height, padding, margin, top/left, font-size, thêm/xóa node DOM, resize cửa sổ.
Chỉ repaint: đổi color, background-color, visibility, box-shadow.
Chỉ composite (rẻ nhất): transform và opacity — chạy trên compositor, không đụng main thread layout.

Bẫy hay bị hỏi là layout thrashing: đọc thuộc tính hình học ngay sau khi ghi style, buộc trình duyệt flush layout đồng bộ trong mỗi vòng lặp.

// bad: read after write forces a synchronous layout each iteration
for (const el of items) {
  el.style.width = el.offsetWidth + 10 + 'px'
}

// good: batch reads, then batch writes
const widths = items.map((el) => el.offsetWidth)
items.forEach((el, i) => { el.style.width = widths[i] + 10 + 'px' })

Vì vậy animation nên ưu tiên transform/opacity thay vì left/width.

Xem toàn bộ Performance cùng filter theo level & chủ đề con.

Mở danh sách Performance

Bẫy hay bị hỏi là layout thrashing: đọc thuộc tính hình học ngay sau khi ghi style, buộc trình duyệt flush layout đồng bộ trong mỗi vòng lặp.

// bad: read after write forces a synchronous layout each iteration
for (const el of items) {
  el.style.width = el.offsetWidth + 10 + 'px'
}

// good: batch reads, then batch writes
const widths = items.map((el) => el.offsetWidth)
items.forEach((el, i) => { el.style.width = widths[i] + 10 + 'px' })

Vì vậy animation nên ưu tiên transform/opacity thay vì left/width.