Web Worker là gì?
Khi thực thi một scripts trong trang HTML thì trang sẽ không thực hiện giao tiếp với server cho đến khi script hoàn thành.
Một web worker là một JavaScript chạy dưới nền Web, độc lập với các script khác và không làm ảnh hưởng đến hiệu suất của trang. Bạn có thể làm mọi thứ như click chuột, quét chọn,…. trong khi web worker đang chạy.
Các trình duyệt hỗ trợ
Web worker được hỗ trợ bởi hầu hết các trình duyệt, ngoại trừ Internet Explorer.
Ví dụ minh họa HTML5 Web Workers
Ví dụ dưới đây tạo ra một web worker đơn giản nhảy số tăng dần
LINK DEMO
Kiểm tra trình duyệt có hỗ trợ Web Worker
Trước khi tạo ra một web worker, ta phải kiểm tra xem trình duyệt đang dùng có hỗ trợ không:
if(typeof(Worker)!=="undefined")
{
// Có hỗ trợ
// Viết code.....
}
else
{
// Xin lỗi! không hỗ trợ rồi..
}
Tạo ra một file Web Worker
Chúng ta tạo ra một script đếm. Script được viết 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 chính là phương thức postMessage(), nó dùng để gửi thông tin đến trang HTML.
Tạo ra một đối tượng Web Worker
Chúng ta đã có một file web worker, giờ ta cần gọi nó từ trang HTML.
Đoạn code sau kiểm tra worker có hay chưa, nếu chưa, tạo web worker mới và chạy code trong “demo_workers.js“:
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
Sau đó bạn có thể gửi và nhận thông tin từ web worker.
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
Khi web worker trả cho ta thông tin, đoạn code trong sự kiện được thực thi. Dữ liệu từ web worker gửi đến được lưu trong event.data.
Hủy Web Worker
Khi đối tượng web worker được tạo ra, nó sẽ tiếp tục hoạt động cho tới khi ta dùng phương thức terminate() để hủy nó:
w.terminate();
Ví dụ Web Worker hoàn chỉnh
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<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();
}
</script>
</body>
</html>
Theo khoapham.vn