大話javascript 4期：事件循環(huán)（1）

codergarden 發(fā)布于2019-08-23 16:27 / 3113人閱讀

摘要：腳本執(zhí)行，事件處理等。引擎線程，也稱為內(nèi)核，負(fù)責(zé)處理腳本程序，例如引擎。事件觸發(fā)線程，用來(lái)控制事件循環(huán)可以理解為，引擎線程自己都忙不過(guò)來(lái)，需要瀏覽器另開線程協(xié)助。異步請(qǐng)求線程，也就是發(fā)出請(qǐng)求后，接收響應(yīng)檢測(cè)狀態(tài)變更等都是這個(gè)線程管理的。

一、進(jìn)程與線程

現(xiàn)代操作系統(tǒng)比如Mac OS X，UNIX，Linux，Windows等，都是支持“多任務(wù)”的操作系統(tǒng)。

什么叫“多任務(wù)”呢？簡(jiǎn)單地說(shuō)，就是操作系統(tǒng)可以同時(shí)運(yùn)行多個(gè)任務(wù)。打個(gè)比方，你一邊在用瀏覽器上網(wǎng)，一邊在聽MP3，一邊在用Word趕作業(yè)，這就是多任務(wù)，至少同時(shí)有3個(gè)任務(wù)正在運(yùn)行。還有很多任務(wù)悄悄地在后臺(tái)同時(shí)運(yùn)行著，只是桌面上沒(méi)有顯示而已。

現(xiàn)在，多核CPU已經(jīng)非常普及了，但是，即使過(guò)去的單核CPU，也可以執(zhí)行多任務(wù)。由于CPU執(zhí)行代碼都是順序執(zhí)行的，那么，單核CPU是怎么執(zhí)行多任務(wù)的呢？

答案就是操作系統(tǒng)輪流讓各個(gè)任務(wù)交替執(zhí)行，任務(wù)1執(zhí)行0.01秒，切換到任務(wù)2，任務(wù)2執(zhí)行0.01秒，再切換到任務(wù)3，執(zhí)行0.01秒……這樣反復(fù)執(zhí)行下去。表面上看，每個(gè)任務(wù)都是交替執(zhí)行的，但是，由于CPU的執(zhí)行速度實(shí)在是太快了，我們感覺(jué)就像所有任務(wù)都在同時(shí)執(zhí)行一樣。

真正的并行執(zhí)行多任務(wù)只能在多核CPU上實(shí)現(xiàn)，但是，由于任務(wù)數(shù)量遠(yuǎn)遠(yuǎn)多于CPU的核心數(shù)量，所以，操作系統(tǒng)也會(huì)自動(dòng)把很多任務(wù)輪流調(diào)度到每個(gè)核心上執(zhí)行。

對(duì)于操作系統(tǒng)來(lái)說(shuō)，一個(gè)任務(wù)就是一個(gè)進(jìn)程（Process），比如打開一個(gè)瀏覽器就是啟動(dòng)一個(gè)瀏覽器進(jìn)程，打開一個(gè)記事本就啟動(dòng)了一個(gè)記事本進(jìn)程，打開兩個(gè)記事本就啟動(dòng)了兩個(gè)記事本進(jìn)程，打開一個(gè)Word就啟動(dòng)了一個(gè)Word進(jìn)程。

有些進(jìn)程還不止同時(shí)干一件事，比如Word，它可以同時(shí)進(jìn)行打字、拼寫檢查、打印等事情。在一個(gè)進(jìn)程內(nèi)部，要同時(shí)干多件事，就需要同時(shí)運(yùn)行多個(gè)“子任務(wù)”，我們把進(jìn)程內(nèi)的這些“子任務(wù)”稱為線程（Thread）。

