摘要：專(zhuān)用線程不僅僅支持傳輸二進(jìn)制數(shù)據(jù)，也支持結(jié)構(gòu)化的數(shù)據(jù)格式。但是我們所開(kāi)啟的新的也就是子線程，并不支持操作頁(yè)面的。共享線程共享線程是為了避免線程的重復(fù)創(chuàng)建和銷(xiāo)毀過(guò)程，降低了系統(tǒng)性能的消耗，共享線程可以同時(shí)有多個(gè)頁(yè)面的線程鏈接。

Web Worker 詳細(xì)介紹 - 原文鏈接

[TOC]

我們都知道JavaScript這個(gè)語(yǔ)言在執(zhí)行的時(shí)候是采用單線程進(jìn)行執(zhí)行的，也就是說(shuō)在同一時(shí)間只能做一件事，這也和這門(mén)語(yǔ)言有很大的關(guān)系，采用同步執(zhí)行的方式進(jìn)行運(yùn)行，如果出現(xiàn)阻塞，那么后面的代碼將不會(huì)執(zhí)行，HTML5則提出了web Worker標(biāo)準(zhǔn)，表示JavaScript允許有多個(gè)線程，但是子線程完全受主線程的控制，切子線程不能操作DOM，只有主線程可以操作DOM，所以以主線程為主的單線程執(zhí)行原理成了JavaScript這門(mén)語(yǔ)言的核心。關(guān)于JavaScript的運(yùn)行機(jī)制可以參考阮一峰的文章JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop

下面我們來(lái)說(shuō)說(shuō)web worker到底是什么，簡(jiǎn)單明了的一句話其實(shí)就是在Javascript單線程執(zhí)行的基礎(chǔ)上，開(kāi)啟一個(gè)子線程，進(jìn)行程序處理，而不影響主線程的執(zhí)行，當(dāng)子線程執(zhí)行完畢之后再回到主線程上，在這個(gè)過(guò)程中并不影響主線程的執(zhí)行過(guò)程。
舉個(gè)例子：
傳統(tǒng)情況下，執(zhí)行下面的代碼后，整個(gè)頁(yè)面都會(huì)被凍結(jié)，由于javascript是單線程處理，如下代碼已經(jīng)完全組塞了后續(xù)的執(zhí)行

while(true){}

如果換一種方式，我們通過(guò)開(kāi)啟一個(gè)新的線程來(lái)執(zhí)行這段代碼，將他放在一個(gè)多帶帶的worker.js文件中,在主線程執(zhí)行以下代碼。

var worker = new Worker("worker.js")

創(chuàng)建線程

在創(chuàng)建線程的時(shí)候需要給實(shí)例化的Worker傳入唯一一個(gè)參數(shù)，指向一個(gè)javascript文件資源的url或者Blob對(duì)象（Blob對(duì)象就是一個(gè)包含有只讀原始數(shù)據(jù)類(lèi)文件對(duì)象），調(diào)用這個(gè)構(gòu)造函數(shù)之后，一個(gè)線程就被創(chuàng)建了，如下：

var worker = new Worker("worker.js");
var worker = new Worker(blob);

線程通信

Web Worker的基本原理就是在當(dāng)前的主線程中加載一個(gè)只讀文件來(lái)創(chuàng)建一個(gè)新的線程，兩個(gè)線程同時(shí)存在，且互不阻塞，并且在子線程與主線程之間提供了數(shù)據(jù)交換的接口postMessage和onmessage。來(lái)進(jìn)行發(fā)送數(shù)據(jù)和接收數(shù)據(jù)。其數(shù)據(jù)格式可以為結(jié)構(gòu)化數(shù)據(jù)（JSON等）；
當(dāng)我們創(chuàng)建了一個(gè)worker實(shí)例之后，我們可以通過(guò)如下兩種方式來(lái)發(fā)送數(shù)據(jù)：

var worker = new Worker("worker.js");  //實(shí)例化對(duì)象

//第一種傳遞方式
worker.postMessage(message,taransferList);

