Rate this post

Event Loop là một khái niệm cốt lõi và quan trọng trong JavaScript, giúp xử lý các tác vụ bất đồng bộ. Hiểu rõ về Event Loop sẽ giúp bạn nắm vững cách JavaScript quản lý các sự kiện và thực thi mã nguồn một cách hiệu quả. Event Loop đảm bảo rằng các tác vụ như thao tác DOM, xử lý API và các lời gọi hàm bất đồng bộ (như setTimeout và Promises) được thực hiện một cách trơn tru mà không làm gián đoạn hoạt động chính của ứng dụng.

Tóm tắt nội dung

Kiến trúc của Event Loop

Kiến trúc của Event Loop bao gồm ba thành phần chính: Call Stack, Heap và Queue. Call Stack là nơi các hàm được gọi và thực thi. Heap là vùng nhớ để lưu trữ các đối tượng và biến. Queue là nơi các thông điệp hoặc sự kiện chờ được xử lý.

Call Stack:

Call Stack là một cấu trúc dữ liệu kiểu LIFO (Last In, First Out) dùng để quản lý thứ tự thực thi các hàm.

function foo() {
  console.log('foo');
}
function bar() {
  foo();
  console.log('bar');
}
bar();
// Kết quả: foo, bar

Cơ chế hoạt động của Event Loop

Event Loop liên tục kiểm tra Call Stack để xem có hàm nào cần thực thi không. Nếu Call Stack trống, nó sẽ lấy các sự kiện từ Queue và đẩy vào Call Stack để thực thi. Ví dụ sau đây minh họa cách Event Loop hoạt động với setTimeout:

console.log('Start');
setTimeout(() => {
  console.log('Timeout');
}, 0);
console.log('End');
// Kết quả: Start, End, Timeout

Trong ví dụ này, setTimeout được đẩy vào Queue và chỉ thực thi sau khi Call Stack trống.

Các loại Queue trong Event Loop

JavaScript có hai loại Queue chính: Callback Queue và Microtask Queue.

Callback Queue (Task Queue):

Chứa các tác vụ như setTimeout, setInterval.

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

Microtask Queue:

Chứa các tác vụ như Promises, MutationObserver.

Promise.resolve().then(() => {
  console.log('Microtask Queue');
});

Microtask Queue có độ ưu tiên cao hơn so với Callback Queue.

Sự khác biệt giữa Macro Task và Micro Task

Macro Task:

Bao gồm setTimeout, setInterval, setImmediate, I/O, UI rendering.

Micro Task:

Bao gồm process.nextTick, Promises, Object.observe, MutationObserver.
Event Loop luôn xử lý hết Micro Task trước khi chuyển sang Macro Task.

Event Loop trong thực tế

Ví dụ sau minh họa cách Event Loop xử lý các tác vụ bất đồng bộ:

console.log('Start');
setTimeout(() => {
  console.log('Timeout');
}, 0);
Promise.resolve().then(() => {
  console.log('Promise');
});
console.log('End');
// Kết quả: Start, End, Promise, Timeout

Hiệu suất của ứng dụng phụ thuộc vào cách Event Loop quản lý và xử lý các tác vụ.

Các trường hợp thường gặp và lỗi phổ biến

Starvation (Đói khát):

Xảy ra khi Micro Task liên tục làm đầy Call Stack, ngăn không cho Macro Task thực thi.

Blocking (Chặn):

Xảy ra khi một tác vụ đồng bộ chiếm giữ Call Stack quá lâu, làm gián đoạn các tác vụ khác. Để tránh, hãy sử dụng các tác vụ bất đồng bộ.

Kết luận

Event Loop là một phần không thể thiếu trong JavaScript, giúp xử lý các tác vụ bất đồng bộ và tối ưu hóa hiệu suất của ứng dụng. Bằng cách nắm vững các khái niệm và cơ chế hoạt động của Event Loop, bạn có thể viết mã hiệu quả và xử lý tốt các tác vụ phức tạp trong các dự án thực tế. Hãy thử nghiệm và áp dụng kiến thức về Event Loop để nâng cao kỹ năng lập trình của bạn.

Tài liệu tham khảo

Mozilla Developer Network (MDN): Event Loop
Node.js Documentation: Event Loop
JavaScript.info: Event Loop

JavaScript

Event loop trong JavaScript