Giới thiệu về API JavaScript của công nhân web

Công nhân web là một API JavaScript cho phép bạn chạy các kịch bản trong một luồng riêng biệt từ luồng chính. Nó có thể có ích khi bạn không muốn có bất kỳ cản trở nào trong việc thực thi các tập lệnh chính, do các tập lệnh nền-esque.

API công nhân web là được hỗ trợ trong hầu hết các trình duyệt, để biết thêm thông tin chi tiết, hãy xem tài liệu của CanIUse. Trước khi nhập mã, hãy xem một vài tình huống mà bạn có thể muốn sử dụng API này để bạn có thể biết được ý của tôi là gì kịch bản nền-esque.

Trường hợp sử dụng

Hãy nói rằng có một kịch bản tìm nạp và xử lý một tập tin. Nếu một tập tin là đáng kể lớn nó sẽ mất một thời gian dài để được xử lý! Cái nào có thể cản trở các tập lệnh khác được gọi sau này khi được thực thi.

Tuy nhiên, nếu xử lý tập tin được chuyển đến một chủ đề nền, được gọi là công nhân chủ đề, các sự kiện khác sẽ không bị chặn cho đến khi sự kiện cũ kết thúc.

Kịch bản thực hiện trong một luồng công nhân nền được gọi là kịch bản công nhân hoặc chỉ công nhân.

Ví dụ khác, hãy tưởng tượng có một hình thức lớn, được sắp xếp trong các tab. Nó được viết theo kịch bản theo cách cập nhật các điều khiển trong một tab ảnh hưởng đến một số điều khiển ở những người khác.

Nếu việc cập nhật các tab khác mất một chút thời gian thì người dùng không thể liên tục sử dụng tab hiện tại mà không có sự kiện của nó được giữ lại. Điều này có thể đóng băng giao diện người dùng, làm mất tinh thần của người dùng.

Vì người dùng sẽ không nhìn thấy các tab khác trong khi điền vào một tab hiện tại, bạn có thể cập nhật các điều khiển của các tab khác trong một luồng nền. Bằng cách này, người dùng có thể tiếp tục sử dụng tab hiện tại mà mình đang điền, mà không có bất kỳ tập lệnh nào bị chặn bởi quá trình cập nhật các điều khiển trong các tab khác.

Tương tự như vậy, nếu bạn tìm thấy một kịch bản trong đó một kịch bản có thể chặn người dùng sử dụng giao diện người dùng cho đến khi việc thực thi của nó được thực hiện, bạn có thể xem xét chuyển nó sang một luồng worker, để nó có thể được thực thi trong nền.

Phạm vi và loại công nhân

API công nhân web có lẽ là một trong những API đơn giản nhất để làm việc với. Nó có các phương pháp khá đơn giản để tạo chủ đề công nhân và giao tiếp với họ từ kịch bản chính.

Phạm vi toàn cầu của một luồng công nhân là trong một bối cảnh khác với luồng chính. Bạn không thể truy cập các phương thức và thuộc tính của cửa sổ vật nhu la cảnh báo () bên trong một chủ đề công nhân. Bạn cũng không thể thay đổi DOM trực tiếp từ một chủ đề công nhân.

Tuy nhiên bạn có thể sử dụng nhiều API theo cửa sổ, ví dụ Hứa và Lấy, trong luồng công nhân của bạn (xem danh sách đầy đủ).

Bạn cũng có thể có chủ đề công nhân lồng nhau: luồng công nhân được tạo từ một luồng công nhân khác. Một công nhân được tạo bởi một người khác được gọi là một thợ phụ.

Cũng có nhiều các loại của công nhân. Hai cái chính là công nhân tận tâm và chia sẻ.

Công nhân tận tụy thuộc cùng bối cảnh duyệt rằng chủ đề chính của họ thuộc về. Công nhân được chia sẻ, tuy nhiên, là hiện diện trong một bối cảnh duyệt web khác (ví dụ: trong iframe) từ tập lệnh chính. Trong cả hai trường hợp, kịch bản chính và công nhân phải ở trong cùng một miền.

Ví dụ trong hướng dẫn này sẽ là về công nhân tận tụy, đó là loại phổ biến nhất.

Phương thức API

Xem sơ đồ dưới đây cho một tổng quan nhanh về tất cả các phương pháp chính tạo thành API công nhân web.

Các Công nhân() constructor tạo ra một chủ đề công nhân chuyên dụng và trả về đối tượng tham chiếu của nó. Sau đó, chúng tôi sử dụng đối tượng này để liên lạc với nhân viên cụ thể đó.

Các postMessage () phương thức được sử dụng trong cả tập lệnh chính và tập lệnh worker gửi dữ liệu cho nhau. Dữ liệu đã gửi sau đó được nhận ở phía bên kia bởi hành động xử lý sự kiện.

Các chấm dứt () phương pháp chấm dứt một luồng công nhân từ kịch bản chính. Sự chấm dứt này là ngay lập tức: mọi thực thi tập lệnh hiện tại và tập lệnh đang chờ xử lý sẽ bị hủy. Các gần() phương pháp làm điều tương tự, nhưng nó được gọi bởi luồng công nhân tự đóng.

Mã ví dụ

Bây giờ, hãy xem một số mã mẫu. Các index.html trang giữ kịch bản chính bên trong

Chúng tôi bắt đầu với tạo luồng công nhân từ kịch bản chính.

 w = Công nhân mới ('worker.js'); 

 w = Công nhân mới ('worker.js'); w.onmessage = (e) => console.log ('Đã nhận từ worker: $ e.data');  

 document.querySelector ('nút'). onclick = () => w.postMessage ('john');  

 console.info ('worker được tạo'); onmessage = (e) => postMessage ('Xin chào $ e.data');