Giới thiệu về Công nhân Web JavaScript

Bạn đã bao giờ cần chạy mã trong trình duyệt mất quá nhiều thời gian để chạy ứng dụng của bạn không phản hồi trong một thời gian không? Với nhân viên web HTML5, bạn không bao giờ cần phải trải nghiệm điều đó một lần nữa.

Web worker cho phép bạn tách mã dài hạn và chạy nó độc lập với các mã khác đang chạy trên trang. Điều này giúp giao diện người dùng của bạn luôn phản hồi, ngay cả trong các hoạt động phức tạp.

Nhân viên web là gì?

Theo truyền thống, JavaScript là một ngôn ngữ đơn luồng. Điều đó có nghĩa là không có gì khác có thể chạy trong khi một đoạn mã đang chạy. Ví dụ: nếu bạn có mã đang cố gắng tạo hoạt ảnh cho một phần tử DOM, thì mã đang cố gắng thay đổi một biến phải đợi hoạt ảnh kết thúc trước khi nó có thể chạy.

Web worker là các tệp JavaScript thực thi trong một chuỗi riêng biệt không có quyền truy cập trực tiếp vào DOM.

Một cách để nghĩ về nhân viên web là chúng là những đoạn mã cần rất nhiều thời gian để chạy, vì vậy bạn đưa chúng cho trình duyệt để thực thi ở chế độ nền. Vì mã đó hiện đang chạy trong nền, nó không ảnh hưởng đến JavaScript chịu trách nhiệm cho trang web của bạn.

Như một tác dụng phụ, nó không còn có thể tương tác trực tiếp với phần còn lại của mã của bạn, vì vậy nhân viên web không có quyền truy cập vào DOM. Tuy nhiên, nhiều API trình duyệt khác vẫn có sẵn, bao gồm cả WebSocket và API tìm nạp.

Mặc dù vậy, công nhân web không hoàn toàn bị cô lập khỏi chuỗi chính. Khi một worker cần giao tiếp với luồng chính, nó có thể gửi một thông báo và luồng chính có thể gửi thông điệp của chính nó để đáp lại.

Tại sao làm việc trên web?

Trước khi có công nhân web, cách duy nhất để chạy JavaScript đòi hỏi nhiều thời gian trong trình duyệt là:

• Chấp nhận rằng trang sẽ không phản hồi trong một thời gian.
• Chia mã đó thành các đoạn không đồng bộ.

Vì một trang không phản hồi thường là một trải nghiệm người dùng không tốt, bạn có thể chọn tùy chọn không đồng bộ. Viết mã theo cách này có nghĩa là chia nó thành các phần nhỏ hơn để trình duyệt có thể chạy trong khi nó không xử lý giao diện người dùng. Các phần này cần phải đủ nhỏ để nếu giao diện người dùng cần cập nhật, trình duyệt có thể hoàn thành việc thực thi phần hiện tại và tham gia vào giao diện người dùng.

Web worker đã được thêm vào HTML5 để đưa ra giải pháp tốt hơn cho vấn đề này. Thay vì buộc bạn phải sáng tạo với mã không đồng bộ, chúng cho phép bạn tách một cách rõ ràng một hàm để chạy trong chuỗi cô lập của riêng nó.

Điều này giúp các nhà phát triển viết mã như vậy dễ dàng hơn và cải thiện trải nghiệm của người dùng.

Các trường hợp sử dụng cho nhân viên web

Bất kỳ ứng dụng nào đòi hỏi nhiều tính toán ở phía máy khách đều có thể được hưởng lợi từ nhân viên web.

Ví dụ: giả sử ứng dụng của bạn muốn tạo một báo cáo sử dụng và nó lưu trữ tất cả dữ liệu về ứng dụng khách vì những lo ngại về quyền riêng tư.

Để tạo báo cáo đó, ứng dụng web của bạn phải truy xuất dữ liệu, chạy tính toán trên đó, sắp xếp kết quả và trình bày chúng cho người dùng.

Nếu bạn cố gắng làm điều đó trong luồng chính, người dùng sẽ hoàn toàn không thể sử dụng ứng dụng trong khi ứng dụng xử lý dữ liệu. Thay vào đó, bạn có thể di chuyển một số hoặc tất cả mã đó vào một nhân viên web. Điều này cho phép người dùng tiếp tục sử dụng ứng dụng trong khi các phép tính đang được thực hiện.

Cách sử dụng nhân viên web trong JavaScript

