Web Workers trong HTML5
Một web worker là JavaScript chạy ẩn, không ảnh hưởng đến hiệu suất của trang. Web Workers là gì? Khi thực hiện các tập lệnh trong một trang HTML, trang sẽ không hồi đáp cho đến khi script kết thúc. Web worker là một JavaScript chạy ở chế độ nền, độc lập với ...
Một web worker là JavaScript chạy ẩn, không ảnh hưởng đến hiệu suất của trang.
Web Workers là gì?
Khi thực hiện các tập lệnh trong một trang HTML, trang sẽ không hồi đáp cho đến khi script kết thúc.
Web worker là một JavaScript chạy ở chế độ nền, độc lập với các kịch bản 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 những thứ, v.v. trong khi web worker chạy ẩn.
Trình duyệt hỗ trợ
Các số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Web Workers.
Ví dụ HTML Web Workers
Ví dụ dưới đây tạo ra một Web Workers đơn giản đếm số trong nền:
<!DOCTYPE html>
<html>
<body><p>Count numbers: <output id=”result”></output></p>
<button onclick=”startWorker()”>Start Worker</button>
<button onclick=”stopWorker()”>Stop Worker</button><p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>
<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, your browser does not support Web Workers…”;
}
}function stopWorker() {
w.terminate();
w = undefined;
}
</script></body>
</html>
Kiểm tra Web Worker hỗ trợ
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ợ không:
if (typeof(Worker) !== “undefined”) {
// Yes! Web worker support!
// Some code…..
} else {
// Sorry! No Web Worker support..
}
Tạo một thư mục Web Worker
Bây giờ, hãy tạo web worker trong một JavaScript bên ngoài. Ở đây, chúng ta tạo ra một kịch bản đếm. Tập lệnh được lưu trữ trong tệp “demo_workers.js”:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout(“timedCount()”,500);
}timedCount();
Phần quan trọng của mã ở trên là phương thức postMessage () – được sử dụng để gửi một tin nhắn trở lại trang HTML.
Lưu ý: thông thường các web worker không được sử dụng cho scripts đơn giản như vậy, nhưng đối với các nhiệm vụ đòi hỏi nhiều CPU hơn.
Tạo đối tượng Web Worker
Bây giờ có tệp công cụ web, chúng ta cần phải gọi nó từ một trang HTML. Các dòng sau kiểm tra nếu web worker đó đã tồn tại, nếu không – 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 đó, bạn có thể gửi và nhận tin nhắn từ web worker. Thêm một trình lắng nghe sự kiện “onmessage” cho web worker.
w.onmessage = function(event){
document.getElementById(“result”).innerHTML = event.data;
};
Khi web worker gửi bài viết, mã trong trình lắng nghe sự kiện sẽ được thực hiện. 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 ra, nó sẽ tiếp tục lắng nghe các tin nhắn (ngay cả sau khi script bên ngoài kết thúc) cho đến khi nó được chấm dứt.
Để kết thúc một web worker, và tài nguyên trình duyệt / máy tính miễn phí, sử dụng phương thức chấm dứt ():
w.terminate();
Tái sử dụng Web Worker
Nếu bạn đặt biến worker thành undefined, sau khi nó đã được chấm dứt, bạn có thể sử dụng lại mã:
w = undefined;
Ví dụ đầy đủ về mã Web Worker
Bạn đã thấy mã Worker trong tệp .js. Dưới đây là mã 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 Workers và DOM
Vì các web worker nằm trong các tệp bên ngoài nên nó không có quyền truy cập vào các đối tượng JavaScript sau:
- Đối tượng window
- Đối tượng document
- Đối tượng parent
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
