HTML Web Workers API

Hà Nguyễn

Web Worker là một JavaScript chạy ở chế độ nền, không ảnh hưởng đến hiệu suất của trang.

Web Worker là gì?

Khi thực thi các script trong một trang HTML, trang sẽ không phản hồi cho đến khi script kết thúc.

Web Worker là một JavaScript chạy trong nền, độc lập với các script khác, mà không ảnh hưởng đến hiệu suất của trang. Bạn có thể tiếp tục làm bất cứ điều gì bạn muốn: Nhấp chuột, chọn thứ, v.v..., trong khi Web Worker chạy ở chế độ 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 đủ cho Web Worker.

API Web Workers	Google Chrome	MS Edge	Firefox	Safari	Opera
API Web Workers	4.0	10.0	3.5	4.0	11.5

Ví dụ về HTML Web Workers

Ví dụ dưới đây tạo một web worker đơn giản đếm số trong nền:

Count numbers:

Kiểm tra hỗ trợ Web Worker

Trước khi tạo 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") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

Tạo file Web Worker

Bây giờ, hãy tạo web worker trong một JavaScript bên ngoài.

Ở đây, bài viết tạo một script có giá trị. Script được lưu trữ trong file "demo_workers.js":

var i = 0;

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

timedCount();

Phần quan trọng của đoạn code trên là phương thức postMessage() - được sử dụng để đăng thông báo trở lại trang HTML.

Lưu ý: Thông thường web worker không được sử dụng cho các script đơn giản như vậy mà cho những tác vụ đòi hỏi nhiều CPU hơn.

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

Bây giờ, ta đã có file web worker. Tiếp theo, cần gọi nó từ một trang HTML.

Các dòng sau sẽ kiểm tra xem worker đã tồn tại hay chưa - nó tạo một đối tượng web worker mới và chạy code trong "demo_workers.js":

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

Sau đó, ta có thể gửi và nhận tin nhắn từ web worker.

Thêm trình lắng nghe sự kiện "onmessage" vào web worker.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

Khi web worker đăng một thông báo, code trong trình lắng nghe sự kiện sẽ đượ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 báo (ngay cả sau khi script bên ngoài chấm dứt) cho đến khi kết thúc.

Để chấm dứt web worker và các tài nguyên máy tính/trình duyệt miễn phí, hãy sử dụng phương thức terminate():

w.terminate();

Sử dụng lại Web Worker

Nếu bạn đặt biến worker thành không xác định, sau khi biến đó bị chấm dứt, bạn có thể sử dụng lại code:

w = undefined;

Code mẫu đầy đủ cho web worker

Code Worker đã xuất hiện trong file .js. Dưới đây là code cho trang HTML:

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop 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 = "Sorry! No Web Worker support.";
  }
}

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

</body>
</html>

Web Worker và DOM

Vì các web worker ở trong các file bên ngoài, nên chúng không có quyền truy cập vào những đối tượng JavaScript sau:

Đối tượng cửa sổ
Đối tượng tài liệu
Đối tượng cha

Xem thêm:

Thứ Hai, 02/05/2022 13:07

5 ★ 13 👨 531

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!