M

MLOG

Tiếng Việt

Làm sáng tỏ Event Loop của JavaScript: Hướng dẫn toàn diện cho các nhà phát triển ở mọi cấp độ, bao gồm lập trình bất đồng bộ, tính đồng thời và tối ưu hóa hiệu suất.

Event Loop: Hiểu về JavaScript Bất Đồng Bộ

JavaScript, ngôn ngữ của web, được biết đến với bản chất động và khả năng tạo ra trải nghiệm người dùng tương tác và phản hồi nhanh. Tuy nhiên, về cốt lõi, JavaScript là đơn luồng, có nghĩa là nó chỉ có thể thực hiện một tác vụ tại một thời điểm. Điều này đặt ra một thách thức: làm thế nào JavaScript xử lý các tác vụ tốn thời gian, như tìm nạp dữ liệu từ máy chủ hoặc chờ đợi đầu vào của người dùng, mà không chặn việc thực hiện các tác vụ khác và làm cho ứng dụng không phản hồi? Câu trả lời nằm ở Event Loop, một khái niệm cơ bản để hiểu cách JavaScript bất đồng bộ hoạt động.

Event Loop là gì?

Event Loop là công cụ cung cấp sức mạnh cho hành vi bất đồng bộ của JavaScript. Đó là một cơ chế cho phép JavaScript xử lý nhiều hoạt động đồng thời, mặc dù nó là đơn luồng. Hãy nghĩ về nó như một bộ điều khiển giao thông quản lý luồng các tác vụ, đảm bảo rằng các hoạt động tốn thời gian không chặn luồng chính.

Các thành phần chính của Event Loop

Hãy minh họa điều này bằng một ví dụ đơn giản sử dụng `setTimeout`:

console.log('Start');

setTimeout(() => {
 console.log('Inside setTimeout');
}, 2000);

console.log('End');

Đây là cách mã thực thi:

  1. Câu lệnh `console.log('Start')` được thực thi và in ra bảng điều khiển.
  2. Hàm `setTimeout` được gọi. Đó là một hàm Web API. Hàm callback `() => { console.log('Inside setTimeout'); }` được chuyển đến hàm `setTimeout`, cùng với độ trễ 2000 mili giây (2 giây).
  3. `setTimeout` bắt đầu một bộ hẹn giờ và, quan trọng là, *không* chặn luồng chính. Callback không được thực thi ngay lập tức.
  4. Câu lệnh `console.log('End')` được thực thi và in ra bảng điều khiển.
  5. Sau 2 giây (hoặc hơn), bộ hẹn giờ trong `setTimeout` hết hạn.
  6. Hàm callback được đặt trong callback queue.
  7. Event Loop kiểm tra call stack. Nếu nó trống (có nghĩa là không có mã nào khác đang chạy), Event Loop sẽ lấy callback từ callback queue và đẩy nó vào call stack.
  8. Hàm callback thực thi và `console.log('Inside setTimeout')` được in ra bảng điều khiển.

Đầu ra sẽ là:

Start
End
Inside setTimeout

Lưu ý rằng 'End' được in *trước* 'Inside setTimeout', mặc dù 'Inside setTimeout' được định nghĩa trước 'End'. Điều này chứng minh hành vi bất đồng bộ: hàm `setTimeout` không chặn việc thực thi mã tiếp theo. Event Loop đảm bảo rằng hàm callback được thực thi *sau* độ trễ đã chỉ định và *khi call stack trống*.

Các kỹ thuật JavaScript bất đồng bộ

JavaScript cung cấp một số cách để xử lý các hoạt động bất đồng bộ:

Callbacks

Callbacks là cơ chế cơ bản nhất. Chúng là các hàm được truyền dưới dạng đối số cho các hàm khác và được thực thi khi một hoạt động bất đồng bộ hoàn thành. Mặc dù đơn giản, callbacks có thể dẫn đến "callback hell" hoặc "pyramid of doom" khi xử lý nhiều hoạt động bất đồng bộ lồng nhau.


