HTML WEB WORKERS API

Nlỗi đông đảo tín đồ đã và đang biết thì Javascript là 1 trong ngôn từ đơn luồng, các đoạn code hầu như bắt buộc chạy tuy nhiên song. Một trang web tất cả đến sản phẩm tá các công dụng, thao tác cần phải thực hiện, Lúc vận dụng của công ty đã xử trí một đoạn code, thì bạn chẳng thể làm những gì khác ko kể cách ngồi ngóng nó cách xử trí.

Bạn đang xem: Html web workers api

Thế cần là những xây dựng viên hay sử dụng bất đồng hóa như setTimeout, setInterval giỏi XMLHttpRequest. lấy ví dụ như đơn giản dễ dàng Khi bọn họ áp dụng AJAX đề xuất chuyền vào trong 1 callbachồng nhằm tiến hành code sau khoản thời gian tất cả response, nếu như việc xử lý đơn giản dễ dàng, ko phức tạp, tốn ít thời gian thì vẫn không tồn tại cthị trấn gì xẩy ra. Thế dẫu vậy giả dụ vấn đề cách xử trí tốn những thời gian ngốn nhiều CPU thì rất đơn giản xẩy ra việc crash app, so với người dùng thì phía trên trái là 1 yên cầu không thể vui vẻ

Trong bài này mình đang reviews đến các bạn một Web APIs nhằm triển khai multi-threading task khá xuất sắc đó đó là Web Worker.

Web Worker

1. Web Worker là gì ?

Web Worker là một đối tượng vào Javascript được tạo ra vị các hàm contructor nlỗi Worker, SharedWorker... với tsay mê số được truyền vào là một trong file JS cất những đoạn code sẽ được tiến hành bởi Worker. Các script được viết trong tệp tin này sẽ được tiến hành ngầm, ko ảnh hưởng mang lại thưởng thức của người tiêu dùng. Vì vậy cùng với các tác vụ tốn những thời gian những bạn cũng có thể dùng Worker nhằm cách xử trí.

Đây là 1 trong những phong cách thiết kế vận động cơ bản của Worker cùng với 2 luồng bao gồm đó là main thread (main.js) và worker(worker.js). Nhìn vào hình họa bạn cũng có thể tưởng tượng được nguyên lý hoạt động tương hỗ giữa nhị luồng là hồ hết có thể Bàn bạc ban bố cùng nhau.

lấy ví dụ câu hỏi Call API thuở đầu tốn những thời gian main thread hoàn toàn có thể chuyển xuống đến worker xử trí, sau khi xử lý kết thúc thì đưa lại dữ liệu cho main.js.

Cả main thread và worker số đông tiếp xúc vào gửi dữ liệu lẫn nhau trải qua hàm postMessage(), với sử dụng hàm onmessage() để lắng nghe dữ liệu được thân tặng. Dữ liệu được gửi qua lại thân nhị các bước này là một bạn dạng coppy.

Web Worker không hẳn của Javascript, cơ mà đấy là một nhân kiệt của trình chuẩn y cho phép bọn họ truy vấn xuất qua Javascript

2. Dedicated workers

Dedicated workers chỉ hoàn toàn có thể truy cập vị đoạn script Call cho nó.

Để kiểm tra trình săn sóc của họ cung ứng Web Worker hay không sử dụng

if (window.Worker) ....

Khởi tạo nên một Worker

Để khởi tạo nên mội Web Worker siêu đơn giản và dễ dàng, chỉ việc sử dụng Worker constructor(), truyền phía bên trong constructor này là 1 trong những đường dẫn tới file xử lý ngầm vày Worker

var myWorker = new Worker('my-worker.js');

Gửi và dìm message vào Web Worker

Nhỏng bản thân bao gồm nhắc tới ở bên trên Worker cùng main thread vẫn tiếp xúc cùng nhau thông qua nhì hàm đó là postMessage() và onmessage(). Cả main thread cùng Worker hồ hết dìm thông tin trải qua sự khiếu nại onmessage() và truy vấn dự liệu trải qua sự kiện.data.

Ví dụ

button onclick="startWorker()">Start Workerbutton>button onclick="stopWorker()">Stop Workerbutton>const worker = new Worker("worker.js"); // gửi tài liệu mang đến Worker xử lýworker.postMessage("Tin nhắn này gửi mang lại worker") //nhấn tin nhắn từ bỏ Workerworker.onmessage = function(e) console.log(e.data); // Tin nhắn này gửi đến main threadLúc gửi message đến Worker, để nhận ra dữ liệu áp dụng sự khiếu nại onmessage nhằm lắng nghe

