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/xoá 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.

Hay bị hỏi tiếp 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.

// tệ: đọc sau khi ghi khiến mỗi vòng lặp phải layout đồng bộ
for (const el of items) {
  el.style.width = el.offsetWidth + 10 + 'px'
}

// tốt: gom đọc một lượt, rồi gom ghi một lượt
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 bộ lọc theo cấp độ & chủ đề con.

Mở danh sách Performance

Hay bị hỏi tiếp 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.

// tệ: đọc sau khi ghi khiến mỗi vòng lặp phải layout đồng bộ
for (const el of items) {
  el.style.width = el.offsetWidth + 10 + 'px'
}

// tốt: gom đọc một lượt, rồi gom ghi một lượt
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.