Event loop của JavaScript xử lý công việc async như thế nào?

Question

IT Interview Practice · Accepted Answer

JavaScript chạy trên một **luồng duy nhất**, nên nó chỉ có thể làm một việc tại một thời điểm. **Event loop** là thứ cho phép nó xử lý công việc async mà không bị chặn: nó chạy call stack, và khi stack rỗng, nó kéo các callback từ các hàng đợi.

Có hai hàng đợi với độ ưu tiên khác nhau:
- **Microtask**: các callback của Promise (`.then`), `queueMicrotask`. Được rút cạn **hoàn toàn** sau mỗi task, trước khi render.
- **Macrotask**: `setTimeout`, I/O, sự kiện UI. Một cái được xử lý mỗi lượt vòng lặp.

```js
console.log("1");                         // đồng bộ
setTimeout(() => console.log("2"), 0);    // macrotask
Promise.resolve().then(() => console.log("3")); // microtask
console.log("4");                         // đồng bộ
// Output: 1, 4, 3, 2
```

## Tại sao thứ tự đó

1. Code đồng bộ chạy trước: `1`, `4`.
2. Stack rỗng → rút cạn **tất cả microtask**: `3`.
3. Rồi lấy **một macrotask**: `2`.

Đây là lý do một `Promise.then` luôn chạy **trước** một `setTimeout(…, 0)`, mặc dù cả hai đều "async" — microtask có độ ưu tiên cao hơn.

## Một hệ quả thực tế

```js
// ❌ chặn luồng duy nhất — UI đóng băng trong 5 giây
while (Date.now() - start < 5000) {}
```

Công việc đồng bộ kéo dài chặn mọi thứ (render, click). Hãy chuyển công việc CPU nặng sang một **Web Worker** (một luồng riêng biệt thực sự).

## Tại sao điều này quan trọng

Hiểu event loop giải thích thứ tự async, vì sao promise resolve trước timer, và vì sao không bao giờ được chặn luồng chính — mô hình tư duy cốt lõi cho mọi async JavaScript.

Tại sao thứ tự đó

Một hệ quả thực tế

Tại sao điều này quan trọng

Câu hỏi liên quan