摘要：但是，單核也能實現(xiàn)多任務(wù)同時運行，比如你邊聽網(wǎng)易云音樂的每日推薦歌曲，邊在網(wǎng)易有道云筆記上寫博文。比如網(wǎng)易云音樂一邊播放音頻，一邊顯示歌詞。

ECMAScript規(guī)定了JavaScript腳本的核心語法，如 數(shù)據(jù)類型、關(guān)鍵字、保留字、運算符、對象和語句等，它不屬于任何瀏覽器。

文檔對象模型(DOM)將web頁面與到腳本或編程語言連接起來。通常是指 JavaScript，但將HTML、SVG或XML文檔建模為對象并不是JavaScript語言的一部分。DOM模型用一個邏輯樹來表示一個文檔，樹的每個分支的終點都是一個節(jié)點(node)，每個節(jié)點都包含著對象(objects)。DOM的方法(methods)讓你可以用特定方式操作這個樹，用這些方法你可以改變文檔的結(jié)構(gòu)、樣式或者內(nèi)容。節(jié)點可以關(guān)聯(lián)上事件處理器，一旦某一事件被觸發(fā)了，那些事件處理器就會被執(zhí)行。

瀏覽器對象模型(BOM)，是用于描述這種對象與對象之間層次關(guān)系的模型，瀏覽器對象模型提供了獨立于內(nèi)容的、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象.

進程(Process)是系統(tǒng)資源分配和調(diào)度的單元。一個運行著的程序就對應(yīng)了一個進程。一個進程包括了運行中的程序和程序所使用到的內(nèi)存和系統(tǒng)資源。如果是單核CPU的話，在同一時間內(nèi)，有且只有一個進程在運行。但是，單核CPU也能實現(xiàn)多任務(wù)同時運行，比如你邊聽網(wǎng)易云音樂的每日推薦歌曲，邊在網(wǎng)易有道云筆記上寫博文。這算開了兩個進程（多進程），那運行的機制就是一會兒播放一下歌，一會兒響應(yīng)一下你的打字，但由于CPU切換的速度很快，你根本感覺不到，以至于你認為這兩個進程是在同時運行的。進程之間是資源隔離的。

那線程(Thread)是什么？線程是進程下的執(zhí)行者，一個進程至少會開啟一個線程（主線程），也可以開啟多個線程。比如網(wǎng)易云音樂一邊播放音頻，一邊顯示歌詞。多進程的運行其實也就是通過進程中的線程來執(zhí)行的。一個進程下的線程是可以共享資源的，所以在多線程的情況下，需要特別注意對臨界資源的訪問控制.

目前最為流行的瀏覽器為：｀Chrome，IE，Safari，F(xiàn)ireFox，Opera.
一個瀏覽器通常由以下幾個常駐的線程:

渲染引擎線程：負責(zé)頁面的渲染

JS引擎線程：負責(zé)JS的解析和執(zhí)行

定時觸發(fā)器線程：處理定時事件，比如setTimeout, setInterval

事件觸發(fā)線程：處理DOM事件

異步http請求線程：處理http請求

需要注意的是,渲染線程和JS引擎線程是不能同時進行的。渲染線程在執(zhí)行任務(wù)的時候，JS引擎線程會被掛起。因為JS可以操作DOM，若在渲染中JS處理了DOM，瀏覽器可能就懵逼了。

Web Worker (工作線程) 是 HTML5 中提出的概念,Web Workers 使得一個Web應(yīng)用程序可以在與主執(zhí)行線程分離的后臺線程中運行一個腳本操作。這樣做的好處是可以在一個多帶帶的線程中執(zhí)行費時的處理任務(wù)，從而允許主（通常是UI）線程運行而不被阻塞/放慢.

Web Worker可以分為一下幾類:

專用線程(Dedicated Worker)

專用線程僅能被創(chuàng)建它的腳本所使用(一個專用線程對應(yīng)一個主線程)

共享線程(Shared Worker)

共享線程能夠在不同的腳本中使用(一個共享線程對應(yīng)多個主線程)

服務(wù)工作線程(Service Workers)

注冊在指定源和路徑下的事件驅(qū)動worker, 可以控制關(guān)聯(lián)的頁面或者網(wǎng)站，攔截并修改訪問和資源請求，細粒度地緩存資源.

Chrome Workers

一種僅適用于firefox的worker.

Aduio Workers

可以在網(wǎng)絡(luò)worker上下文中直接完成腳本化音頻處理

可以通過caniuse 查看兼容性

Dedicated Worker 兼容性

Shared Worker 兼容性

懶加載

文本分析

流媒體數(shù)據(jù)處理

canvas圖形繪制

圖像處理

...

同源限制

無法訪問DOM

有自己的上下文，無法使用Window對象

創(chuàng)建線程

檢查瀏覽器是否支持

if (window.Worker) {
    // some code
}

專用線程

@params {String} url 表示worker將執(zhí)行的腳本的URL,必須遵守同源策略
@params {Object} [options] 創(chuàng)建對象實例時設(shè)置的選項屬性的對象
@params {Object} [options.type]
@params {Object} [options.name]
@params {Object} [options.credentials]
@returns 創(chuàng)建的worker
const myWorker = new Worker(url[, options]);

示例

