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 vmlin trong trang HTML, trang sẽ không phản hồi cho đến khi vmlin hoàn thành.

Web worker là JavaScript chạy trong background, tách biệt với các vmlin 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 script đếm. Script 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 trong mã trên là phương thức postMessage() - nó được sử dụng để truyền một đoạn tin nhắn trở lại trang HTML.

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

Tạo đố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ừ trang HTML.

Dưới đây là mã kiểm tra xem worker có tồn tại 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" cho 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.

Kết thúc Web Worker

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

Để kết thúc 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 là undefined, bạn có thể tái sử dụng mã này sau khi nó được kết thúc:

w = undefined;

Mã ví dụ đầy đủ 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ô hình

<!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 bên 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