Nhân viên web

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

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àWorkerGlobalScopevật.

Hỗ trợ trình duyệt cho nhân viên web

Khá tốt!

Browser support for web workers

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:

Sử dụng postMessage trong đối tượng Web Worker

Bạn có thể gửi tin nhắn bằngpostMessagetrênWorkervậ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 chomessagesự kiện, thay vì sử dụngonmessagetạo trình nghe sự kiện (áp dụng choerrorsự 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.onmessagehoặ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ớiwindowvàdocumentcác đối tượng. Cũng thếparentkhông có.

Tuy nhiên, bạn có thể sử dụng nhiều API khác, bao gồm:

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:


Công nghệ Wiki trực tuyến!