Tìm hiểu cách chạy mã JavaScript trong nền bằng cách sử dụng Nhân viên web
- Giới thiệu
- Hỗ trợ trình duyệt cho nhân viên web
- Tạo một nhân viên web
- Giao tiếp với nhân viên web
- Vòng đời của công nhân web
- Đang tải thư viện trong Web Worker
- Các API có sẵn trong Nhân viên web
Giới thiệu
JavaScript là một chuỗi đơn. Không có gì có thể chạy song song cùng một lúc.
Điều này thật tuyệt vì chúng ta không cần phải lo lắng về toàn bộ các vấn đề sẽ xảy ra với lập trình đồng thời.
Với hạn chế này, mã JavaScript buộc phải hiệu quả ngay từ đầu, nếu không người dùng sẽ có trải nghiệm tồi tệ. Các hoạt động đắt tiền nên không đồng bộ để tránh chặn luồng.
Khi nhu cầu của các ứng dụng JavaScript ngày càng tăng, điều này bắt đầu trở thành vấn đề trong một số trường hợp.
Web worker giới thiệu khả năng thực thi song song bên trong trình duyệt.
Chúng có một số hạn chế:
- không có quyền truy cập vàoDOM: đối tượng Window và đối tượng Document
- họ có thể liên lạc lại với chương trình JavaScript chính bằng cách sử dụng tin nhắn
- chúng cần được tải từ cùng một nguồn gốc (miền, cổng và giao thức)
- chúng không hoạt động nếu bạn phân phát trang bằng giao thức tệp (
file://
)
Phạm vi toàn cầu của Web Worker, thay vì Window nằm trong chuỗi chính, làWorkerGlobalScope
vật.
Hỗ trợ trình duyệt cho nhân viên web
Khá tốt!
Bạn có thể kiểm tra hỗ trợ của Nhân viên web bằng cách sử dụng
if (typeof Worker !== 'undefined') {
}
Tạo một nhân viên web
Bạn tạo một Web Worker bằng cách khởi tạo một đối tượng Worker, tải một tệp JavaScript từ cùng một nguồn gốc:
const worker = new Worker('worker.js')
Giao tiếp với nhân viên web
Có hai cách chính để giao tiếp với Web Worker:
- API postMessage do đối tượng Web Worker cung cấp
- cácAPI nhắn tin kênh
Sử dụng postMessage trong đối tượng Web Worker
Bạn có thể gửi tin nhắn bằngpostMessage
trênWorker
vật.
Quan trọng: tin nhắn được chuyển, không được chia sẻ.
main.js
const worker = new Worker('worker.js')
worker.postMessage('hello')
worker.js
onmessage = event => {
console.log(event.data)
}
onerror = event => {
console.error(event.message)
}
Gửi lại tin nhắn
Một nhân viên có thể gửi lại tin nhắn cho chức năng đã tạo ra nó. sử dụng toàn cầu của nópostMessage()
chức năng:
worker.js
onmessage = event => {
console.log(event.data)
postMessage('hey')
}
onerror = event => {
console.error(event.message)
}
main.js
const worker = new Worker('worker.js')
worker.postMessage('hello')
worker.onmessage = event => {
console.log(event.data)
}
Nhiều người nghe sự kiện
Nếu bạn muốn thiết lập nhiều trình nghe chomessage
sự kiện, thay vì sử dụngonmessage
tạo trình nghe sự kiện (áp dụng choerror
sự kiện cũng vậy):
worker.js
addEventListener('message', event => {
console.log(event.data)
postMessage('hey')
}, false)
addEventListener(‘message’, event => {
console.log(I'm curious and I'm listening too
)
}, false)
addEventListener(‘error’, event => {
console.log(event.message)
}, false)
main.js
const worker = new Worker('worker.js')
worker.postMessage('hello')
worker.addEventListener(‘message’, event => {
console.log(event.data)
}, false)
Sử dụng API nhắn tin kênh
Thay vì sử dụng API postMessage tích hợp được cung cấp bởi Web worker, chúng tôi có thể chọn sử dụng mục đích chung hơnAPI nhắn tin kênhđể giao tiếp với họ.
main.js
const worker = new Worker('worker.js')
const messageChannel = new MessageChannel()
messageChannel.port1.addEventListener('message', event => {
console.log(event.data)
})
worker.postMessage(data, [messageChannel.port2])
worker.js
addEventListener('message', event => {
console.log(event.data)
})
Nhân viên Web có thể gửi lại tin nhắn bằng cách đăng tin nhắn lênmessageChannel.port2
, như thế này:
addEventListener('message', event => {
event.ports[0].postMessage(data)
})
Vòng đời của công nhân web
Nhân viên web được khởi chạy và nếu họ không ở chế độ nghe thông báo quaworker.onmessage
hoặc bằng cách thêm trình xử lý sự kiện, chúng sẽ ngừng hoạt động ngay sau khi mã của chúng được chạy xong.
Có thể ngừng sử dụng Web Worker khi sử dụngterminate()
phương thức từ luồng chính và bên trong chính worker bằng cách sử dụng phương thức toàn cụcclose()
:
main.js
const worker = new Worker('worker.js')
worker.postMessage('hello')
worker.terminate()
worker.js
worker.onmessage = event => {
console.log(event.data)
close()
}
worker.onerror = event => {
console.error(event.message)
}
Đang tải thư viện trong Web Worker
Nhân viên web có thể sử dụngimportScripts()
chức năng toàn cầu được xác định trong phạm vi toàn cầu của chúng:
importScripts('../utils/file.js', './something.js')
Các API có sẵn trong Nhân viên web
Như đã nói trước đây, Người làm việc trên web không thể truy cập DOM, vì vậy bạn không thể tương tác vớiwindow
vàdocument
các đối tượng. Cũng thếparent
không có.
Tuy nhiên, bạn có thể sử dụng nhiều API khác, bao gồm:
- cácAPI XHR
- cácAPI tìm nạp
- API BroadcastChannel
- cácAPI FileReader
- IndexedDB
- cácAPI thông báo
- Lời hứa
- Nhân viên dịch vụ
- cácAPI nhắn tin kênh
- cácAPI bộ nhớ đệm
- cácAPI bảng điều khiển(
console.log()
và những người bạn) - cácBộ hẹn giờ JavaScript(
setTimeout
,setInterval
…) - API CustomEvents:
addEventListener()
vàremoveEventListener()
- URL hiện tại mà bạn có thể truy cập thông qua
location
thuộc tính ở chế độ đọc - WebSockets
- WebGL
- SVG Animations
Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript
Các hướng dẫn khác về trình duyệt:
- Một số thủ thuật hữu ích có sẵn trong HTML5
- Cách tôi làm cho một trang web dựa trên CMS hoạt động ngoại tuyến
- Hướng dẫn hoàn chỉnh về ứng dụng web tiến bộ
- API tìm nạp
- Hướng dẫn API đẩy
- API nhắn tin kênh
- Hướng dẫn Nhân viên Dịch vụ
- Hướng dẫn API bộ nhớ cache
- Hướng dẫn API thông báo
- Đi sâu vào IndexedDB
- API Bộ chọn: querySelector và querySelectorAll
- Tải JavaScript hiệu quả với trì hoãn và không đồng bộ
- Mô hình đối tượng tài liệu (DOM)
- API lưu trữ web: lưu trữ cục bộ và lưu trữ phiên
- Tìm hiểu cách hoạt động của HTTP Cookies
- API lịch sử
- Định dạng hình ảnh WebP
- XMLHttpRequest (XHR)
- Hướng dẫn chuyên sâu về SVG
- URL dữ liệu là gì
- Lộ trình tìm hiểu Nền tảng Web
- CORS, Chia sẻ tài nguyên đa nguồn gốc
- Nhân viên web
- Hướng dẫn requestAnimationFrame ()
- Doctype là gì
- Làm việc với Bảng điều khiển DevTools và API Bảng điều khiển
- API tổng hợp giọng nói
- Cách chờ sự kiện DOM sẵn sàng bằng JavaScript thuần túy
- Cách thêm lớp vào phần tử DOM
- Cách lặp qua các phần tử DOM từ querySelectorAll
- Cách xóa một lớp khỏi phần tử DOM
- Cách kiểm tra xem một phần tử DOM có một lớp hay không
- Cách thay đổi giá trị nút DOM
- Cách thêm sự kiện nhấp chuột vào danh sách các phần tử DOM được trả về từ querySelectorAll
- WebRTC, API web thời gian thực
- Cách lấy vị trí cuộn của một phần tử trong JavaScript
- Cách thay thế một phần tử DOM
- Cách chỉ chấp nhận hình ảnh trong trường tệp đầu vào
- Tại sao sử dụng phiên bản xem trước của trình duyệt?
- Đối tượng Blob
- Đối tượng tệp
- Đối tượng FileReader
- Đối tượng FileList
- ArrayBuffer
- ArrayBufferView
- Đối tượng URL
- Mảng đã nhập
- Đối tượng DataView
- API BroadcastChannel
- API luồng
- Đối tượng FormData
- Đối tượng Điều hướng
- Cách sử dụng API vị trí địa lý
- Cách sử dụng getUserMedia ()
- Cách sử dụng API Kéo và Thả
- Cách làm việc với tính năng cuộn trên các Trang Web
- Xử lý các biểu mẫu trong JavaScript
- Sự kiện bàn phím
- Sự kiện chuột
- Chạm vào sự kiện
- Cách xóa tất cả phần tử con khỏi phần tử DOM
- Cách tạo thuộc tính HTML bằng vanilla Javascript
- Làm cách nào để kiểm tra xem một hộp kiểm đã được chọn bằng JavaScript hay chưa?
- Cách sao chép vào khay nhớ tạm bằng JavaScript
- Cách tắt một nút bằng JavaScript
- Cách làm cho một trang có thể chỉnh sửa trong trình duyệt
- Cách lấy giá trị chuỗi truy vấn trong JavaScript với URLSearchParams
- Cách xóa tất cả CSS khỏi một trang cùng một lúc
- Cách sử dụng insertAdjacentHTML
- Safari, cảnh báo trước khi thoát
- Cách thêm hình ảnh vào DOM bằng JavaScript
- Cách đặt lại biểu mẫu
- Cách sử dụng Google Fonts