Công nhân web là gì

Công nhân web là một tính năng của JavaScript cho phép chúng tôi thực thi các tập lệnh trong nền mà không chặn luồng chính. Điều này rất hữu ích khi chúng ta cần thực hiện các tác vụ chạy trong thời gian dài có khả năng làm đóng băng giao diện người dùng, chẳng hạn như tính toán phức tạp hoặc xử lý dữ liệu.

Công nhân web là các tệp JavaScript riêng biệt chạy trong các chuỗi riêng của chúng. Chúng được tạo bằng cách sử dụng Workerhàm tạo và chúng giao tiếp với luồng chính bằng các phương thức postMessage()và onmessage. Trong bài đăng trên blog này, chúng ta sẽ khám phá cách sử dụng web worker trong JavaScript bằng các ví dụ và ngữ cảnh dễ hiểu dành cho độc giả trên 18 tuổi.

Tạo một công nhân web

Để tạo web worker, chúng ta cần tạo một tệp JavaScript mới sẽ chạy ở chế độ nền. Ví dụ: hãy tạo một tệp có tên worker.jstính giai thừa của một số đã cho:

// worker.js

function calculateFactorial(n) {
  let result = 1;
  for (let i = 2; i <= n; i++) {
    result *= i;
  }
  return result;
}

onmessage = function(event) {
  const n = event.data;
  const result = calculateFactorial(n);
  postMessage(result);
};

Để sử dụng worker này trong tập lệnh chính của chúng ta, chúng ta cần tạo một phiên bản mới của Workerhàm tạo và chuyển cho nó đường dẫn đến tệp worker của chúng ta:

// index.js

const factorialWorker = new Worker('worker.js');

factorialWorker.postMessage(10);

factorialWorker.onmessage = function(event) {
  const result = event.data;
  console.log(`The factorial of 10 is ${result}`);
};

Lưu ý: Công nhân cần một dịch vụ được lưu trữ để chạy và không thể chạy dịch vụ này trong trang html bằng cách chỉ chạy “[fileName].html”. Để làm cho công nhân làm việc, cần thêm các câu lệnh nhập, phương thức cần được thay đổi

const customWorker = new Worker(
    new URL('./worker.js', import.meta.url),
    { type: 'module' }
);

Chạy đoạn mã trên sẽ xuất kết quả ra bàn điều khiển: “Giai thừa của 10 là 3628800”.

Hạn chế của Web Worker

Mặc dù web worker rất hữu ích để giảm tải các tác vụ tính toán nặng từ luồng chính, nhưng chúng có một số hạn chế. Ví dụ: nhân viên web không thể truy cập DOM hoặc bất kỳ API nào khác có sẵn cho luồng chính. Chúng cũng không thể chia sẻ bộ nhớ với luồng chính, điều đó có nghĩa là chúng ta cần sử dụng tính năng chuyển thông báo để liên lạc giữa hai luồng.

Ngoài ra, nhân viên web không được hỗ trợ trong một số trình duyệt cũ hơn . Trước khi sử dụng web worker trong ứng dụng của bạn, điều quan trọng là phải kiểm tra xem chúng có được hỗ trợ trong tất cả các trình duyệt mà bạn đang nhắm mục tiêu hay không.

Phần kết luận

Công nhân web là một tính năng mạnh mẽ của JavaScript cho phép chúng tôi thực hiện các tác vụ chạy dài trong nền mà không chặn luồng chính. Chúng rất dễ tạo và sử dụng, đồng thời có thể cải thiện đáng kể hiệu suất của các ứng dụng của chúng tôi. Tuy nhiên, nhân viên web có một số hạn chế và điều quan trọng là phải ghi nhớ những điều này khi sử dụng chúng trong ứng dụng của bạn.

Tôi hy vọng phần giới thiệu về nhân viên web này hữu ích và cung cấp nhiều thông tin cho độc giả trên toàn thế giới.