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

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

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

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

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

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

目前最為流行的瀏覽器為：｀Chrome，IE，Safari，FireFox，Opera.
一個瀏覽器通常由以下幾個常駐的線程:

渲染引擎線程：負責頁面的渲染

JS引擎線程：負責JS的解析和執行

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

事件觸發線程：處理DOM事件

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

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

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

Web Worker可以分為一下幾類:

專用線程(Dedicated Worker)

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

共享線程(Shared Worker)

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

服務工作線程(Service Workers)

注冊在指定源和路徑下的事件驅動worker, 可以控制關聯的頁面或者網站，攔截并修改訪問和資源請求，細粒度地緩存資源.

Chrome Workers

一種僅適用于firefox的worker.

Aduio Workers

可以在網絡worker上下文中直接完成腳本化音頻處理

可以通過caniuse 查看兼容性

Dedicated Worker 兼容性

Shared Worker 兼容性

懶加載

文本分析

流媒體數據處理

canvas圖形繪制

圖像處理

...

同源限制

無法訪問DOM

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

創建線程

檢查瀏覽器是否支持

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

專用線程

@params {String} url 表示worker將執行的腳本的URL,必須遵守同源策略
@params {Object} [options] 創建對象實例時設置的選項屬性的對象
@params {Object} [options.type]
@params {Object} [options.name]
@params {Object} [options.credentials]
@returns 創建的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將執行的腳本的URL,必須遵守同源策略
@params {Object} [options] 創建對象實例時設置的選項屬性的對象
@params {Object} [options.type]
@params {Object} [options.name]
@params {Object} [options.credentials]
@returns 創建的worker
const myWorker = new SharedWorker(url[, options]);

示例

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

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

線程通信

發送信息

@params {Object} message 傳遞的數據對象
@params {Object} [options] 一個可選的Transferable對象的數組，用于傳遞所有權.如果一個對象的所有權被轉移，在發送它的上下文中將變為不可用（中止），并且只有在它被發送到的worker中可用。
myWorker.postMessage(message, transferList);

接收信息

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

專用線程示例

// 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的使用中，我們發現對于SharedWorker實例對象，我們需要通過port屬性來訪問到主要方法；同時在Worker腳本中，多了個全局的 connect()函數，同時在函數中也需要去獲取一個port對象來進行啟動以及操作；這是因為，多頁頁面共享一個SharedWorker線程時，在線程中需要去判斷和區,分來自不同頁面的信息，這是最主要的區別和原因。
在Worker線程中，self和this都代表子線程的全局對象。對于監聽 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;  // 發生錯誤的行號
    const message = event.message;    // 對錯誤的描述
} 

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

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

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

Worker可以生成子進程

存在同源限制

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

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

Error以及Function對象是不能被結構化克隆算法復制的；如果你嘗試這樣子去做，這會導致拋出DATA_CLONE_ERR的異常

無法克隆DOM

對象的某些特定參數也不會被保留

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

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

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

時間相關

clearInterval()
clearTimeout()
setInterval()
setTimeout

Worker 相關

importScripts()
close()
postMessage()

存儲相關

Cache
IndexedDB

網絡相關

Fetch
WebSocket
XMLHttpRequest

更多