Long task là gì và ảnh hưởng INP thế nào? Cắt nhỏ công việc trên main thread bằng cách nào?

Long task là task chiếm main thread quá 50ms. Trong lúc đó trình duyệt không xử lý được input và không vẽ được khung hình mới, nên cú click rơi đúng vào một long task sẽ phải chờ → INP xấu. INP lấy theo tương tác chậm nhất, nên chỉ cần một chỗ nặng là cả trang bị đánh giá kém.

Một tương tác gồm ba phần: input delay (chờ main thread rảnh) → processing (chạy handler) → presentation delay (render và paint). Đo bằng DevTools Performance để biết phần nào chiếm chủ yếu, đừng tối ưu mò.

Cách cắt nhỏ:

// yield so the browser can handle input between chunks
async function processAll(items) {
  for (const chunk of chunkify(items, 50)) {
    processChunk(chunk)
    await new Promise((r) => setTimeout(r, 0))
  }
}

scheduler.yield() (Chrome) là cách nhường lượt hiện đại, giữ được vị trí ưu tiên khi quay lại — hơn setTimeout(0) vốn bị đẩy xuống cuối hàng.
requestIdleCallback cho việc không khẩn cấp (gửi analytics, prefetch, dựng index tìm kiếm). Luôn đặt timeout để tránh bị hoãn vô hạn khi trang bận; và không dùng cho việc ảnh hưởng tới khung hình kế tiếp — việc đó thuộc requestAnimationFrame.
Web Worker cho tính toán thuần (parse file lớn, mã hóa, xử lý ảnh) — đưa hẳn khỏi main thread.
Cập nhật UI trước rồi mới làm phần nặng sau khi nhường lượt, để người dùng thấy phản hồi ngay.

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

Mở danh sách Performance

Cách cắt nhỏ:

// yield so the browser can handle input between chunks
async function processAll(items) {
  for (const chunk of chunkify(items, 50)) {
    processChunk(chunk)
    await new Promise((r) => setTimeout(r, 0))
  }
}

scheduler.yield() (Chrome) là cách nhường lượt hiện đại, giữ được vị trí ưu tiên khi quay lại — hơn setTimeout(0) vốn bị đẩy xuống cuối hàng.
requestIdleCallback cho việc không khẩn cấp (gửi analytics, prefetch, dựng index tìm kiếm). Luôn đặt timeout để tránh bị hoãn vô hạn khi trang bận; và không dùng cho việc ảnh hưởng tới khung hình kế tiếp — việc đó thuộc requestAnimationFrame.
Web Worker cho tính toán thuần (parse file lớn, mã hóa, xử lý ảnh) — đưa hẳn khỏi main thread.
Cập nhật UI trước rồi mới làm phần nặng sau khi nhường lượt, để người dùng thấy phản hồi ngay.