Mục lục
Xem mục lục
Vì sao cần Event Loop
JavaScript chạy đơn luồng (single-threaded), tại một thời điểm chỉ thực thi được một đoạn code. Nếu mọi tác vụ đều chạy đồng bộ, một request mạng chậm hay một timer sẽ chặn đứng toàn bộ chương trình cho tới khi xong.
Event Loop là cơ chế cho phép JavaScript giao các tác vụ tốn thời gian (timer, network, đọc file…) ra ngoài luồng chính, rồi quay lại xử lý kết quả khi luồng chính rảnh, mà không cần nhiều luồng thật sự.
Các thành phần trong Event Loop
Event Loop vận hành dựa trên bốn thành phần chính, phối hợp với nhau theo một vòng lặp cố định:
- Call Stack: nơi thực thi code đồng bộ, hoạt động theo LIFO.
- Web APIs / Node APIs: nơi xử lý các tác vụ bất đồng bộ ngoài luồng chính (timer, network, file I/O…).
- Task Queue (Macrotask Queue): hàng đợi chứa callback của
setTimeout,setInterval, sự kiện DOM, I/O callback. - Microtask Queue: hàng đợi chứa callback của
Promise.then/catch/finally,queueMicrotask, có độ ưu tiên cao hơn Task Queue. - Event Loop: vòng lặp liên tục kiểm tra Call Stack, điều phối việc lấy task từ hai hàng đợi trên đưa vào Call Stack để chạy.
Các phần tiếp theo đi vào chi tiết từng thành phần và thứ tự phối hợp giữa chúng.
Call Stack
Call Stack là nơi lưu các function đang được thực thi, hoạt động theo cơ chế LIFO (vào sau ra trước). Khi một function được gọi, nó được đẩy (push) lên stack. Khi function chạy xong, nó bị lấy ra (pop) khỏi stack.
function a() {
b();
}
function b() {
console.log("b chạy");
}
a();Thứ tự trên stack: a được push, bên trong a gọi b nên b được push tiếp, b chạy xong bị pop, rồi a mới bị pop.
Web APIs / Node APIs
Các tác vụ bất đồng bộ như setTimeout, fetch, đọc file (fs trong Node.js) không được xử lý trực tiếp trong Call Stack. Chúng được giao cho môi trường chạy (browser hoặc Node.js) xử lý bên ngoài luồng chính. Khi tác vụ đó hoàn tất, callback tương ứng được đưa vào một hàng đợi, chờ tới lượt chạy lại trong Call Stack.
Task Queue (Macrotask Queue)
Task Queue chứa callback của các tác vụ như setTimeout, setInterval, sự kiện DOM, I/O callback. Mỗi lần Call Stack rỗng, Event Loop lấy đúng một task từ hàng đợi này đưa vào Call Stack để chạy.
Microtask Queue
Microtask Queue chứa callback của Promise.then/catch/finally và queueMicrotask. Hàng đợi này có độ ưu tiên cao hơn Task Queue.
Cơ chế vòng lặp
Mỗi vòng lặp của Event Loop diễn ra theo thứ tự:
- Chạy code đồng bộ cho tới khi Call Stack rỗng.
- Lấy toàn bộ Microtask Queue ra chạy hết, kể cả các microtask mới sinh ra trong lúc đang chạy microtask khác.
- Lấy một task từ Task Queue đưa vào Call Stack để chạy.
- Quay lại bước 2.
Nói cách khác, Microtask Queue luôn được dọn sạch trước khi Event Loop lấy task tiếp theo từ Task Queue.
Demo Event Loop Simulator
Bấm “Tiếp” để xem từng bước Call Stack, Web APIs, Task Queue, Microtask Queue thay đổi thế nào, hoặc chọn ví dụ khác từ danh sách để xem trường hợp new Promise() với executor chạy đồng bộ nhưng resolve() gọi bên trong setTimeout.
Tổng kết
- Call Stack chạy code đồng bộ, theo LIFO.
- Tác vụ bất đồng bộ được giao cho Web APIs/Node APIs xử lý ngoài luồng chính.
- Task Queue (macrotask):
setTimeout,setInterval, I/O callback, mỗi vòng lặp chỉ lấy một task. - Microtask Queue:
Promise.then,queueMicrotask, được xử lý hết toàn bộ trước khi lấy task tiếp theo. - Thứ tự ưu tiên mỗi vòng lặp: code đồng bộ → toàn bộ microtask → một macrotask.