// main.js
const myDedicatedWorker = new Worker("./dedicated_worker/worker.js", { name: "dedicatedWorker" });

// worker.js
console.log("success");

共享線程

@params {String} url 表示worker將執(zhí)行的腳本的URL,必須遵守同源策略
@params {Object} [options] 創(chuàng)建對象實例時設(shè)置的選項屬性的對象
@params {Object} [options.type]
@params {Object} [options.name]
@params {Object} [options.credentials]
@returns 創(chuàng)建的worker
const myWorker = new SharedWorker(url[, options]);

示例

// main.js
const mySharedWorker = new SharedWorker("./shared_worker/worker.js", { name: "sharedWorker" });

// worker.js
console.log("success");

線程通信

發(fā)送信息

@params {Object} message 傳遞的數(shù)據(jù)對象
@params {Object} [options] 一個可選的Transferable對象的數(shù)組，用于傳遞所有權(quán).如果一個對象的所有權(quán)被轉(zhuǎn)移，在發(fā)送它的上下文中將變?yōu)椴豢捎茫ㄖ兄梗⑶抑挥性谒话l(fā)送到的worker中可用。
myWorker.postMessage(message, transferList);

接收信息

myWorker.onmessage = function(event) {
    const data = event.data; // 接收到的消息數(shù)據(jù)
}

專用線程示例

// main.js
const myWorker = new Worker("worker.js");
myWorker.postMessage([10, 20]);
myWorker.onmessage = function (event) {
    console.log(event.data);
}

// worker.js
onmessage(event) {
    console.log(event.data);
    postMessage(event.data[1] - event.data[0]);
}

共享線程示例

// main.js
const myWorker = new SharedWorker("worker.js");
myWorker.port.start();
myWorker.port.postMessage([10, 20]);
myWorker.port.onmessage = function (event) {
    console.log(event.data);
}

// worker.js
connect(event) {
    const port = event.port[0];

    port.onmessage(event) {
        port.postMessage(event.data[1] - event.data[0]);
    }
}

在SharedWorker的使用中，我們發(fā)現(xiàn)對于SharedWorker實例對象，我們需要通過port屬性來訪問到主要方法；同時在Worker腳本中，多了個全局的 connect()函數(shù)，同時在函數(shù)中也需要去獲取一個port對象來進行啟動以及操作；這是因為，多頁頁面共享一個SharedWorker線程時，在線程中需要去判斷和區(qū),分來自不同頁面的信息，這是最主要的區(qū)別和原因。
在Worker線程中，self和this都代表子線程的全局對象。對于監(jiān)聽 message事件，以下的四種寫法是等同的。

// 寫法 1
self.addEventListener("message", function (e) {
    // ...
})

// 寫法 2
this.addEventListener("message", function (e) {
    // ...
})

// 寫法 3
addEventListener("message", function (e) {
    // ...
})

// 寫法 4
onmessage = function (e) {
    // ...
}

示例

myWorker.terminate(); // 主線程中使用

close(); worker線程中使用（推薦）

// 主線程
myWorker.onerror = function(event) {
    const lineno = event.lineno;      // 出錯的腳本名稱
    const filename = event.filename;  // 發(fā)生錯誤的行號
    const message = event.message;    // 對錯誤的描述
} 

// 不能進行反序列化時觸發(fā)
myWorker.onmessageerror = function() { ... }  // 專用線程
myWorker.port.onmessageerror function() {...} // 共享線程

提供importScript()方法,導(dǎo)入一條或者以上腳本到當(dāng)前worker的作用域里.
每個腳本中的全局對象都能夠被 worker 使用.

importScript("first.js", "second.js");

Worker可以生成子進程

存在同源限制

子Worker中的URL相對于父級Woker所在位置進行解析

結(jié)構(gòu)化克隆算法是由HTML5規(guī)范定義的用于復(fù)制復(fù)雜JavaScript對象的算法。通過來自Workers的postMessage()或使用IndexedDB存儲對象時在內(nèi)部使用。它通過遞歸輸入對象來構(gòu)建克隆，同時保持先前訪問過的引用的映射，以避免無限遍歷循環(huán)。這一過程可以理解為，在發(fā)送方使用類似JSON.stringfy()的方法將參數(shù)序列化，在接收方采用類JSON.parse()的方法反序列化。

Error以及Function對象是不能被結(jié)構(gòu)化克隆算法復(fù)制的；如果你嘗試這樣子去做，這會導(dǎo)致拋出DATA_CLONE_ERR的異常

無法克隆DOM

對象的某些特定參數(shù)也不會被保留

RegExp對象的lastIndex字段不會被保留

屬性描述符，setters 以及 getters（以及其他類似元數(shù)據(jù)的功能）同樣不會被復(fù)制。例如，如果一個對象用屬性描述符標(biāo)記為 read-only，它將會被復(fù)制為 read-write，因為這是默認的情況下

原形鏈上的屬性也不會被追蹤以及復(fù)制

時間相關(guān)

clearInterval()
clearTimeout()
setInterval()
setTimeout

Worker 相關(guān)

importScripts()
close()
postMessage()

存儲相關(guān)

Cache
IndexedDB

網(wǎng)絡(luò)相關(guān)

Fetch
WebSocket
XMLHttpRequest

更多