Xử lý song song trong JavaScript với Web Workers API

Trong lập trình web hiện đại, trải nghiệm người dùng mượt mà là yếu tố then chốt. Tuy nhiên, JavaScript truyền thống chỉ hoạt động trên một luồng đơn (single-threaded), nghĩa là mọi thao tác – từ xử lý sự kiện, cập nhật giao diện, đến thực hiện tính toán – đều diễn ra trên cùng một dòng thực thi. Khi gặp phải các tác vụ nặng như tính toán phức tạp, xử lý file lớn hay xử lý hình ảnh, trình duyệt có thể bị "đóng băng", gây ảnh hưởng xấu đến trải nghiệm người dùng.

Để giải quyết hạn chế này, Web Workers API ra đời như một giải pháp hiệu quả cho việc xử lý song song trong JavaScript. Nhờ đó, các tác vụ nặng có thể được chuyển sang các luồng riêng biệt, giúp giữ cho luồng chính luôn phản hồi nhanh và mượt mà. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về Web Workers API, cách sử dụng, ưu nhược điểm và các ví dụ thực tế để hiểu rõ hơn về sức mạnh của xử lý song song trong JavaScript.

Khái niệm về Web Workers API trong JavaScript

Web Workers là gì?

Web Workers là một API được trình duyệt cung cấp, cho phép JavaScript chạy các đoạn mã trong các luồng riêng biệt, tách biệt hoàn toàn với luồng chính (main thread) – nơi xử lý giao diện người dùng và tương tác. Điều này có nghĩa là các tác vụ nặng như xử lý dữ liệu lớn, tính toán phức tạp hoặc phân tích file có thể được chuyển sang Web Worker để xử lý, giúp tránh tình trạng trình duyệt bị đơ, phản hồi chậm hoặc treo.

Ví dụ, nếu bạn đang xử lý một tập dữ liệu lớn ngay trong main thread, trình duyệt có thể bị "đóng băng" trong vài giây, khiến người dùng không thể bấm nút hay cuộn trang. Web Workers giúp giải quyết vấn đề này bằng cách đưa toàn bộ công việc sang luồng phụ, giữ cho giao diện người dùng vẫn mượt mà, trơn tru.

Cơ chế hoạt động của Web Workers

Web Worker hoạt động trên một nguyên tắc cơ bản: độc lập hoàn toàn với main thread. Điều này có một số đặc điểm đáng chú ý:

• Luồng độc lập: Mỗi Web Worker chạy trong một thread riêng biệt, không chia sẻ bộ nhớ trực tiếp với main thread.

• Không truy cập DOM: Worker không thể truy cập trực tiếp vào DOM hoặc các hàm tương tác với giao diện (như document, window, hoặc alert()), giúp tránh xung đột.

Giao tiếp bằng thông điệp: Main thread và Worker giao tiếp với nhau thông qua cơ chế gửi/nhận thông điệp:

• Main thread gửi dữ liệu vào Worker bằng:

worker.postMessage(data);

Worker nhận dữ liệu bằng sự kiện onmessage:

self.onmessage = function(event) {
  // xử lý dữ liệu từ main thread
};

Từ phía Worker, cũng có thể gửi kết quả ngược lại về main thread:

postMessage(result);

Main thread nhận dữ liệu phản hồi thông qua:

worker.onmessage = function(event) {
  // xử lý kết quả trả về
};

Web Workers tạo ra một môi trường an toàn và tách biệt để xử lý các tác vụ phức tạp, giúp ứng dụng web hoạt động mượt mà, thân thiện hơn với người dùng – đặc biệt là trong các ứng dụng cần hiệu suất cao như xử lý dữ liệu lớn, AI, đồ họa, phân tích video/audio...

Tạo và sử dụng Web Workers trong JavaScript

Để sử dụng Web Workers trong JavaScript, bạn cần tách phần xử lý nặng ra khỏi main thread và đưa vào một file riêng, gọi là worker script. Quá trình triển khai gồm 4 bước chính: tạo file worker, khởi tạo worker, giao tiếp hai chiều và kết thúc worker khi không cần thiết.

Tạo file worker

Bạn cần viết phần mã sẽ được thực thi trong worker vào một file JavaScript riêng biệt, ví dụ như worker.js.

Ví dụ – worker.js:

// Nhận dữ liệu từ main thread
self.onmessage = function(event) {
  const number = event.data;
  const result = number * 2; // xử lý đơn giản
  self.postMessage(result); // Gửi kết quả về lại main thread
};

Lưu ý: Trong worker không thể truy cập document, window, hay các hàm thao tác giao diện.

Khởi tạo Web Worker từ main thread

Từ file chính (ví dụ: main.js hoặc <script> trong HTML), bạn tạo một Web Worker bằng cách sử dụng constructor new Worker("worker.js").

Ví dụ – main.js:

const worker = new Worker("worker.js");

Worker này sẽ chạy độc lập, thực thi mã được viết trong worker.js.

Giao tiếp giữa worker và main thread

Web Worker sử dụng mô hình gửi và nhận thông điệp để trao đổi dữ liệu:

• Gửi dữ liệu từ main thread sang worker:

worker.postMessage(10); // Gửi số 10 cho worker xử lý

Nhận kết quả từ worker về main thread:

worker.onmessage = function(event) {
  console.log("Kết quả nhận được từ worker:", event.data);
};

Tương ứng, trong file worker.js:

self.onmessage = function(event) {
  const input = event.data;
  const output = input * 2;
  self.postMessage(output); // gửi dữ liệu ngược lại
};

Giao tiếp sử dụng postMessage() (để gửi) và onmessage (để nhận), tương tự cho cả hai phía.

Kết thúc Web Worker

Khi không cần dùng nữa, bạn nên dừng Worker để giải phóng tài nguyên:

Từ main thread: Dùng terminate() để kết thúc worker từ bên ngoài.

worker.terminate(); // worker ngừng hoạt động

Từ bên trong worker: Dùng self.close() để tự kết thúc.

self.close(); // worker tự kết thúc sau khi xong việc

const data = { name: "Alice" };
worker.postMessage(data); // Gửi bản sao, không phải tham chiếu

// Trong worker.js
self.onmessage = function(e) {
  const result = heavyCalculation(e.data);
  self.postMessage(result);
};

self.onmessage = function(e) {
  const number = e.data;
  const square = number * number;
  self.postMessage(square);
};

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

worker.postMessage(5); // Gửi số cần tính bình phương

worker.onmessage = function(e) {
  console.log('Kết quả bình phương:', e.data); // Kết quả: 25
};

self.onmessage = function(e) {
  const jsonData = JSON.parse(e.data);
  const result = jsonData.filter(item => item.active === true);
  self.postMessage(result);
};

fetch('data.json')
  .then(res => res.text())
  .then(jsonStr => {
    const worker = new Worker('jsonWorker.js');
    worker.postMessage(jsonStr);

    worker.onmessage = function(e) {
      console.log('Kết quả lọc:', e.data);
    };
  });

setInterval(() => {
  const now = new Date().toLocaleTimeString();
  postMessage(now);
}, 1000);

const worker = new Worker('clockWorker.js');
worker.onmessage = function(e) {
  document.getElementById('clock').innerText = e.data;
};