由于每個(gè)進(jìn)程至少要干一件事，所以，一個(gè)進(jìn)程至少有一個(gè)線程。當(dāng)然，像Word這種復(fù)雜的進(jìn)程可以有多個(gè)線程，多個(gè)線程可以同時(shí)執(zhí)行，多線程的執(zhí)行方式和多進(jìn)程是一樣的，也是由操作系統(tǒng)在多個(gè)線程之間快速切換，讓每個(gè)線程都短暫地交替運(yùn)行，看起來(lái)就像同時(shí)執(zhí)行一樣。當(dāng)然，真正地同時(shí)執(zhí)行多線程需要多核CPU才可能實(shí)現(xiàn)。

如果我們要同時(shí)執(zhí)行多個(gè)任務(wù)怎么辦？

有兩種解決方案：

一種是啟動(dòng)多個(gè)進(jìn)程，每個(gè)進(jìn)程雖然只有一個(gè)線程，但多個(gè)進(jìn)程可以一塊執(zhí)行多個(gè)任務(wù)。

還有一種方法是啟動(dòng)一個(gè)進(jìn)程，在一個(gè)進(jìn)程內(nèi)啟動(dòng)多個(gè)線程，這樣，多個(gè)線程也可以一塊執(zhí)行多個(gè)任務(wù)。

當(dāng)然還有第三種方法，就是啟動(dòng)多個(gè)進(jìn)程，每個(gè)進(jìn)程再啟動(dòng)多個(gè)線程，這樣同時(shí)執(zhí)行的任務(wù)就更多了，當(dāng)然這種模型更復(fù)雜，實(shí)際很少采用。

總結(jié)一下就是，多任務(wù)的實(shí)現(xiàn)有3種方式：

多進(jìn)程模式；

多線程模式；

多進(jìn)程+多線程模式。

同時(shí)執(zhí)行多個(gè)任務(wù)通常各個(gè)任務(wù)之間并不是沒(méi)有關(guān)聯(lián)的，而是需要相互通信和協(xié)調(diào)，有時(shí)，任務(wù)1必須暫停等待任務(wù)2完成后才能繼續(xù)執(zhí)行，有時(shí)，任務(wù)3和任務(wù)4又不能同時(shí)執(zhí)行，所以，多進(jìn)程和多線程的程序的復(fù)雜度要遠(yuǎn)遠(yuǎn)高于我們前面寫的單進(jìn)程單線程的程序。

因?yàn)閺?fù)雜度高，調(diào)試?yán)щy，所以，不是迫不得已，我們也不想編寫多任務(wù)。但是，有很多時(shí)候，沒(méi)有多任務(wù)還真不行。想想在電腦上看電影，就必須由一個(gè)線程播放視頻，另一個(gè)線程播放音頻，否則，單線程實(shí)現(xiàn)的話就只能先把視頻播放完再播放音頻，或者先把音頻播放完再播放視頻，這顯然是不行的。

總結(jié)：
1) 進(jìn)程是cpu資源分配的最小單位（是能擁有資源和獨(dú)立運(yùn)行的最小單位）
2) 線程是cpu調(diào)度的最小單位（線程是建立在進(jìn)程的基礎(chǔ)上的一次程序運(yùn)行單位，一個(gè)進(jìn)程中可以有多個(gè)線程）

二、瀏覽器是多進(jìn)程的 瀏覽器包含哪些進(jìn)程

1) Browser進(jìn)程：瀏覽器的主進(jìn)程（負(fù)責(zé)協(xié)調(diào)、主控），只有一個(gè)。作用有

負(fù)責(zé)瀏覽器界面顯示，與用戶交互。如前進(jìn)，后退等

負(fù)責(zé)各個(gè)頁(yè)面的管理，創(chuàng)建和銷毀其他進(jìn)程

將Renderer進(jìn)程得到的內(nèi)存中的Bitmap，繪制到用戶界面上

網(wǎng)絡(luò)資源的管理，下載等

2) 第三方插件進(jìn)程：每種類型的插件對(duì)應(yīng)一個(gè)進(jìn)程，僅當(dāng)使用該插件時(shí)才創(chuàng)建
3) GPU進(jìn)程：最多一個(gè)，用于3D繪制等
4) 瀏覽器渲染進(jìn)程（瀏覽器內(nèi)核）（Renderer進(jìn)程，內(nèi)部是多線程的）：默認(rèn)每個(gè)Tab頁(yè)面一個(gè)進(jìn)程，互不影響。主要作用為

