Web Workers HTML

Web worker là JavaScript chạy trong background, sẽ không ảnh hưởng đến hiệu suất của trang web.

Web Worker là gì?

Khi thực thi script trên trang HTML, trang sẽ không phản hồi cho đến khi script hoàn thành.

Web worker là JavaScript chạy trong background, tách biệt với các script khác, sẽ không ảnh hưởng đến hiệu suất của trang web. Bạn có thể tiếp tục làm bất kỳ điều gì bạn muốn: nhấp chuột, chọn nội dung, v.v., trong khi đó web worker chạy trong background.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Mô hình Web Workers HTML

Ví dụ dưới đây tạo một web worker đơn giản để đếm trong background:

Tính toán:

Thử ngay

Kiểm tra hỗ trợ Web Worker

Trước khi tạo web worker, hãy kiểm tra trình duyệt người dùng có hỗ trợ nó không:

if (typeof(Worker) !== "undefined") {
    // Đúng rồi! Hỗ trợ Web worker!
    // Một số mã.....
}
    // XIN LỜI! KHÔNG HỖ TRỢ WEB WORKER!
}

Tạo tệp Web Worker

Bây giờ, hãy tạo web worker của chúng ta trong một tệp JavaScript bên ngoài.

Tại đây, chúng ta đã tạo kịch bản đếm. Kịch bản này đượ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() - nó được sử dụng để truyền lại một đoạn tin nhắn cho trang HTML.

Chú thích: Web worker thường không được sử dụng cho các kịch bản đơn giản như vậy mà là cho các nhiệm vụ tốn nhiều tài nguyên CPU hơn.

Tạo đối tượng Web Worker

Hiện tại, chúng ta đã có tệp web worker, chúng ta cần gọi nó từ trang HTML.

Dòng mã dưới đây kiểm tra có tồn tại worker hay không, nếu không tồn tại, nó sẽ tạo một đối tượng web worker mới và chạy mã trong tệp "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Sau đó, chúng ta có thể nhận và gửi tin nhắn từ web worker.

Thêm một bộ lắng nghe sự kiện "onmessage" vào web worker:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

Khi web worker gửi tin nhắn, mã trong bộ lắng nghe sự kiện sẽ được thực thi. Dữ liệu từ web worker sẽ được lưu trữ trong event.data.

Ngừng Web Worker

Sau khi tạo web worker, nó sẽ tiếp tục lắng nghe tin nhắn (dù vân bản mã kịch bản bên ngoài đã hoàn thành) cho đến khi nó được ngừng.

Để ngừng web worker và giải phóng tài nguyên của trình duyệt/máy tính, 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 undefined, bạn có thể tái sử dụng mã này sau khi nó được ngừng:

w = undefined;

Mã ví dụ hoàn chỉnh của Web Worker

Chúng ta đã thấy mã Worker trong tệp .js. Dưới đây là mã của trang HTML:

Mẫu

<!DOCTYPE html>
<html>
<body>
<p>Đếm số: <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;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Thử ngay

Web Worker và DOM

Do các web worker nằm trong tệp ngoài, chúng không thể truy cập các đối tượng JavaScript sau:

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