Web Worker là gì?
Khi thực thi các đoạn mã trong một trang HTML, trang trở nên không phản ứng cho đến khi đoạn mã hoàn thành.
Một web worker là một đoạn mã JavaScript chạy trong nền, độc lập với các đoạn mã khác, mà không ảnh hưởng đến hiệu suất của trang. Bạn có thể tiếp tục thực hiện bất kỳ thứ gì bạn muốn: nhấp chuột, chọn đối tượng, v.v., trong khi web worker chạy ở nền.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Web Workers.
| API | Chrome | Edge | FireFox | Safari | Opera |
| Web worker | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Kiểm tra Hỗ trợ Web Worker
Trước khi tạo một web worker, hãy kiểm tra xem trình duyệt của người dùng có hỗ trợ hay không:
if (typeof(Worker) !== "undefined") { // Có! Hỗ trợ web worker! // Một số mã....} else { // Xin lỗi! Không hỗ trợ Web Worker.}Tạo Một File Web Worker
Bây giờ, hãy tạo web worker của chúng ta trong một tệp JavaScript bên ngoài.
Ở đây, chúng ta tạo một đoạn mã đếm. Đoạn mã được lưu trữ trong tệp "demo_workers.js":
var i = 0;function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500);}timedCount();Phần quan trọng của mã trên là phương thức postMessage() - được sử dụng để gửi một thông điệp trở lại trang HTML.
Lưu ý: Thông thường, web workers không được sử dụng cho những đoạn mã đơn giản như vậy, mà thay vào đó được sử dụng cho các nhiệm vụ yêu cầu nhiều CPU hơn.
Tạo Đối Tượng Web Worker
Bây giờ chúng ta đã có tệp web worker, chúng ta cần gọi nó từ một trang HTML.
Các dòng sau kiểm tra xem worker đã tồn tại chưa, nếu chưa - nó tạo một đối tượng web worker mới và chạy mã trong "demo_workers.js":
if (typeof(w) == "undefined") { w = new Worker("demo_workers.js");}Sau đó, chúng ta có thể gửi và nhận thông điệp từ web worker.
Thêm một bộ lắng nghe sự kiện "onmessage" cho web worker.
w.onmessage = function(event){ document.getElementById("result").innerHTML = event.data;};Khi web worker gửi một thông điệp, mã trong bộ lắng nghe sự kiện được thực thi. Dữ liệu từ web worker được lưu trữ trong event.data.
Chấm Dứt Một Web Worker
Khi một đối tượng web worker được tạo, nó sẽ tiếp tục lắng nghe các thông điệp (ngay cả sau khi đoạn mã bên ngoài đã hoàn thành) cho đến khi nó bị chấm dứt.
Để chấm dứt một web worker và giải phóng tài nguyên trình duyệt/máy tính, sử dụng phương thức terminate():
w.terminate();Tái Sử Dụng Web Worker
Nếu bạn đặt biến worker thành undefined, sau khi nó đã bị chấm dứt, bạn có thể tái sử dụng mã:
w = undefined;Mã Ví dụ Đầy Đủ về Web Worker
Chúng ta đã xem mã Worker trong tệp .js. Dưới đây là mã cho trang HTML:
<!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> var w; function startWorker() { if (typeof(Worker) !== "undefined") { if (typeof(w) == "undefined") { w = new Worker("demo_workers.js" ); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Xin lỗi! Không hỗ trợ Web Worker."; } }}function stopWorker() { w.terminate(); w = undefined;} </script> </body></html>Web Workers và DOM
Do web workers ở trong các tệp bên ngoài, chúng không có quyền truy cập vào các đối tượng JavaScript sau:
- Đối tượng window
- Đối tượng document
- Đối tượng parent