Web Worker API

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

Web Worker là gì?

Khi thực thi mã nguồn trong trang HTML, trang sẽ không phản hồi trước khi mã nguồn hoàn thành.

Web Worker là JavaScript chạy trong nền, tách biệt với các mã nguồn khác, sẽ 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 kỳ điều gì bạn muốn: nhấp chuột, chọn nội dung, v.v., trong khi web worker chạy trong nền.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn Web Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Tháng 1 năm 2010 Tháng 9 năm 2012 Tháng 6 năm 2009 Tháng 6 năm 2009 Tháng 6 năm 2011

Mô hình Web Worker

Ví dụ dưới đây tạo một Web Worker đơn giản, nó tính toán số trong nền

Mô hình

Tính số:

Thử ngay

Kiểm tra trình duyệt Web Worker

Trước khi tạo web worker, hãy kiểm tra trình duyệt người dùng có hỗ trợ nó không:

if (typeof(Worker) !== "undefined") {
  // Yes! Hỗ trợ Web worker!
  // Mã nguồn nào đó.....
}
  // Xin lỗi! Không hỗ trợ Web Worker..
}

Tạo tệp Web Worker

Bây giờ, hãy tạo Web Worker của chúng ta trong JavaScript bên ngoài.

Tại đây, chúng ta tạo một đoạn mã quan trọng. Đoạn mã này được lưu trữ trong tệp "demo_workers.js":

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

Phần quan trọng của đoạn mã trên là postMessage() Phương pháp - Sử dụng để gửi tin nhắn trở lại trang HTML.

Ghi chú:Thường thì web worker không được sử dụng cho các vân bản vẽ đơn giản này mà là cho các nhiệm vụ đòi hỏi CPU.

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ừ trang HTML.

Dưới đây là dòng mã kiểm tra xem worker có tồn tại hay không, nếu không tồn tại, nó sẽ tạo một đối tượng web worker mới và chạy mã trong tệp "demo_workers.js":

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

Sau đó, chúng ta có thể gửi và nhận tin nhắn 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 phát tin nhắn, mã trong bộ 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 Web Worker

Khi đối tượng web worker được tạo, nó sẽ tiếp tục lắng nghe tin nhắn (nếu không phải là khi vân bản vẽ bên ngoài hoàn thành) cho đến khi nó bị chấm dứt.

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

w.terminate();

Tái sử dụng Web Worker

Nếu đặt biến worker thành undefined, sau khi nó kết thúc, bạn có thể tái sử dụng mã sau:

w = undefined;

Mã ví dụ đầy đủ của Web Worker

Chúng ta đã thấy mã Worker trong tệp .js. Dưới đây là mã trang HTML:

Mô hình

<!DOCTYPE html>
<html>
<body>
<p>Đếm số: <output id="result"></output></p>
<button onclick="startWorker()">Bắt đầu công nhân</button>
<button onclick="stopWorker()">Dừng Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

Thử ngay

Web Worker và DOM

Do Web Worker nằm trong tệp外部, vì vậy chúng không thể truy cập các đối tượng JavaScript sau:

  • Đối tượng window
  • Đối tượng document
  • Đối tượng parent