API Worker Web trong HTML - HTML Web Workers API

  • Huân

    Tác giả

    Huân

  • Ngày đăng

    30 thg 11, 2023

  • Số lượt xem

    253 lượt xem


Bài học này mô tả HTML Web Workers API cho phép thực hiện các tác vụ nền mà không làm chậm trải nghiệm người dùng. Điều này tăng hiệu suất và đáng tin cậy trong ứng dụng web.

Web Worker là gì?

Khi thực thi các đoạn mã trong một trang HTML, trang trở nên không phản ứng cho đến khi đoạn mã hoàn thành.

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

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Web Workers.

API

Chrome

Edge

FireFox

Safari

Opera

Web worker

4.0

10.0

3.5

4.0

11.5

Kiểm tra Hỗ trợ Web Worker

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

if (typeof(Worker) !== "undefined") {
     // Có! Hỗ trợ web worker!
     // Một số mã....
} else {
     // Xin lỗi! Không hỗ trợ Web Worker.
}

Tạo Một File 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.

Ở đây, chúng ta tạo một đoạn mã đếm. Đoạn mã đượ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 thông điệp trở lại trang HTML.

Lưu ý: Thông thường, web workers không được sử dụng cho những đoạn mã đơn giản như vậy, mà thay vào đó được sử dụng cho các nhiệm vụ yêu cầu nhiều CPU 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ừ một trang HTML.

Các dòng sau kiểm tra xem worker đã tồn tại chưa, nếu chưa - nó tạo một đối tượng web worker mới và chạy mã trong "demo_workers.js":

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

Sau đó, chúng ta có thể gửi và nhận thông điệp 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 một thông điệp, mã trong bộ lắng nghe sự kiện được thực thi. 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, nó sẽ tiếp tục lắng nghe các thông điệp (ngay cả sau khi đoạn mã bên ngoài đã hoàn thành) cho đến khi nó bị chấm dứt.

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

w = undefined;

Mã Ví dụ Đầy Đủ về Web Worker

Chúng ta đã xem mã Worker trong tệp .js. Dưới đây là mã cho trang HTML:

<!DOCTYPE html>
<html>
    <body>
        <p>Đếm số: <output id="result"></output></p>
        <button onclick="startWorker()">Bắt đầu Worker</button>
        <button onclick="stopWorker()">Dừng 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 = "Xin lỗi! Không hỗ trợ Web Worker.";
         }
    }
}
function stopWorker() {
     w.terminate();
     w = undefined;
}
    </script>
    </body>
</html>

Web Workers và DOM

Do web workers ở trong các tệp bên ngoài, chúng 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

 


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.