48. Web Workers Trong HTML

Web Workers trong HTML: Web Workers là một tính năng trong HTML5 cho phép bạn chạy mã JavaScript trong một luồng riêng biệt và độc lập với luồng chính của trang web. Điều này giúp tránh tình trạng đóng băng giao diện người dùng khi mã JavaScript phải thực hiện các tác vụ phức tạp hoặc tốn nhiều thời gian. Khi một tác vụ được chạy trong một Web Worker, nó không ảnh hưởng đến tương tác người dùng chính và có thể thực hiện các tính toán nặng mà không gây cản trở.

Một số điểm quan trọng về Web Workers:

Loại Web Workers: Có hai loại Web Workers: Dedicated Workers và Shared Workers.
- Dedicated Workers: Mỗi Dedicated Worker được liên kết với một tập tin JavaScript riêng biệt và chạy trên một luồng độc lập. Chúng không chia sẻ dữ liệu với các Worker khác.
- Shared Workers: Shared Workers chia sẻ dữ liệu và tài nguyên giữa nhiều cửa sổ trình duyệt và trang web. Chúng hoạt động như một loại trung gian giữa các tab hoặc cửa sổ trình duyệt khác nhau.
Truyền dữ liệu: Dữ liệu giữa luồng chính và Web Worker hoặc giữa các Worker có thể được truyền qua thông điệp. Các thông điệp được truyền bằng cách sử dụng các sự kiện như message và postMessage.
Hạn chế: Web Workers không thể truy cập vào DOM trực tiếp và không chia sẻ bộ nhớ với luồng chính. Điều này đảm bảo tính an toàn và tránh các xung đột trong tài nguyên.
Tiềm năng sử dụng: Web Workers thích hợp cho các tác vụ như tính toán phức tạp, xử lý dữ liệu lớn, chạy các kịch bản phía nền, v.v.

Dưới đây là ví dụ cơ bản về cách tạo và sử dụng một Dedicated Worker:

Trong trang HTML:

html

<!DOCTYPE html>
<html>
<head>
  <title>Web Worker Example</title>
</head>
<body>
  <h1>Web Worker Example</h1>
  <button onclick="startWorker()">Start Worker</button>
  <button onclick="stopWorker()">Stop Worker</button>
  <p id="output"></p>

  <script>
    let worker;

    function startWorker() {
      worker = new Worker('worker.js');
      worker.onmessage = function(event) {
        document.getElementById('output').innerHTML = event.data;
      };
    }

    function stopWorker() {
      worker.terminate();
    }
  </script>
</body>
</html>

Trong tệp worker.js:

javascript

// worker.js
self.onmessage = function(event) {
  const result = event.data + ' processed in worker';
  self.postMessage(result);
};

Trong ví dụ này, khi bạn nhấn nút “Start Worker”, một Dedicated Worker sẽ được tạo và chạy mã trong tệp worker.js. Khi Worker hoàn thành tác vụ và gửi thông điệp trở lại, nội dung sẽ được hiển thị trên trang HTML.

Leave a Comment Cancel Reply