API nhân viên web
Web worker là một JavaScript chạy trong 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 tập lệnh trong một trang HTML, trang sẽ không phản hồi cho đến khi tập lệnh kết thúc.
Web worker là một JavaScript chạy trong 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 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 đủ cho Web worker:
| 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ụ dưới đây tạo một web worker đơn giản đếm số trong nền:
Thí dụ
Kiểm tra hỗ trợ 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ợ hay không:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Tạo 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 trong một 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à postMessage()phương thức - đượ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 tập lệnh đơn giản như vậy, mà cho các tác vụ đòi hỏi nhiều CPU hơn.
Tạo một đố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ừ một trang HTML.
Các dòng sau sẽ kiểm tra xem công nhân đã tồn tại hay chưa - nó tạo một đối tượng công nhân web mới và chạy mã trong "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Sau đó, chúng tôi 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 thông báo, mã trong trình xử lý 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 nhân viên web
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 tập lệnh bên ngoài kết thúc) cho đến khi kết thúc.
Để chấm dứt nhân viên web và tài nguyên máy tính / trình duyệt miễn phí, hãy sử dụng
terminate()phương pháp:
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 mã:
w = undefined;
Mã mẫu đầy đủ cho nhân viên web
Chúng tôi đã thấy mã Công nhân trong tệp .js. Dưới đây là mã cho trang HTML:
Thí 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>
Công nhân web và DOM
Vì nhân viên web ở trong các tệp bên ngoài, 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ẹ