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
-
Tổng hợp code Đấu Trường Nhẫn Giả mới nhất
Hôm qua -
3 cách đơn giản để reset thiết lập BIOS
Hôm qua -
Cách xóa vật thể trong ảnh tự động
Hôm qua -
Cách mở và chạy cmd với quyền Admin trên Windows
Hôm qua -
Code Rise Of Kingdoms mới nhất 10/2024
Hôm qua -
Cách chèn dấu tích vào trong Word
Hôm qua -
Cách hạn chế bạn bè trên Facebook xem bài đăng của bạn
Hôm qua -
Si tình là gì? Si tình khác lụy tình như thế nào?
Hôm qua -
Cách xem những người bạn đã chặn (block) trên Facebook
Hôm qua -
Hướng dẫn tạo sự kiện trên Facebook
Hôm qua