Web Workers的基本概念和使用

web workers是通过使用Worker(）来创建的。

Worker可以指定后台执行的脚本，并在脚本执行完毕之后通常creator。

worker有一个构造函数如下：

() 

我们传入要执行脚本的路径，即可创建worker。

Workers中也可以创建新的Workers,前提是这些worker都是同一个origin。

我们看一下worker的定义：

Worker EventTarget{
    onmessage(this: Worker, ev: MessageEvent=> any| ;
    onmessageerror(this: Worker, ev: MessageEvent=> any| ;

(message, transfer[)voidpostMessage: any?)voidterminate)void<extends >: , : this: Worker, ev: WorkerEventMap[K]=> any?| AddEventListenerOptions: ;
(type, listener, options: boolean )void<extends >: , : this: Worker, ev: WorkerEventMap[K]=> any?| EventListenerOptions: ;
(type, listener, options: boolean )void}

declare : : Workernew: string URL?);
;

可以看到Worker的构造函数可以传入两个参数，第一个参数可以是string也可以是URL，表示要执行的脚本路径。

第二个参数是WorkerOptions选项，表示worker的类型，名字和权限相关的选项。

WorkerOptions ?;
    name: string?;
const first .()const second .()const result .()if .Worker{
= Worker"worker.js";

    firstonchange function) .(.value.value).()}

    secondonchange function) .(.value.value).()}

    myWorkeronmessage functione{
        result= e;
        consolelog'Message received from worker';
} {
    consolelog'Your browser doesn\'t support web workers.'}

上面的例子创建了一个woker，并向worker post了一个消息。

再看一下worker.js的内容是怎么样的：

= () .()const result .data* e[]if isNaN){
()} {
= + result.()postMessage)}
.(;

我们在主线程中向worker postmessage，在worker中通过onmessage监听消息，然后又在worker中post message，可以在main线程中通过onmessage来监听woker发送的消息。

这样就做到了一次完美的交互。

再看一下worker的兼容性：

要想处理worker的异常，可以使用onerror来处理异常。

如果worker的script比较复杂，需要用到其他的script文件，我们可以使用importScripts来导入其他的脚本：

(;                         importScripts'foo.js';                 importScripts'foo.js''bar.js';       importScripts'//example.com/hello.js'; var myWorker new ()var first .()var second .()var result1 .()if !.SharedWorker{
= SharedWorker"worker.js";

  firstonchange function) .portpostMessage[first, second];
    consolelog'Message posted to worker';
.= ({
    myWorker.(.value.value).()}

  myWorker.= () .textContent .data.().(e)}
onconnect functione{
= e[].= () var workerResult 'Result: ' (e[] .data1).(workerResult;
}

worker也是通过port来进行通信。

这里我们使用了onconnect用来监听父线程的onmessage事件或者start事件，这两种事件都可以启动一个SharedWorker。

再看一下sharedWorker的浏览器兼容性：

可以看到，比worker的兼容性要低很多，只有部分浏览器才支持这个高级特性。

worker和main thread之间的数据传输

我们知道worker和main thread之间是通过postMessage和onMessage进行交互的。这里面涉及到了数据传输的问题。

实际上数据在worker和main thread之间是以拷贝的方式并且是以序列化的形式进行传输的。