//第二種傳遞方式
worker.postMessage({ 
     operation: "list_all_users", 
     //ArrayBuffer object 
     input: buffer, 
     threshold: 0.8, 
}, [buffer]);

如果要想一個(gè)專(zhuān)用線程發(fā)送數(shù)據(jù)，那么我們需要使用線程中的 postMessage 方法。專(zhuān)用線程不僅僅支持傳輸二進(jìn)制數(shù)據(jù)，也支持結(jié)構(gòu)化的 JavaScript 數(shù)據(jù)格式。在這里有一點(diǎn)需要注意，為了高效地傳輸 ArrayBuffer 對(duì)象數(shù)據(jù)，需要在 postMessage 方法中的第二個(gè)參數(shù)中指定它。

同時(shí)我們?nèi)绻枰邮漳硞€(gè)線程傳來(lái)的數(shù)據(jù)可以使用onmessage來(lái)進(jìn)行接收，方法如下：

//方法一
worker.onmessage = function(event){
    var data = event.data;        //通過(guò)event.data來(lái)獲取傳入的參數(shù)
}

//方法二
worker.addEventListener("message",target);

下面是一段運(yùn)行在chrome中的參數(shù)傳遞方式：

index.html

worker.js

onmessage = function (e) {
    console.log(e.data);
    postMessage("2222")
};

此時(shí)我們的瀏覽器打印出的log是如下：

上面我們已經(jīng)說(shuō)了創(chuàng)建一個(gè)新的線程、傳遞數(shù)據(jù)、接收數(shù)據(jù)的方法，下面再次做一個(gè)精簡(jiǎn)的回顧。

創(chuàng)建新的Worker

var worker = new Worker("worker.js")

傳遞參數(shù)

worker.postMessage("text");

接收消息

worker.onmessage = function (e) {
        var message = e.data;
};

異常處理

worker.onerror = function(e){
    console.log("error at "+e.filename ":" + e.lineno + e.message)
}

結(jié)束worker

worker.terminate();

載入工具類(lèi)函數(shù)

importScripts("./utils/base64.js","./utils/map.js"...)

需要注意的是importScripts是同步方法，一旦importScripts方法返回就可以開(kāi)始使用載入的腳本，而不需要回調(diào)函數(shù)。

當(dāng)我們創(chuàng)建一個(gè)新的worker時(shí)，改代碼會(huì)運(yùn)行在一個(gè)全新的javascript的環(huán)境中（WorkerGlobalScope）運(yùn)行,是完全和創(chuàng)建worker的腳本隔離，這時(shí)我們可以吧創(chuàng)建新worker的腳本叫做主線程，而被創(chuàng)建的新的worker叫做子線程。

WorkerGlobalScope是worker的全局對(duì)象，所以它包含所有核心javascript全局對(duì)象擁有的屬性如JSON等，window的一些屬性，也擁有類(lèi)似于XMLHttpRequest()等。

但是我們所開(kāi)啟的新的worker也就是子線程，并不支持操作頁(yè)面的DOM。

共享線程是為了避免線程的重復(fù)創(chuàng)建和銷(xiāo)毀過(guò)程，降低了系統(tǒng)性能的消耗，共享線程SharedWorker可以同時(shí)有多個(gè)頁(yè)面的線程鏈接。

使用SharedWorker創(chuàng)建共享線程，也需要提供一個(gè)javascript腳本文件的URL地址或Blob,該腳本文件中包含了我們?cè)诰€程中需要執(zhí)行的代碼，如下：

var worker = new SharedWorker("sharedworker.js");

共享線程也使用了message事件監(jiān)聽(tīng)線程消息，但使用SharedWorker對(duì)象的port屬性與線程通信如下。

worker.port.onmessage = function(e){
    ...
}

同時(shí)我們也可以使用SharedWorker對(duì)象的port屬性向共享線程發(fā)送消息如下。

worker.port.postMessage("message");

文章大部分類(lèi)容摘自《指尖上行》一書(shū)

參考文獻(xiàn)
1、JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop —— 阮一峰
2、深入 HTML5 Web Worker 應(yīng)用實(shí)踐：多線程編程