Thông qua bài bạn sẽ biết Web Worker là gì? Tại sao sử dụng Web Worker? Ví dụ và cách hoạt động của Web Worker trong HTML5.

Web Worker trong HTML5

« Bài Trước Bài Tiếp »

Web worker là một đoạn mã JavaScript chạy ngầm, không ảnh hưởng tới hiệu suất, tốc độ truy cập của trang.

Web Worker là gì?

Bình thường, khi bạn chạy một đoạn mã JavaScript trong trang HTML, trang sẽ không phản hồi bất kỳ thao tác nào của bạn cho tới khi đoạn mã chạy xong.

Web worker là một đoạn mã JavaScript chạy ngầm, độc lập với các đoạn mã khác, hoàn toàn không làm ảnh hưởng tới hiệu suất của trang. Trong khi web worker đang chạy ngầm, bạn có thể làm bất kỳ điều gì bạn muốn: nhấn chuột, bôi đen nội dung, v.v..

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính
Web Worker	4.0	3.5	10.0	4.0	11.5

Ví dụ về Web Worker

Dưới đây là ví dụ đơn giản về web worker, nó được chạy ngầm để đếm số:

Số đã đếm được:

Kiểm tra trình duyệt hỗ trợ Web Worker

Trước khi khởi tạo, bạn nên kiểm tra xem trình duyệt của người dùng có hỗ trợ web worker hay không:

if(typeof(Worker) !== "undefined") {

// Trình duyệt hỗ trợ Web worker!

// Viết tiếp các mã javascript

} else {

// Rất tiếc! Trình duyệt không hỗ trợ Web Worker..

}

Tạo tệp tin Web Worker

Bây giờ, bạn hãy tạo một tệp tin JavaScript. Nội dung của tệp tin này chúng ta sẽ dùng để đếm số, bạn lưu lại với tên là “demo_workers.js”:

var i = 0;

function timedCount() {

i = i + 1;

postMessage(i);

setTimeout("timedCount()",500);

}

timedCount();

Phần quan trọng nhất của đoạn mã bên trên là hàm postMessage() – nó được sử dụng để gửi nội dung ngược lại trang HTML mà chúng ta đang chạy.

Lưu ý: Thông thường web worker không sử dụng để thực hiện những đoạn mã đơn giản như thế này mà thường dùng cho những công việc phức tạp hơn, chuyên sâu hơn.

Tạo Web Worker

Chúng ta đã có một tệp tin javascript, công việc tiếp theo là gọi nó vào trang HTML.

Đoạn mã dưới dây sẽ kiểm tra xem chúng ta đã chạy Web Worker hay chưa, nếu chưa – nó sẽ tạo ra một web worker mới và chạy đoạn mã được chứa trong tệp tin “demo_workers.js”:

if(typeof(w) == "undefined") {

w = new Worker("demo_workers.js");

}

Với đoạn mã trên chúng ta đã có thể gửi và nhận nội dung từ web worker.

Chúng ta sẽ thêm sự kiện “onmessage” để nhận các thông điệp từ web worker.

w.onmessage = function(event){

document.getElementById("result").innerHTML = event.data;

};

Khi web worker gửi nội dung về trang HTML, đoạn mã trên sẽ tự động được chạy. Nội dung gửi được lưu trữ trong event.data.

Dừng Web Worker

Khi web worker được khởi tạo, nó sẽ liên tục lắng nghe các thông điệp (ngay cả khi đã chạy xong đoạn mã javascript) tới khi bị dừng.

Để dừng web worker, giải phóng tài nguyên cho trình duyệt và máy tính, bạn sử dụng hàm terminate():

1	w.terminate();

Sử dụng lại Web Worker

Nếu bạn thiết lập biến Web Worker thành “undefined”, bạn có thể tái sử dụng nó sau khi bị dừng:

1	w = undefined;

Ví dụ hoàn chỉnh về Web Worker

Dưới đây là ví dụ hoàn chỉnh, bao gồm các bước mà chúng ta đã thực hiện ở trên:

<!DOCTYPE html>

<html>

<body>

<button onclick="startWorker()">Chạy Worker</button>

<button onclick="stopWorker()">Dừng Worker</button>

<p><strong>Lưu ý:</strong> Internet Explorer 9 và các phiên bản trở về trước không hỗ trợ Web Worker.</p>

var w;

function startWorker() {

if(typeof(Worker) !== "undefined") {

if(typeof(w) == "undefined") {

w = new Worker("/resources/demo_workers.js");

}

w.onmessage = function(event) {

document.getElementById("result").innerHTML = event.data;

};

} else {

document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ Web Worker...";

}

function stopWorker() {

w.terminate();

w = undefined;

}

</script>

</body>

</html>

Demo

Web Worker và DOM

Web worker được viết trong các tệp tin JavaScript, chúng sẽ không thể truy cập vào các đối tượng sau đây trong JavaScript:

Đối tượng window
Đối tượng document
Đối tượng parent