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
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:


Cũ vẫn chất
-
Hàm COUNTIFS, cách dùng hàm đếm ô theo nhiều điều kiện trong Excel
Hôm qua -
Cách chặn từ khóa và Hashtag trên Twitter
Hôm qua -
Cách sao chép hoặc tạo bản sao toàn bộ trang tính trong Google Sheets
Hôm qua -
Cách dùng Terabox lưu trữ với 1TB miễn phí
Hôm qua 5 -
Cách sửa lỗi không thấy bộ điều hợp mạng trên Windows 10
Hôm qua -
Cách đặt độ phân giải tùy chỉnh trong OBS
Hôm qua -
Sạc không dây là gì? Nó nhanh hơn hay chậm hơn sạc dây? Danh sách smartphone Android hỗ trợ sạc không dây
Hôm qua -
Valentine đen là gì? Valentine đen là ngày nào?
Hôm qua -
4 cách kiểm tra lịch sử giao dịch BIDV trên điện thoại, máy tính
Hôm qua -
Điều hòa không mát? Nguyên nhân và cách khắc phục
Hôm qua