文章目錄

• 簡(jiǎn)介
• Web Workers的基本概念和使用
• Web Workers的分類
• worker和main thread之間的數(shù)據(jù)傳輸

簡(jiǎn)介

什么是web worker呢？從名字上就可以看出，web worker就是在web應(yīng)用程序中使用的worker。這個(gè)worker是獨(dú)立于web主線程的，在后臺(tái)運(yùn)行的線程。

web worker的優(yōu)點(diǎn)就是可以將工作交給獨(dú)立的其他線程去做，這樣就不會(huì)阻塞主線程。

Web Workers的基本概念和使用

web workers是通過(guò)使用Worker(）來(lái)創(chuàng)建的。

Worker可以指定后臺(tái)執(zhí)行的腳本，并在腳本執(zhí)行完畢之后通常creator。

worker有一個(gè)構(gòu)造函數(shù)如下：

Worker("path/to/worker/script")

我們傳入要執(zhí)行腳本的路徑，即可創(chuàng)建worker。

Workers中也可以創(chuàng)建新的Workers,前提是這些worker都是同一個(gè)origin。

我們看一下worker的定義：

interface Worker extends EventTarget, AbstractWorker {onmessage: ((this: Worker, ev: MessageEvent) => any) | null;onmessageerror: ((this: Worker, ev: MessageEvent) => any) | null;postMessage(message: any, transfer: Transferable[]): void;postMessage(message: any, options?: PostMessageOptions): void;terminate(): void;addEventListener<K extends keyof WorkerEventMap>(type: K, listener: (this: Worker, ev: WorkerEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;removeEventListener<K extends keyof WorkerEventMap>(type: K, listener: (this: Worker, ev: WorkerEventMap[K]) => any, options?: boolean | EventListenerOptions): void;removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; }declare var Worker: {prototype: Worker;new(stringUrl: string | URL, options?: WorkerOptions): Worker; };

可以看到Worker的構(gòu)造函數(shù)可以傳入兩個(gè)參數(shù)，第一個(gè)參數(shù)可以是string也可以是URL，表示要執(zhí)行的腳本路徑。

第二個(gè)參數(shù)是WorkerOptions選項(xiàng)，表示worker的類型，名字和權(quán)限相關(guān)的選項(xiàng)。

interface WorkerOptions {credentials?: RequestCredentials;name?: string;type?: WorkerType; }

除此之外，worker可以監(jiān)聽(tīng)onmessage和onmessageerror兩個(gè)事件。

提供了兩個(gè)方法：postMessage和terminate。

worker和主線程都可以通過(guò)postMessage來(lái)給對(duì)方發(fā)送消息，也可以用onmessage來(lái)接收對(duì)方發(fā)送的消息。

還可以添加和移除EventListener。

我們看一個(gè)使用worker的例子：

const first = document.querySelector('#number1'); const second = document.querySelector('#number2');const result = document.querySelector('.result');if (window.Worker) {const myWorker = new Worker("worker.js");first.onchange = function() {myWorker.postMessage([first.value, second.value]);console.log('Message posted to worker');}second.onchange = function() {myWorker.postMessage([first.value, second.value]);console.log('Message posted to worker');}myWorker.onmessage = function(e) {result.textContent = e.data;console.log('Message received from worker');} } else {console.log('Your browser doesn\'t support web workers.') }

上面的例子創(chuàng)建了一個(gè)woker，并向worker post了一個(gè)消息。

再看一下worker.js的內(nèi)容是怎么樣的：

onmessage = function(e) {console.log('Worker: Message received from main script');const result = e.data[0] * e.data[1];if (isNaN(result)) {postMessage('Please write two numbers');} else {const workerResult = 'Result: ' + result;console.log('Worker: Posting message back to main script');postMessage(workerResult);} }

我們?cè)谥骶€程中向worker postmessage，在worker中通過(guò)onmessage監(jiān)聽(tīng)消息，然后又在worker中post message，可以在main線程中通過(guò)onmessage來(lái)監(jiān)聽(tīng)woker發(fā)送的消息。

這樣就做到了一次完美的交互。

再看一下worker的兼容性：

可以看到，基本上所有的瀏覽器都支持worker，不過(guò)有些瀏覽器只支持部分的方法。

如果想要立馬結(jié)束一個(gè)worker，我們可以使用terminate：

myWorker.terminate();

要想處理worker的異常，可以使用onerror來(lái)處理異常。

如果worker的script比較復(fù)雜，需要用到其他的script文件，我們可以使用importScripts來(lái)導(dǎo)入其他的腳本：

importScripts(); /* imports nothing */ importScripts('foo.js'); /* imports just "foo.js" */ importScripts('foo.js', 'bar.js'); /* imports two scripts */ importScripts('//example.com/hello.js'); /* You can import scripts from other origins */

Web Workers的分類

Web Workers根據(jù)工作環(huán)境的不同，可以分為DedicatedWorker和SharedWorker兩種。

DedicatedWorker的Worker只能從創(chuàng)建該Woker的腳本中訪問(wèn)，而SharedWorker則可以被多個(gè)腳本所訪問(wèn)。

上面的例子中我們創(chuàng)建的worker就是DedicatedWorker。

怎么創(chuàng)建sharedWorker呢?

var myWorker = new SharedWorker('worker.js');

SharedWorker有一個(gè)單獨(dú)的SharedWorker類，和dedicated worker不同的是SharedWorker是通過(guò)port對(duì)象來(lái)進(jìn)行交互的。

我們看一個(gè)shared worker的例子：

var first = document.querySelector('#number1'); var second = document.querySelector('#number2');var result1 = document.querySelector('.result1');if (!!window.SharedWorker) {var myWorker = new SharedWorker("worker.js");first.onchange = function() {myWorker.port.postMessage([first.value, second.value]);console.log('Message posted to worker');}second.onchange = function() {myWorker.port.postMessage([first.value, second.value]);console.log('Message posted to worker');}myWorker.port.onmessage = function(e) {result1.textContent = e.data;console.log('Message received from worker');console.log(e.lastEventId);} }

所有的postMessage和onmessage都是基于myWorker.port來(lái)的。

再看一下worker的代碼：

onconnect = function(e) {var port = e.ports[0];port.onmessage = function(e) {var workerResult = 'Result: ' + (e.data[0] * e.data[1]);port.postMessage(workerResult);}}

worker也是通過(guò)port來(lái)進(jìn)行通信。

這里我們使用了onconnect用來(lái)監(jiān)聽(tīng)父線程的onmessage事件或者start事件，這兩種事件都可以啟動(dòng)一個(gè)SharedWorker。

再看一下sharedWorker的瀏覽器兼容性：

可以看到，比worker的兼容性要低很多，只有部分瀏覽器才支持這個(gè)高級(jí)特性。

worker和main thread之間的數(shù)據(jù)傳輸

我們知道worker和main thread之間是通過(guò)postMessage和onMessage進(jìn)行交互的。這里面涉及到了數(shù)據(jù)傳輸?shù)膯?wèn)題。

實(shí)際上數(shù)據(jù)在worker和main thread之間是以拷貝的方式并且是以序列化的形式進(jìn)行傳輸?shù)摹?/p>

本文作者：flydean程序那些事

本文鏈接： http://www.flydean.com/webworker-kickoff/

本文來(lái)源：flydean的博客

歡迎關(guān)注我的公眾號(hào):「程序那些事」最通俗的解讀，最深刻的干貨，最簡(jiǎn)潔的教程，眾多你不知道的小技巧等你來(lái)發(fā)現(xiàn)！

總結(jié)

以上是生活随笔為你收集整理的web worker的介绍和使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。