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

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

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

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

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

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

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

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

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

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

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

異步http請(qǐng)求線程：處理http請(qǐng)求

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

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

Web Worker可以分為一下幾類:

專用線程(Dedicated Worker)

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

共享線程(Shared Worker)

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

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

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

Chrome Workers

一種僅適用于firefox的worker.

Aduio Workers

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

可以通過(guò)caniuse 查看兼容性

Dedicated Worker 兼容性

Shared Worker 兼容性

懶加載

文本分析

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

canvas圖形繪制

圖像處理

...

同源限制

無(wú)法訪問(wèn)DOM

有自己的上下文，無(wú)法使用Window對(duì)象

創(chuàng)建線程

檢查瀏覽器是否支持

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

專用線程

@params {String} url 表示worker將執(zhí)行的腳本的URL,必須遵守同源策略
@params {Object} [options] 創(chuàng)建對(duì)象實(shí)例時(shí)設(shè)置的選項(xiàng)屬性的對(duì)象
@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)建對(duì)象實(shí)例時(shí)設(shè)置的選項(xiàng)屬性的對(duì)象
@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ù)對(duì)象
@params {Object} [options] 一個(gè)可選的Transferable對(duì)象的數(shù)組，用于傳遞所有權(quán).如果一個(gè)對(duì)象的所有權(quán)被轉(zhuǎn)移，在發(fā)送它的上下文中將變?yōu)椴豢捎茫ㄖ兄梗?，并且只有在它被發(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)對(duì)于SharedWorker實(shí)例對(duì)象，我們需要通過(guò)port屬性來(lái)訪問(wèn)到主要方法；同時(shí)在Worker腳本中，多了個(gè)全局的 connect()函數(shù)，同時(shí)在函數(shù)中也需要去獲取一個(gè)port對(duì)象來(lái)進(jìn)行啟動(dòng)以及操作；這是因?yàn)?，多?yè)頁(yè)面共享一個(gè)SharedWorker線程時(shí)，在線程中需要去判斷和區(qū),分來(lái)自不同頁(yè)面的信息，這是最主要的區(qū)別和原因。
在Worker線程中，self和this都代表子線程的全局對(duì)象。對(duì)于監(jiān)聽(tīng) 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;      // 出錯(cuò)的腳本名稱
    const filename = event.filename;  // 發(fā)生錯(cuò)誤的行號(hào)
    const message = event.message;    // 對(duì)錯(cuò)誤的描述
} 

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

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

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

Worker可以生成子進(jìn)程

存在同源限制

子Worker中的URL相對(duì)于父級(jí)Woker所在位置進(jìn)行解析

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

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

無(wú)法克隆DOM

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

RegExp對(duì)象的lastIndex字段不會(huì)被保留

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

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

時(shí)間相關(guān)

clearInterval()
clearTimeout()
setInterval()
setTimeout

Worker 相關(guān)

importScripts()
close()
postMessage()

存儲(chǔ)相關(guān)

Cache
IndexedDB

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

Fetch
WebSocket
XMLHttpRequest

更多