Cơ chế hoạt động của Event Loop trong Trình duyệt

Tóm tắt nhanh (TL;DR)

Một vòng lặp microtask đệ quy vô tận bằng Promise.resolve().then(...) hay queueMicrotask() có thể lập tức làm tê liệt toàn bộ tab trình duyệt hoặc đóng băng tiến trình Node.js mà không cần đến bất kỳ vòng lặp while(true) đồng bộ nào. Trình duyệt tuyệt đối không nhường quyền cho các tác vụ người dùng, bộ hẹn giờ Macrotask hay chu trình vẽ lại màn hình (Render Queue) chừng nào hàng đợi Microtask chưa được vét sạch 100%. Hiểu rõ cách Call Stack, Microtasks, Tasks/Macrotasks và Rendering Pipeline đan kết vào nhau là ranh giới giữa một ứng dụng mượt mà 60fps và một giao diện "chết đứng".

💡 Quy tắc bỏ túi: Mã đồng bộ trên Call Stack chạy đến khi cạn kiệt trước tiên, ngay sau đó trình duyệt vét sạch toàn bộ Microtask Queue về con số 0. Chỉ khi hàng đợi Microtask hoàn toàn trống rỗng, trình duyệt mới cân nhắc Cơ hội Kết xuất (Rendering Opportunity) hoặc chọn một Macrotask tiếp theo từ Task Source.

• Call Stack tuân thủ nguyên tắc Run-to-Completion: Đoạn mã JavaScript đồng bộ đang chạy trên ngăn xếp sẽ luôn thực thi trọn vẹn đến cùng mà không bị ngắt quãng bởi bất kỳ callback sự kiện nào khác.
• Microtask Checkpoint luôn vét cạn 100%: Các phản hồi Promise (.then, .catch) và queueMicrotask() được xử lý ngay khi Call Stack trống rỗng. Mọi microtask mới phát sinh trong quá trình này cũng sẽ bị hút vào và xử lý dứt điểm ngay trong cùng một checkpoint.
• Rendering hoàn toàn tách biệt khỏi chu kỳ Task: Trình duyệt không vẽ lại sau mỗi callback. Quá trình cập nhật giao diện diễn ra tại các Rendering Opportunity đồng bộ theo tần số quét màn hình, và requestAnimationFrame() được kích hoạt ngay trước các bước tính toán Style và Layout.
• Macrotasks đến từ nhiều nguồn tác vụ (Task Sources) độc lập: Bộ hẹn giờ (setTimeout), tương tác người dùng và sự kiện mạng nằm trong các hàng đợi riêng biệt do bộ điều phối trình duyệt quản lý, không phải một hàng đợi FIFO đơn lẻ.
• Cạm bẫy chết người (Đói tài nguyên do Microtask - Microtask Starvation): Việc gọi đệ quy microtask liên tục sẽ giam cầm luồng chính trong một checkpoint vô tận, bỏ đói hoàn toàn Macrotask Queue và Render Queue. Giao diện người dùng sẽ bị đóng băng cứng ngắc và tê liệt mọi tương tác click chuột.

Ba vùng làm việc: Call Stack, Task Queues và Microtask Queue

Chu trình làm việc của Microtask Checkpoint

console.log('Script bắt đầu');

setTimeout(() => {
  console.log('Timer callback');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise microtask 1');
}).then(() => {
  console.log('Promise microtask 2 (lồng nhau)');
});

console.log('Script kết thúc');

Thứ tự in ra màn hình:

Script bắt đầu
Script kết thúc
Promise microtask 1
Promise microtask 2 (lồng nhau)
Timer callback

Đường ống kết xuất giao diện (Rendering Pipeline)

Một sai lầm rất phổ biến là nghĩ rằng trình duyệt sẽ vẽ lại màn hình ngay sau mỗi tác vụ hay microtask. Thực tế, việc vẽ lại hoàn toàn độc lập và được điều phối bởi chu kỳ quét của màn hình (Refresh Rate).

Phòng thí nghiệm Event Loop (Interactive Lab)