self.onmessage = function (e) console.log(e.data); // Tin nhắn này gửi mang lại worker // nhắn tin nhắn thanh lịch main thread self.postMessage("Tin nhắn này gửi đến main thread");Trong onmessage handler được cho phép chúng ta xử lý dữ liệu nhận được trường đoản cú main thread cơ mà ko làm cho tác động tới quý giá trên main thread bởi tài liệu được trao là phiên bản coppy chứ chưa hẳn dữ liệu cội.

Xem thêm: Tại Sao Không Thể Comment Trên Facebook Không Đọc Được Bình Luận

Trong thread bao gồm onmessage cùng postMessage cần phải được Gọi vì worker tương ứng, còn vào worker không nhất thiết phải knhì báo cụ thể chỉ việc call thông qua từ bỏ khóa this hoặc self là được do vào một thread có thể có rất nhiều worker, nhưng một worker chỉ hoàn toàn có thể quản lý bươi một thread

Ngừng Worker đang được thực thi

Nếu muốn dừng một Worker đang hoạt động họ tất cả 2 cách

Sử dụng phương thức terminate() bên trên thực thể WorkerSử dụng phương thưc close() phía bên trong tệp tin Worker

worker.terminate();hoặc

self.close()

Xử lý nước ngoài lệ

lúc code Việc cách xử trí nước ngoài lệ là không thể thiếu với Web Worker cũng như vậy. Trong quá trình chạy worker ví như gồm lỗi xẩy ra onerror handler sẽ được gọi cho tới trải qua sự kiện error.

worker.addEventListener('error', function (e) console.log(e), false)Event error cung ứng mang đến chúng ta một vài ba thuộc tính để xác minh được ban bố lỗi tương đối hữu ích

message: biểu đạt cụ thể của lỗifilename : tệp tin xảy ra lỗilineno: loại xảy ra lỗi

Import script với libraries

Bên trong những tệp tin Worker cho phép bọn họ import thêm những tệp tin script hoặc các libraries thông qua hàm importScripts

importScripts('foo.js'); /* imports file "foo.js" */importScripts('foo.js', 'bar.js'); /* imports nhiều file */Sau khi import, trình chuẩn y đã load từng tệp tin một cùng triển khai những đoạn code bên phía trong script kia, ví như một script ko được load thì vẫn có mặt một exception là NETWORK_ERROR => những đoạn code phía dưới sẽ không còn được thực thi.

Web Worker sẽ không còn vận động trường hợp họ truy cập trực tiếp các website page trường đoản cú filesystem, nếu muốn áp dụng worker thì cần có một server để chạy nó nhé những pạn

3. Shared Worker

Khác cùng với Dedicated Worker thì Shared Worker hoàn toàn có thể được truy vấn từ nhiều đoạn script nào kia miễn sao trong cùng một domain name giỏi là thuộc protocol, port, host.

Khởi tạo thành một Shared Worker

Tạo một Shared Worker cũng đơn giản nlỗi sinh sản một Worker bình thường chỉ không giống là bọn họ vẫn sử dụng Shared Worker object thế bởi vì Worker object

var worker = new SharedWorker("worker.js");

Tương tác với một Shared Worker

Bất cứ một file script nào vào và một tên miền những hoàn toàn có thể điện thoại tư vấn tới Shared Worker trải qua MessagePort object được sinh sản vị nằm trong tính port thuộc SharedWorker interface.

Việc gửi và nhận message trường đoản cú các file script khác cho tới Shared Worker phức hợp rộng một ít Lúc chúng nên trải qua object port.

var worker = new SharedWorker("worker.js"); // lắng nghe message được truyền đếnworker.port.addEventListener("message", function(e) alert(e.data);, false); // Gửi message worker.port.postMessage("Tin nhắn này được gửi đến shared worker");Để lắng nghe được message được gửi đến từ main thread thì ở file shared worker rất cần được thực hiện onconnect handler nhằm liên kết với port. Các ports được kết nói cùng với worker được truy vấn trải qua ở trong tính ports.

onconnect sẽ tiến hành kích hoạt Khi kết nối được mtrọng điểm Shared Worker cùng main thread qua MessagePort object. Sau kia những quá trình khác ví như lắng nghe cùng gửi message trở về cho main thread cũng tương tự phương pháp chúng ta làm cho cùng với Dedicated Worker.

onconnect = function(e) var port = e.ports<0>; port.addEventListener('message', function(e) var workerResult = 'Result: ' + e.data; port.postMessage('Tin nhắn tự shared worker cho tới main thread'); ); port.start(); // Required when using addEventListenerNếu sử dụng addEventListener nhằm lắng nghe message event thì rất cần phải thêm port.start() ở cuối bên trong onconnect sự kiện.

4. Kết luận

Trên đây là đầy đủ share của bản thân mình về Web Worker, giả dụ vào bài bác gồm nhầm lẫn tuyệt bao gồm gì không biết thì các bạn hãy bình luận bên dưới nhằm họ cùng trao đổi kỹ năng và kiến thức nhé.