Trong JavaScript, có nhiều cách tiếp cận để nâng cao giao diện người dùng tổng thể của trang web. Các “Nhân viên web” là một trong những cách tiếp cận như vậy cho phép luồng chính tiếp tục thực thi mà không bị chặn. Nó bao gồm phiên bản công cụ JavaScript riêng biệt và do đó không thể gọi các chức năng của luồng chính.
Bài viết này sẽ thảo luận về cách sử dụng “Nhân viên web” để đa luồng trong JavaScript.
Công nhân web là gì?
“Nhân viên web” tương ứng với API trình duyệt cho phép JavaScript chạy các tác vụ song song/đồng thời trên một luồng riêng biệt/chuyên dụng.
Nhu cầu về nhân viên web là gì?
Do JavaScript là một luồng đơn nên các mã JavaScript phức tạp sẽ chặn luồng giao diện người dùng, tức là tạm dừng cửa sổ chính xử lý tất cả các tác vụ làm mới, triển khai sự kiện nhập của người dùng, v.v. Trong trường hợp như vậy, trải nghiệm người dùng bị ảnh hưởng . Để đối phó với vấn đề này, các “Nhân viên web” có hiệu lực và giải quyết việc chặn luồng giao diện người dùng.
Làm cách nào để sử dụng Web Worker để chạy đa luồng bằng JavaScript?
Để thực hiện một “Nhân viên web” , hãy sử dụng hàm tạo Worker. Nó lấy một URL làm đối số, tương ứng với đường dẫn của tệp tập lệnh công nhân thực hiện chức năng mong muốn. Tuy nhiên, để bao gồm mã công nhân trong một tệp HTML, hãy sử dụng một 'bãi' để viết mã công nhân.
Cú pháp (Tạo Web Worker)
hằng số x = mới Công nhân ( 'worker.js' ) ;Cú pháp(Gửi tin nhắn cho nhân viên)
hằng số x = mới Công nhân ( 'worker.js' ) ;
Cú pháp(Nhận tin nhắn từ Worker)
x. tin nhắn = chức năng ( sự kiện ) {bảng điều khiển. nhật ký ( sự kiện. dữ liệu ) ;
} ;
Ví dụ: Sử dụng “Web Worker” để tính giai thừa của một số trong JavaScript
Ví dụ sau đây sử dụng 'Công nhân()' hàm tạo để tạo một nhân viên web và tính giai thừa của một số:
< html >
< cái đầu >
< phong cách h2 = 'căn chỉnh văn bản: giữa;' > Ví dụ về nhân viên web h2 >
cái đầu >
< thân hình >
< kịch bản >
hằng số x = mới Công nhân ( URL. tạoObjectURL ( mới Bãi ( [
`
// script công nhân
hằng số sự thật = ( N ) => {
nếu như ( N == 0 || N == 1 ) {
trở lại 1n ;
}
khác {
trở lại BigInt ( N ) * sự thật ( BigInt ( N ) - 1n ) ;
}
} ;
bản thân. tin nhắn = ( sự kiện ) => {
hằng số Với = sự thật ( sự kiện. dữ liệu ) ;
bản thân. bài đăngMessage ( Với. toString ( ) ) ;
} ; `
] , { kiểu : 'văn bản/javascript' } ) ) ) ;
x. bài đăngMessage ( 15n ) ;
x. tin nhắn = ( sự kiện ) => {
hằng số ngoài = sự kiện. dữ liệu ;
bảng điều khiển. nhật ký ( 'Thừa số 15 Thông qua Web Worker-> ' , ngoài ) ;
} ;
thân hình >
html >
Trong mã này, hãy áp dụng các bước sau:
- Đầu tiên, chỉ định tiêu đề đã nêu.
- Sau đó, tạo một “Nhân viên web” đối tượng có URL của đối tượng Blob bao gồm mã cho nhân viên.
- Mã dành riêng cho nhân viên được bao gồm trong một hàm ẩn danh tính toán giai thừa của số thông qua hàm đệ quy.
- Ngoài ra, nhân viên lắng nghe các tin nhắn được gửi qua luồng chính bằng cách sử dụng “self.onmessage” sự kiện, truy xuất giai thừa của số đã truyền và đưa ra kết quả cho luồng chính thông qua “postMessage()” phương pháp.
- Trong luồng chính, tạo một phiên bản worker và gửi cho nó một tin nhắn có số “ 15n ”. Đây, ' N ” đề cập đến giá trị “BigInt”.
- Sau khi công nhân hoàn thành việc tính toán giai thừa, nó sẽ gửi kết quả/kết quả trở lại luồng chính bằng cách sử dụng “postMessage()” phương pháp.
- Cuối cùng, luồng chính tìm nạp/nhận kết quả trong “tin nhắn” sự kiện và trả về giai thừa tương ứng của số trên bảng điều khiển.
đầu ra
Ưu điểm của nhân viên web
Tiến trình song song : Trong trường hợp chạy song song cùng một mã.
Không bị gián đoạn trong việc thực thi mã: Việc thực thi mã được thực hiện bất kể lần làm mới, v.v. trên trang hiện tại.
Theo dõi chuyển động: Tất cả việc phát hiện chuyển động diễn ra trong nhân viên nền.
Đã bật đa luồng: Chúng cho phép đa luồng trong JavaScript.
Hiệu suất nâng cao: Tối ưu hóa hiệu suất bằng cách thực hiện các tác vụ chuyên sâu/đầy thử thách trong các luồng riêng biệt.
Trải nghiệm người dùng hiệu quả: Những điều này tránh chặn luồng chính, dẫn đến trải nghiệm người dùng phản hồi nhanh.
Hạn chế của nhân viên web
Tuy nhiên, cũng có một số hạn chế đối với nhân viên web. Những điều này được nêu rõ như sau:
- Sử dụng bộ nhớ nhiều hơn.
- Không thể cập nhật DOM trong chuỗi công việc hoặc gọi đối tượng cửa sổ.
Phần kết luận
“Nhân viên web” tương ứng với API trình duyệt cho phép JavaScript chạy các tác vụ cùng lúc trên một luồng riêng biệt/chuyên dụng. Chúng có thể được sử dụng bằng cách lấy URL làm đối số, tương ứng với đường dẫn của tệp tập lệnh công nhân. Blog này thảo luận về việc sử dụng “Web Workers” để xử lý đa luồng trong JavaScript.