頁(yè)面渲染，腳本執(zhí)行，事件處理等

關(guān)于瀏覽器進(jìn)程問(wèn)題可以簡(jiǎn)單基礎(chǔ)三點(diǎn):

1) 瀏覽器是多進(jìn)程的。
2) 瀏覽器之所以能夠運(yùn)行，是因?yàn)橄到y(tǒng)給它的進(jìn)程分配了資源（cpu、內(nèi)存）。
3) 簡(jiǎn)單點(diǎn)理解，每打開一個(gè)Tab頁(yè)，就相當(dāng)于創(chuàng)建了一個(gè)獨(dú)立的瀏覽器進(jìn)程。

平時(shí) coding 接觸到最多的一個(gè)瀏覽器進(jìn)程是瀏覽器渲染進(jìn)程（瀏覽器內(nèi)核）,它管理著頁(yè)面渲染。腳本執(zhí)行，事件處理等。要同時(shí)處理這么多事情，渲染進(jìn)程顯然是多線程的，它主要包括以下5個(gè)常駐線程：

GUI渲染線程，負(fù)責(zé)渲染瀏覽器界面，解析HTML，CSS，構(gòu)建DOM樹和RenderObject樹，布局和繪制等。

JS引擎線程，也稱為JS內(nèi)核，負(fù)責(zé)處理Javascript腳本程序，（例如V8引擎）。

事件觸發(fā)線程，用來(lái)控制事件循環(huán)（可以理解為，JS引擎線程自己都忙不過(guò)來(lái)，需要瀏覽器另開線程協(xié)助）。

定時(shí)觸發(fā)器線程，瀏覽器定時(shí)計(jì)數(shù)器并不是由JavaScript引擎計(jì)數(shù)的,（因?yàn)镴avaScript引擎是單線程的, 如果處于阻塞線程狀態(tài)就會(huì)影響記計(jì)時(shí)的準(zhǔn)確），JS中常用的setInterval和setTimeout就歸這個(gè)線程管理。

異步http請(qǐng)求線程，也就是ajax發(fā)出http請(qǐng)求后，接收響應(yīng)、檢測(cè)狀態(tài)變更等都是這個(gè)線程管理的。

三、Javascript是單線程的

我們常說(shuō)的JavaScript是單線程的，其實(shí)就是說(shuō)的JS引擎是單線程的，它僅僅是瀏覽器渲染進(jìn)程種的一個(gè)線程。為什么呢？因?yàn)镴avaScript的主要作用是與用戶互動(dòng)，以及操作DOM，如果JavaScript有兩個(gè)線程，一個(gè)線程對(duì)一個(gè)DOM節(jié)點(diǎn)執(zhí)行 A 操作，另一個(gè)線程這個(gè)DOM節(jié)點(diǎn)執(zhí)行 B 操作，那么就會(huì)起沖突，所以JavaScript在前端的應(yīng)用就注定了它是單線程的。

然而JavaScript的單線程特性就注定我們不用它去完成密集的 cpu 運(yùn)算，因?yàn)槊芗?cpu 運(yùn)算耗時(shí)過(guò)長(zhǎng)，阻塞頁(yè)面渲染。為了解決這個(gè)問(wèn)題，HTML5提出 Web Worker 標(biāo)準(zhǔn)，允許JavaScript腳本創(chuàng)建多個(gè)線程，但是子線程完全受主線程控制，且不得操作DOM。

如果你覺(jué)得這篇文章對(duì)你有所幫助，那就順便點(diǎn)個(gè)贊吧，點(diǎn)點(diǎn)關(guān)注不迷路~

黑芝麻哇，白芝麻發(fā)，黑芝麻白芝麻哇發(fā)哈！

前端哇發(fā)哈