API Web Worker xác định cách sử dụng web worker. Sử dụng API này liên quan đến việc tạo một đối tượng Worker với hàm tạo Worker như sau:

let newWorker = Worker('worker.js');

Các Người làm việc phương thức khởi tạo chấp nhận tên của tệp JavaScript làm tham số của nó và chạy tệp đó trong một luồng mới. Nó trả về một đối tượng Worker để cho phép luồng chính tương tác với luồng worker.

Người lao động tương tác với luồng chính bằng cách gửi tin nhắn qua lại. Bạn sử dụng postMessage chức năng gửi các sự kiện giữa worker và main thread. Sử dụng trên tàu trình nghe sự kiện để lắng nghe tin nhắn từ bên kia.

Đây là một ví dụ về mã. Đầu tiên, một chuỗi chính có thể trông như thế này:

let worker = new Worker('worker.js')
worker.postMessage('Hey!')
worker.onmessage = function(e) {
console.log('Worker thread says', e.data)
}

Chuỗi chính này tạo một đối tượng worker từ worker.js, sau đó gửi thông báo tới nó với worker.postMessage. Sau đó, nó định nghĩa một trình nghe sự kiện, tương tự như khái niệm với một trình nghe sự kiện DOM. Một sự kiện sẽ kích hoạt mỗi khi worker gửi thông báo trở lại luồng chính và trình xử lý ghi lại thông báo của worker vào bảng điều khiển.

Mã bên trong worker (worker.js) có một công việc:

onmessage = function(e) {
let message = e.data;
console.log('Main thread said', message);
postMessage('Hi!')
}

Nó lắng nghe bất kỳ thông báo nào được gửi từ chuỗi chính, ghi lại thông báo vào bảng điều khiển và gửi thông báo trả về trở lại chuỗi chính.

Tất cả các thông báo trong ví dụ này đều là chuỗi, nhưng đó không phải là một yêu cầu: bạn có thể gửi hầu hết mọi loại dữ liệu dưới dạng tin nhắn.

Loại công nhân mà bạn đã thấy cho đến nay được gọi là công nhân tận tâm. Bạn chỉ có thể truy cập chúng từ tệp bạn đã tạo chúng trong đó (chúng dành riêng cho nó). Shared worker thì ngược lại: họ có thể nhận tin nhắn từ và gửi tin nhắn đến nhiều tệp. Nhân viên được chia sẻ về mặt khái niệm giống như nhân viên tận tâm, nhưng bạn phải sử dụng chúng khác một chút.

Hãy xem một ví dụ. Thay vì sử dụng phương thức khởi tạo Worker, mỗi tệp muốn sử dụng một worker được chia sẻ phải tạo một đối tượng worker bằng SharedWorker ():

let sharedWorker = new SharedWorker('worker.js')

Tuy nhiên, sự khác biệt không dừng lại ở đó. Đối với một tệp để gửi hoặc nhận tin nhắn từ một nhân viên được chia sẻ, nó phải làm như vậy bằng cách truy cập vào Hải cảng đối tượng, thay vì làm như vậy trực tiếp. Đây là những gì trông giống như:

sharedWorker.port.postMessage('Hi there!')
sharedWorker.port.onMessage = function(e) {
console.log('The shared worker sent', e.data);
}

Bạn cũng phải sử dụng đối tượng cổng bên trong worker:

onconnect = function(e) {
const port = e.ports[0];
port.onmessage = function(e) {
console.log('Message recieved', e.data)
port.postMessage('Hello!');
}
}

Các onconnect trình nghe kích hoạt mỗi khi kết nối với một cổng xảy ra (khi trên tàu trình nghe sự kiện được thiết lập trong luồng chính).

Khi điều đó xảy ra, mã lấy cổng vừa được kết nối từ sự kiện kết nối và lưu trữ nó trong một biến. Tiếp theo, mã đăng ký trên tàu người nghe trên đối tượng cổng. Sau đó, mã ghi lại thông báo vào bảng điều khiển và sử dụng cổng để gửi thông báo trở lại chuỗi chính.

Nhân viên web Cải thiện trải nghiệm người dùng

Web worker là các chuỗi JavaScript cho phép bạn chạy các đoạn mã phức tạp và chạy dài trong nền. Mã này sau đó sẽ tránh chặn giao diện người dùng. Việc sử dụng web worker giúp việc viết loại mã này dễ dàng hơn nhiều và cải thiện trải nghiệm cho người dùng ứng dụng. Bạn có thể tạo nhân viên web và tương tác với họ bằng cách sử dụng API nhân viên web.