Trang chủ » Mã hóa » Giới thiệu về API JavaScript của công nhân web

    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ângiao 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ứaLấ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ụngtrả 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'); 

    Các Công nhân() constructor lấy URL của tệp worker làm đối số của nó.

    Sau đó, chúng tôi thêm một trình xử lý sự kiện cho hành động sự kiện của thể hiện worker mới được tạo nhận dữ liệu từ nó. Các dữ liệu tài sản của e sự kiện sẽ giữ dữ liệu nhận được.

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

    Bây giờ, chúng tôi sử dụng postMessage () đến gửi một số dữ liệu đến luồng công nhân khi nhấn nút. Các postMessage () phương thức có thể có hai đối số. Loại đầu tiên có thể thuộc bất kỳ loại nào (chuỗi, mảng,). Đó là dữ liệu được gửi đến chủ đề công nhân (hoặc tới tập lệnh chính, khi phương thức có trong luồng worker).

    Tham số tùy chọn thứ hai là một mảng các đối tượng có thể được sử dụng bởi các chủ đề công nhân (nhưng không phải bởi kịch bản chính, hoặc ngược lại). Những loại đối tượng được gọi là Chuyển nhượng các đối tượng.

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

    Tôi chỉ gửi một giá trị chuỗi cho luồng công nhân.

    Trong luồng công nhân, chúng ta cần thêm một hành động xử lý sự kiện sẽ nhận được dữ liệu gửi đến nó bởi kịch bản chính trên nút bấm. Bên trong xử lý, chúng tôi nối chuỗi nhận được với chuỗi khác và gửi kết quả trở lại kịch bản chính.

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

    Không giống như trong kịch bản chính nơi chúng tôi phải sử dụng w đối tượng tham chiếu đến tham khảo chủ đề công nhân cụ thể kịch bản sau đó sử dụng hành độngbài viết phương pháp, có không cần một đối tượng tham chiếu trong luồng công nhân để chỉ đến chủ đề chính.

    Mã này hoạt động như sau. Khi trình duyệt tải index.html, Bảng điều khiển sẽ hiển thị "công nhân tạo ra" nhắn tin ngay khi công nhân() constructor được thực thi trong luồng chính, tạo ra một công nhân mới.

    Khi bạn nhấp vào nút trên trang, bạn sẽ nhận được "Nhận được từ công nhân: Hi john" Thông báo trong bảng điều khiển, đó là chuỗi nối trong luồng công nhân với dữ liệu được gửi đến nó, và sau đó là gửi lại cho kịch bản chính.