function fetchData(url, callback) {
 fetch(url)
 .then(response => response.json())
 .then(data => callback(data))
 .catch(error => console.error('Error:', error));
}

fetchData('https://api.example.com/data', (data) => {
 console.log('Data received:', data);
});

Promises

Promises được giới thiệu để giải quyết vấn đề callback hell. Một Promise đại diện cho sự hoàn thành (hoặc thất bại) cuối cùng của một hoạt động bất đồng bộ và giá trị kết quả của nó. Promises làm cho mã bất đồng bộ dễ đọc và dễ quản lý hơn bằng cách sử dụng `.then()` để xâu chuỗi các hoạt động bất đồng bộ và `.catch()` để xử lý lỗi.


function fetchData(url) {
 return fetch(url)
 .then(response => response.json());
}

fetchData('https://api.example.com/data')
 .then(data => {
 console.log('Data received:', data);
 })
 .catch(error => {
 console.error('Error:', error);
 });

Async/Await

Async/Await là một cú pháp được xây dựng dựa trên Promises. Nó làm cho mã bất đồng bộ trông và hoạt động giống mã đồng bộ hơn, giúp mã này dễ đọc và dễ hiểu hơn. Từ khóa `async` được sử dụng để khai báo một hàm bất đồng bộ và từ khóa `await` được sử dụng để tạm dừng thực thi cho đến khi một Promise được giải quyết. Điều này làm cho mã bất đồng bộ cảm thấy tuần tự hơn, tránh lồng sâu và cải thiện khả năng đọc.


async function fetchData(url) {
 try {
 const response = await fetch(url);
 const data = await response.json();
 console.log('Data received:', data);
 } catch (error) {
 console.error('Error:', error);
 }
}

fetchData('https://api.example.com/data');

Tính đồng thời so với Tính song song

Điều quan trọng là phải phân biệt giữa tính đồng thời và tính song song. Event Loop của JavaScript cho phép tính đồng thời, có nghĩa là xử lý nhiều tác vụ *có vẻ* cùng một lúc. Tuy nhiên, JavaScript, trong môi trường đơn luồng của trình duyệt hoặc Node.js, thường thực thi các tác vụ từng cái một (từng cái một) trên luồng chính. Mặt khác, tính song song có nghĩa là thực hiện nhiều tác vụ *đồng thời*. JavaScript một mình không cung cấp tính song song thực sự, nhưng các kỹ thuật như Web Workers (trong trình duyệt) và mô-đun `worker_threads` (trong Node.js) cho phép thực thi song song bằng cách sử dụng các luồng riêng biệt. Sử dụng Web Workers có thể được sử dụng để giảm tải các tác vụ tính toán chuyên sâu, ngăn chúng chặn luồng chính và cải thiện khả năng phản hồi của các ứng dụng web, điều này có liên quan đến người dùng trên toàn cầu.

Các ví dụ và cân nhắc trong thế giới thực

Event Loop rất quan trọng trong nhiều khía cạnh của phát triển web và phát triển Node.js:

Tối ưu hóa hiệu suất và các phương pháp hay nhất

Hiểu Event Loop là điều cần thiết để viết mã JavaScript hiệu suất cao:

Các cân nhắc toàn cầu

Khi phát triển ứng dụng cho đối tượng toàn cầu, hãy xem xét những điều sau:

Kết luận

Event Loop là một khái niệm cơ bản để hiểu và viết mã JavaScript bất đồng bộ hiệu quả. Bằng cách hiểu cách nó hoạt động, bạn có thể xây dựng các ứng dụng phản hồi nhanh và hiệu suất cao, xử lý nhiều hoạt động đồng thời mà không chặn luồng chính. Cho dù bạn đang xây dựng một ứng dụng web đơn giản hay một máy chủ Node.js phức tạp, việc nắm vững Event Loop là điều cần thiết đối với bất kỳ nhà phát triển JavaScript nào đang cố gắng mang lại trải nghiệm người dùng mượt mà và hấp dẫn cho đối tượng toàn cầu.

Event Loop: Hiểu về JavaScript Bất Đồng Bộ | MLOG