一、進程與線程

1.進程

進程是指程序的一次執行,它占有一片獨有的內存空間,可以通過windows任務管理器查看進程(如下圖)。同一個時間里，同一個計算機系統中允許兩個或兩個以上的進程處于并行狀態，這是多進程。比如電腦同時運行微信，QQ，以及各種瀏覽器等。瀏覽器運行是有些是單進程，如firefox和老版IE，有些是多進程，如chrome和新版IE。

2.線程

有些進程還不止同時干一件事，比如Word，它可以同時進行打字、拼寫檢查、打印等事情。在一個進程內部，要同時干多件事，就需要同時運行多個“子任務”，我們把進程內的這些“子任務”稱為線程（Thread）。
線程是指CPU的基本調度單位,是程序執行的一個完整流程，是進程內的一個獨立執行單元。多線程是指在一個進程內, 同時有多個線程運行。瀏覽器運行是多線程。比如用瀏覽器一邊下載，一邊聽歌，一邊看視頻。另外我們需要知道JavaScript語言的一大特點就是單線程，為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質。

由于每個進程至少要干一件事，所以，一個進程至少有一個線程。當然，像Word這種復雜的進程可以有多個線程，多個線程可以同時執行，多線程的執行方式和多進程是一樣的，也是由操作系統在多個線程之間快速切換，讓每個線程都短暫地交替運行，看起來就像同時執行一樣。當然，真正地同時執行多線程需要多核CPU才可能實現。

3.進程與線程

4.單線程與多線程的優缺點?

單線程的優點:順序編程簡單易懂

單線程的缺點:效率低

多線程的優點:能有效提升CPU的利用率

多線程的缺點:

二、瀏覽器內核

瀏覽器的內核是指支持瀏覽器運行的最核心的程序，分為兩個部分的，一是渲染引擎，另一個是JS引擎。現在JS引擎比較獨立，內核更加傾向于說渲染引擎。

1.不同的瀏覽器可能不太一樣

2.內核由很多模塊組成

三、定時器引發的思考

1. 定時器真是定時執行的嗎?

我們先來看個例子，試問定時器會保證200ms后執行嗎？

 document.getElementById('btn').onclick = function () {
 var start = Date.now()
 console.log('啟動定時器前...')
 setTimeout(function () {
 console.log('定時器執行了', Date.now() - start)
 }, 200)
 console.log('啟動定時器后...')
 // 做一個長時間的工作
 for (var i = 0; i < 1000000000; i++) {
 }
 }

事實上，經過了625ms后定時器才執行。定時器并不能保證真正定時執行，一般會延遲一丁點,也有可能延遲很長時間(比如上面的例子)

2.定時器回調函數是在分線程執行的嗎?

定時器回調函數在主線程執行的, 具體實現方式下文會介紹。

四、瀏覽器的事件循環(輪詢)模型

1. 為什么JavaScript是單線程

JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript不能有多個線程呢？這樣能提高效率啊。

JavaScript的單線程，與它的用途有關。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程為準？

所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成了這門語言的核心特征，將來也不會改變。
為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標準并沒有改變JavaScript單線程的本質。

2.Event Loop

JavaScript中所有任務可以分成兩種，一種是同步任務，另一種是異步任務(如各種瀏覽器事件、定時器和Ajax等)。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務可以執行了，該任務才會進入主線程執行。

具體來說，異步執行的運行機制如下。（同步執行也是如此，因為它可以被視為沒有異步任務的異步執行。）

（1）所有同步任務都在主線程上執行，形成一個執行棧（execution context stack）。

（2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。

（3）一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務隊列"，看看里面有哪些事件。那些對應的異步任務，于是結束等待狀態，進入執行棧，開始執行。

（4）主線程不斷重復上面的第三步

主線程從"任務隊列"中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為Event Loop（事件循環）

下面這個例子很好闡釋事件循環：

 setTimeout(function () {
 console.log('timeout 2222')
 alert('22222222')
 }, 2000)
 setTimeout(function () {
 console.log('timeout 1111')
 alert('1111111')
 }, 1000)
 setTimeout(function () {
 console.log('timeout() 00000')
 }, 0)//當指定的值小于 4 毫秒，則增加到 4ms（4ms 是 HTML5 標準指定的，對于 2010 年及之前的瀏覽器則是 10ms）
 function fn() {
 console.log('fn()')
 }
 fn()
 console.log('alert()之前')
 alert('------') //暫停當前主線程的執行, 同時暫停計時, 點擊確定后, 恢復程序執行和計時
 console.log('alert()之后')

有兩點我們需要注意下：

總結:異步任務（各種瀏覽器事件、定時器和Ajax等）都是先添加到“任務隊列”（定時器則到達其指定參數時）。當 Stack 棧（JavaScript 主線程）為空時，就會讀取 Queue 隊列（任務隊列）的第一個任務（隊首），最后執行。

五、H5 Web Workers(多線程)

1. Web Workers的作用

正如上面所提到，JavaScript是單線程。當一個頁面加載一個復雜運算的 js 文件時，用戶界面可能會短暫地“凍結”，不能再做其他操作。比如下面這個例子：

<input type="text" placeholder="數值" id="number">
<button id="btn">計算</button>
<script type="text/javascript">
 // 1 1 2 3 5 8 f(n) = f(n-1) + f(n-2)
 function fibonacci(n) {
 return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2) //遞歸調用
 }
 var input = document.getElementById('number')
 document.getElementById('btn').onclick = function () {
 var number = input.value
 var result = fibonacci(number)
 alert(result)
 }
</script>

很顯然遇到這種頁面堵塞情況，很影響用戶體驗的，有沒有啥辦法可以改進這種情形？----Web Worker就應運而生了！

Web Worker 的作用，就是為 JavaScript 創造多線程環境，允許主線程創建 Worker 線程，將一些任務分配給后者運行。在主線程運行的同時，Worker 線程在后臺運行，兩者互不干擾。等到 Worker 線程完成計算任務，再把結果返回給主線程。這樣的好處是，一些計算密集型或高延遲的任務，被 Worker 線程負擔了，主線程（通常負責 UI 交互）就會很流暢，不會被阻塞或拖慢。其原理圖如下：

2. Web Workers的基本使用

主線程

var worker = new Worker('work.js');

 var input = document.getElementById('number')
 document.getElementById('btn').onclick = function () {
 var number = input.value
 //創建一個Worker對象
 var worker = new Worker('worker.js')
 // 綁定接收消息的監聽
 worker.onmessage = function (event) {
 console.log('主線程接收分線程返回的數據: '+event.data)
 alert(event.data)
 }
 // 向分線程發送消息
 worker.postMessage(number)
 console.log('主線程向分線程發送數據: '+number)
 }
 console.log(this) // window

Worker 線程

//worker.js文件
function fibonacci(n) {
 return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2) //遞歸調用
}
console.log(this)//[object DedicatedWorkerGlobalScope]
this.onmessage = function (event) {
 var number = event.data
 console.log('分線程接收到主線程發送的數據: '+number)
 //計算
 var result = fibonacci(number)
 postMessage(result)
 console.log('分線程向主線程返回數據: '+result)
 // alert(result) alert是window的方法, 在分線程不能調用
 // 分線程中的全局對象不再是window, 所以在分線程中不可能更新界面
}

這樣當分線程在計算時，用戶界面還可以操作，而且更早拿到計算后數據，響應速度更快了。

3. Web Workers的缺點

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com