HTML Web Workers API
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 |
---|---|---|---|---|---|
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:
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:
Bạn nên đọc
Cũ vẫn chất
-
Căn bậc 2, cách tính căn bậc 2
Hôm qua -
Cách đổi công cụ tìm kiếm trên Safari
Hôm qua -
Hướng dẫn cách chơi, lên đồ Natalya mùa S1 2023
Hôm qua -
Hướng dẫn chơi Rung Cây vàng Trúng Cây vàng trên My Viettel
Hôm qua -
Cách dọn dẹp và khôi phục không gian trên ổ C Windows
Hôm qua -
Tổng hợp cách tạo mật khẩu mạnh và quản lý mật khẩu an toàn nhất
Hôm qua -
15 cách chỉnh độ sáng màn hình máy tính, laptop
Hôm qua -
Bitcoin là gì? Tại sao Bitcoin không phải là "tiền ảo"?
Hôm qua -
Cách tạo brush tùy chỉnh trong Photoshop
Hôm qua -
Tổng hợp câu hỏi Nhanh như chớp mùa 2
Hôm qua