Trải nghiệm trực quan cách Event Loop điều phối giữa Call Stack, Microtasks, Timers và Rendering Pipeline:

console.log('A');
setTimeout(() => console.log('timer'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('B');

Hiện tượng đói tài nguyên (Starvation) và đóng băng Main Thread

Sự cố thực tế: Đóng băng giao diện "vô hình" do Microtask

Một ứng dụng web chat realtime xử lý hàng loạt tin nhắn nhận về qua WebSocket. Khi một lô tin nhắn 500 items ùa về, lập trình viên sử dụng một hàm đệ quy để xử lý từng tin nhắn:

function processMessageBatch(messages: Message[]) {
  if (messages.length === 0) return;
  const msg = messages.shift()!;
  renderMessage(msg);
  // Cố gắng "chia nhỏ" bằng queueMicrotask thay vì xử lý loop đồng bộ:
  queueMicrotask(() => processMessageBatch(messages));
}

• Hậu quả: Dù không có một vòng lặp for dài gây blocking Call Stack, UI vẫn bị "đóng băng" suốt 1.2 giây! Người dùng nhấp chuột vào nút "Gửi" hay thanh nhập liệu đều hoàn toàn bất động. Chỉ số INP (Interaction to Next Paint) báo đỏ nghiêm trọng (>1000ms).
• Nguyên nhân cốt lõi: Lập trình viên nhầm lẫn giữa queueMicrotask() và việc nhường luồng (yielding) cho trình duyệt. queueMicrotask() không bao giờ nhường quyền điều khiển cho Task Queue hay Rendering Pipeline; nó tiếp tục giữ chặt checkpoint cho đến khi queue rỗng 100%.
• Cách khắc phục chuẩn: Nếu muốn nhường luồng cho trình duyệt vẽ lại UI và nhận input click, phải đẩy công việc ra Macrotask hoặc sử dụng scheduler chuẩn:

  // Giải pháp hiện đại: scheduler.yield() nếu hỗ trợ, dự phòng sang setTimeout 0
  async function processMessageBatch(messages: Message[]) {
    for (const msg of messages) {
      renderMessage(msg);
      if ('scheduler' in window && 'yield' in (window as any).scheduler) {
        await (window as any).scheduler.yield();
      } else {
        await new Promise((resolve) => setTimeout(resolve, 0));
      }
    }
  }

So sánh Event Loop giữa Trình duyệt và Node.js

Bài tập kiểm tra tư duy

Hãy dự đoán thứ tự in ra console của đoạn mã sau:

console.log('A');

setTimeout(() => {
  console.log('timer');
}, 0);

Promise.resolve().then(() => {
  console.log('promise');

  queueMicrotask(() => {
    console.log('nested microtask');
  });
});

queueMicrotask(() => {
  console.log('queued microtask');
});

console.log('B');

A
B
promise
queued microtask
nested microtask
timer

Checklist rà soát mã nguồn cho Kỹ sư

• Thời lượng tác vụ (Task Duration): Mọi tác vụ trên Main Thread có hoàn thành dưới ngưỡng 50ms (ngưỡng Long Task trong DevTools) không?
• Giới hạn Microtask: Các lời gọi queueMicrotask() hoặc chuỗi Promise đệ quy có điểm dừng rõ ràng để thoát khỏi checkpoint không?
• Không phỏng đoán thứ tự Task Source: Tránh dựa vào giả định rằng timer sẽ luôn chạy trước hay sau một sự kiện người dùng không liên quan.
• Lên lịch hoạt ảnh chuẩn: Các thao tác cập nhật DOM liên tục hoặc animation đã được đưa vào requestAnimationFrame() chưa?
• Phân tách ranh giới môi trường: Đảm bảo không mang các API đặc thù của Node (process.nextTick, setImmediate) sang code chạy trên trình duyệt.

Tài liệu quy chuẩn

• WHATWG HTML Standard — Event Loops — Đặc tả quy chuẩn thế giới về Event Loop, hàng đợi tác vụ và microtask checkpoint trên trình duyệt.
• W3C Prioritized Task Scheduling API — Đặc tả chuẩn về scheduler.yield() và scheduler.postTask().