API công nhân web
Web Worker là một JavaScript chạy ở chế độ nền mà không ảnh hưởng đến hiệu suất của trang.
Nhân viên web là gì?
Khi thực thi tập lệnh trong trang HTML, trang sẽ không phản hồi cho đến khi tập lệnh hoàn tất.
Web Worker là một JavaScript chạy ở chế độ nền, độc lập với các tập lệnh 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 mọi thứ, v.v. trong khi nhân viên web chạy ở chế độ nền.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định các phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Web Workers:
| Chrome 4 | IE 10 | Firefox 3.5 | Safari 4 | Opera 11.5 |
| Jan 2010 | Sep 2012 | Jun 2009 | Jun 2009 | Jun 2011 |
Ví dụ về nhân viên web
Ví dụ bên dưới tạo một webworker đơn giản đếm số ở chế độ nền:
Kiểm tra hỗ trợ của nhân viên web
Trước khi tạo nhân viên web, hãy kiểm tra xem trình duyệt của người dùng có hỗ trợ nó hay không:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Tạo một tệp công nhân web
Bây giờ, hãy tạo nhân viên web của chúng tôi bằng JavaScript bên ngoài.
Ở đây, chúng tôi tạo một tập lệnh có giá trị. Tập lệnh đượ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à phương thức postMessage() - được sử dụng để gửi thông báo trở lại trang HTML.
Lưu ý: Thông thường, nhân viên web không được sử dụng cho các tập lệnh đơn giản như vậy mà dành cho các tác vụ đòi hỏi nhiều CPU hơn.
Tạo một đối tượng công nhân web
Bây giờ chúng ta đã có tệp web worker, chúng ta cần gọi nó từ một trang HTML.
Các dòng sau đây kiểm tra xem trình chạy đã tồn tại chưa, nếu chưa - nó sẽ tạo một đối tượng trình chạy web mới và chạy mã trong "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ừ nhân viên web.
Thêm trình xử lý sự kiện "onmessage" vào nhân viên web.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Khi nhân viên web đăng một tin nhắn, mã trong trình xử lý sự kiện sẽ được thực thi. Dữ liệu từ nhân viên web được lưu trữ trong event.data.
Chấm dứt một nhân viên web
Khi một đối tượng webworker được tạo, nó sẽ tiếp tục lắng nghe tin nhắn (ngay cả sau khi tập lệnh bên ngoài kết thúc) cho đến khi kết thúc.
Để chấm dứt một nhân viên web và giải phóng tài nguyên máy tính/trình duyệt, hãy sử dụng phương thức terminate() :
w.terminate();Tái sử dụng Web Worker
Nếu bạn đặt biến worker thành không xác định, sau khi biến này bị chấm dứt, bạn có thể sử dụng lại mã:
w = undefined;Mã ví dụ đầy đủ về nhân viên web
Chúng ta đã thấy mã Worker trong tệp .js. Dưới đây là mã cho trang HTML:
Ví dụ
<!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>
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> Hãy tự mình thử »Công nhân web và DOM
Vì nhân viên web nằm trong các tệp bên ngoài nên họ không có quyền truy cập vào các đối tượng JavaScript sau:
- Đối tượng cửa sổ
- Đối tượng tài liệu
- Đối tượng cha mẹ
