JavaScript - Worker API: Khai thác Sức mạnh Xử lý song song

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của Web Workers. Hãy tưởng tượng bạn là một đầu bếp trong một nhà bếp bận rộn. Đôi khi, bạn cần thêm đôi tay để giúp bạn chuẩn bị một bữa ăn phức tạp. Đó chính xác là điều mà Web Workers làm cho mã JavaScript của bạn - chúng cho bạn một đôi tay giúp đỡ để xử lý các nhiệm vụ nặng nề mà không làm chậm quá trình nấu nướng... tức là, quá trình lập mã của bạn!

JavaScript - Worker API

Web Worker API: Đầu bếp Phụ của JavaScript

Web Worker API giống như có một đầu bếp phụ trong nhà bếp JavaScript của bạn. Nó cho phép bạn chạy các script trong nền, độc lập với các script khác. Điều này có nghĩa là bạn có thể thực hiện các nhiệm vụ tốn thời gian mà không làm gián đoạn hiệu suất của trang chính. Đ Cooler, phải không?

Hãy cùng lặn sâu và xem chúng ta có thể sử dụng những người giúp đỡ này như thế nào!

Kiểm tra Hỗ trợ Web Worker

Trước khi chúng ta bắt đầu sử dụng Web Workers, chúng ta cần chắc chắn rằng trình duyệt của chúng ta hỗ trợ chúng. Điều này giống như kiểm tra xem nhà bếp của bạn có đúng thiết bị trước khi bạn bắt đầu nấu ăn. Dưới đây là cách chúng ta làm:

if (typeof(Worker) !== "undefined") {
// Tuyệt vời! Web Workers được hỗ trợ
console.log("Hãy bắt đầu làm việc!");
} else {
// Ồ! Web Workers không được hỗ trợ
console.log("Xin lỗi, trình duyệt của bạn không hỗ trợ Web Workers");
}

Trong đoạn mã này, chúng ta đang kiểm tra xem đối tượng Worker có được định nghĩa hay không. Nếu có, chúng ta có thể bắt đầu. Nếu không, chúng ta sẽ cần tìm một cách khác để xử lý các nhiệm vụ của mình.

Tạo một Tệp Web Worker

Bây giờ chúng ta biết rằng trình duyệt của chúng ta có thể xử lý Web Workers, hãy tạo một! Một Web Worker giống như một công thức mà đầu bếp phụ của chúng ta (trình duyệt) sẽ theo dõi. Chúng ta sẽ tạo một tệp JavaScript riêng biệt cho Web Worker của mình.

Hãy tạo một tệp叫做 worker.js:

// worker.js
self.addEventListener('message', function(e) {
const result = e.data * 2;
self.postMessage(result);
}, false);

Worker này lắng nghe một tin nhắn, nhân đôi số nó nhận được, và gửi kết quả trở lại. Đơn giản, phải không?

Tạo một Đối tượng Web Worker

Bây giờ chúng ta đã có tệp worker của mình, hãy tạo một đối tượng Web Worker trong script chính của chúng ta:

let myWorker;

if (typeof(Worker) !== "undefined") {
myWorker = new Worker("worker.js");
} else {
console.log("Web Workers không được hỗ trợ trong trình duyệt của bạn!");
}

Đoạn mã này tạo một đối tượng Web Worker mới, chỉ đến tệp worker.js của chúng ta. Điều này giống như thuê đầu bếp phụ và đưa công thức của bạn cho họ.

Giao tiếp với Web Worker của Chúng ta

Bây giờ, hãy xem chúng ta có thể gửi một nhiệm vụ đến worker và nhận kết quả trở lại như thế nào:

// Gửi dữ liệu đến worker
myWorker.postMessage(10);

// Nhận dữ liệu từ worker
myWorker.onmessage = function(e) {
console.log("Worker đã gửi lại: " + e.data);
};

Trong ví dụ này, chúng ta gửi số 10 đến worker. Worker nhân đôi nó và gửi lại 20. Điều này giống như yêu cầu đầu bếp phụ nhân đôi nguyên liệu của một công thức!

Kết thúc Thực thi của Web Worker

Khi chúng ta đã hoàn thành với Web Worker, chúng ta nên sa thải nó để giải phóng tài nguyên. Điều này giống như bảo đầu bếp phụ có thể về nhà sau khi bữa ăn đã được chuẩn bị:

myWorker.terminate();
myWorker = undefined;

Đoạn mã này kết thúc worker và đặt biến myWorker thành undefined, loại bỏ sự tham chiếu của chúng ta đến nó.

Ví dụ: Chương Trình Hoàn chỉnh của Web Worker

Hãy đặt tất cả lại với nhau trong một ví dụ hoàn chỉnh:

<!DOCTYPE html>
<html>
<body>

<p>Đếm số: <output id="result"></output></p>
<button onclick="startWorker()">Bắt đầu Worker</button>
<button onclick="stopWorker()">Dừng Worker</button>

<script>
let w;

function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("worker.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Xin lỗi! Không có hỗ trợ Web Worker.";
}
}

function stopWorker() {
w.terminate();
w = undefined;
}
</script>

</body>
</html>

Và đây là worker.js của chúng ta:

let i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

Ví dụ này tạo một worker đếm số, cập nhật mỗi nửa giây. Trang chính có thể bắt đầu và dừng worker, minh họa cách chúng ta có thể kiểm soát "đầu bếp phụ" từ "nhà bếp" chính.

Các Trường Hợp Sử Dụng Web Worker

Web Workers rất hữu ích cho các nhiệm vụ có thể mất rất nhiều thời gian để hoàn thành. Dưới đây là một số trường hợp sử dụng phổ biến:

Các phép toán phức tạp
Xử lý dữ liệu lớn
Xử lý hình ảnh hoặc video
Hoạt động mạng
Phân tích các tập dữ liệu lớn (như các tệp CSV)

Hãy tưởng tượng những công thức phức tạp mà đầu bếp phụ của bạn có thể làm mà không làm gián đoạn quá trình nấu chính của bạn!

Web Workers và DOM

Một điều quan trọng cần nhớ: Web Workers không thể truy cập trực tiếp vào DOM (Document Object Model). Điều này giống như đầu bếp phụ của bạn không thể trực tiếp phục vụ món ăn cho khách hàng - họ cần phải giao món ăn đã准备好 cho bạn trước.

Nếu một Worker cần tương tác với trang web, nó phải gửi một tin nhắn đến script chính, sau đó script chính có thể cập nhật DOM.

Kết Luận

Web Workers là một công cụ mạnh mẽ trong bộ công cụ JavaScript của bạn. Chúng cho phép bạn thực hiện các nhiệm vụ phức tạp mà không làm chậm script chính của bạn, giống như cách một đầu bếp phụ giúp bạn chuẩn bị một bữa ăn phức tạp một cách hiệu quả hơn.

Nhớ rằng, chìa khóa để sử dụng Web Workers hiệu quả là xác định các nhiệm vụ có thể chạy độc lập với script chính. Với sự gyak, bạn sẽ có thể chỉ huy một nhà bếp đầy đủ các Web Workers, tạo ra các ứng dụng web nhanh chóng, mượt mà và có thể xử lý các nhiệm vụ phức tạp một cách dễ dàng.

Chúc các bạn lập mã vui vẻ, và mong rằng nhà bếp JavaScript của bạn luôn đầy ắp những Web Workers hiệu quả!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - Forms API

Hướng Dẫn Tiếp Theo:

JavaScript - API Fetch