js線(xiàn)程機(jī)制與事件機(jī)制的詳細(xì)介紹（圖文）

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

1.進(jìn)程

進(jìn)程是指程序的一次執(zhí)行,它占有一片獨(dú)有的內(nèi)存空間,可以通過(guò)windows任務(wù)管理器查看進(jìn)程(如下圖)。同一個(gè)時(shí)間里，同一個(gè)計(jì)算機(jī)系統(tǒng)中允許兩個(gè)或兩個(gè)以上的進(jìn)程處于并行狀態(tài)，這是多進(jìn)程。比如電腦同時(shí)運(yùn)行微信，QQ，以及各種瀏覽器等。瀏覽器運(yùn)行是有些是單進(jìn)程，如firefox和老版IE，有些是多進(jìn)程，如chrome和新版IE。

2.線(xiàn)程

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

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

3.進(jìn)程與線(xiàn)程

4.單線(xiàn)程與多線(xiàn)程的優(yōu)缺點(diǎn)?

單線(xiàn)程的優(yōu)點(diǎn):順序編程簡(jiǎn)單易懂

單線(xiàn)程的缺點(diǎn):效率低

多線(xiàn)程的優(yōu)點(diǎn):能有效提升CPU的利用率

多線(xiàn)程的缺點(diǎn):

二、瀏覽器內(nèi)核

瀏覽器的內(nèi)核是指支持瀏覽器運(yùn)行的最核心的程序，分為兩個(gè)部分的，一是渲染引擎，另一個(gè)是JS引擎。現(xiàn)在JS引擎比較獨(dú)立，內(nèi)核更加傾向于說(shuō)渲染引擎。

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

2.內(nèi)核由很多模塊組成

三、定時(shí)器引發(fā)的思考

1. 定時(shí)器真是定時(shí)執(zhí)行的嗎?

我們先來(lái)看個(gè)例子，試問(wèn)定時(shí)器會(huì)保證200ms后執(zhí)行嗎？

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

事實(shí)上，經(jīng)過(guò)了625ms后定時(shí)器才執(zhí)行。定時(shí)器并不能保證真正定時(shí)執(zhí)行，一般會(huì)延遲一丁點(diǎn),也有可能延遲很長(zhǎng)時(shí)間(比如上面的例子)

2.定時(shí)器回調(diào)函數(shù)是在分線(xiàn)程執(zhí)行的嗎?

定時(shí)器回調(diào)函數(shù)在主線(xiàn)程執(zhí)行的, 具體實(shí)現(xiàn)方式下文會(huì)介紹。

四、瀏覽器的事件循環(huán)(輪詢(xún))模型

1. 為什么JavaScript是單線(xiàn)程

JavaScript語(yǔ)言的一大特點(diǎn)就是單線(xiàn)程，也就是說(shuō)，同一個(gè)時(shí)間只能做一件事。那么，為什么JavaScript不能有多個(gè)線(xiàn)程呢？這樣能提高效率啊。

JavaScript的單線(xiàn)程，與它的用途有關(guān)。作為瀏覽器腳本語(yǔ)言，JavaScript的主要用途是與用戶(hù)互動(dòng)，以及操作DOM。這決定了它只能是單線(xiàn)程，否則會(huì)帶來(lái)很復(fù)雜的同步問(wèn)題。比如，假定JavaScript同時(shí)有兩個(gè)線(xiàn)程，一個(gè)線(xiàn)程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線(xiàn)程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器應(yīng)該以哪個(gè)線(xiàn)程為準(zhǔn)？

所以，為了避免復(fù)雜性，從一誕生，JavaScript就是單線(xiàn)程，這已經(jīng)成了這門(mén)語(yǔ)言的核心特征，將來(lái)也不會(huì)改變。
為了利用多核CPU的計(jì)算能力，HTML5提出Web Worker標(biāo)準(zhǔn)，允許JavaScript腳本創(chuàng)建多個(gè)線(xiàn)程，但是子線(xiàn)程完全受主線(xiàn)程控制，且不得操作DOM。所以，這個(gè)新標(biāo)準(zhǔn)并沒(méi)有改變JavaScript單線(xiàn)程的本質(zhì)。

2.Event Loop

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

具體來(lái)說(shuō)，異步執(zhí)行的運(yùn)行機(jī)制如下。（同步執(zhí)行也是如此，因?yàn)樗梢员灰暈闆](méi)有異步任務(wù)的異步執(zhí)行。）

（1）所有同步任務(wù)都在主線(xiàn)程上執(zhí)行，形成一個(gè)執(zhí)行棧（execution context stack）。

（2）主線(xiàn)程之外，還存在一個(gè)"任務(wù)隊(duì)列"（task queue）。只要異步任務(wù)有了運(yùn)行結(jié)果，就在"任務(wù)隊(duì)列"之中放置一個(gè)事件。

（3）一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)讀取"任務(wù)隊(duì)列"，看看里面有哪些事件。那些對(duì)應(yīng)的異步任務(wù)，于是結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開(kāi)始執(zhí)行。

（4）主線(xiàn)程不斷重復(fù)上面的第三步

主線(xiàn)程從"任務(wù)隊(duì)列"中讀取事件，這個(gè)過(guò)程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱(chēng)為Event Loop（事件循環(huán)）

下面這個(gè)例子很好闡釋事件循環(huán)：

 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)//當(dāng)指定的值小于 4 毫秒，則增加到 4ms（4ms 是 HTML5 標(biāo)準(zhǔn)指定的，對(duì)于 2010 年及之前的瀏覽器則是 10ms）
 function fn() {
 console.log('fn()')
 }
 fn()
 console.log('alert()之前')
 alert('------') //暫停當(dāng)前主線(xiàn)程的執(zhí)行, 同時(shí)暫停計(jì)時(shí), 點(diǎn)擊確定后, 恢復(fù)程序執(zhí)行和計(jì)時(shí)
 console.log('alert()之后')

有兩點(diǎn)我們需要注意下：

總結(jié):異步任務(wù)（各種瀏覽器事件、定時(shí)器和Ajax等）都是先添加到“任務(wù)隊(duì)列”（定時(shí)器則到達(dá)其指定參數(shù)時(shí)）。當(dāng) Stack 棧（JavaScript 主線(xiàn)程）為空時(shí)，就會(huì)讀取 Queue 隊(duì)列（任務(wù)隊(duì)列）的第一個(gè)任務(wù)（隊(duì)首），最后執(zhí)行。

五、H5 Web Workers(多線(xiàn)程)

1. Web Workers的作用

正如上面所提到，JavaScript是單線(xiàn)程。當(dāng)一個(gè)頁(yè)面加載一個(gè)復(fù)雜運(yùn)算的 js 文件時(shí)，用戶(hù)界面可能會(huì)短暫地“凍結(jié)”，不能再做其他操作。比如下面這個(gè)例子：

<input type="text" placeholder="數(shù)值" id="number">
<button id="btn">計(jì)算</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) //遞歸調(diào)用
 }
 var input = document.getElementById('number')
 document.getElementById('btn').onclick = function () {
 var number = input.value
 var result = fibonacci(number)
 alert(result)
 }
</script>

很顯然遇到這種頁(yè)面堵塞情況，很影響用戶(hù)體驗(yàn)的，有沒(méi)有啥辦法可以改進(jìn)這種情形？----Web Worker就應(yīng)運(yùn)而生了！

Web Worker 的作用，就是為 JavaScript 創(chuàng)造多線(xiàn)程環(huán)境，允許主線(xiàn)程創(chuàng)建 Worker 線(xiàn)程，將一些任務(wù)分配給后者運(yùn)行。在主線(xiàn)程運(yùn)行的同時(shí)，Worker 線(xiàn)程在后臺(tái)運(yùn)行，兩者互不干擾。等到 Worker 線(xiàn)程完成計(jì)算任務(wù)，再把結(jié)果返回給主線(xiàn)程。這樣的好處是，一些計(jì)算密集型或高延遲的任務(wù)，被 Worker 線(xiàn)程負(fù)擔(dān)了，主線(xiàn)程（通常負(fù)責(zé) UI 交互）就會(huì)很流暢，不會(huì)被阻塞或拖慢。其原理圖如下：

2. Web Workers的基本使用

主線(xiàn)程

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

 var input = document.getElementById('number')
 document.getElementById('btn').onclick = function () {
 var number = input.value
 //創(chuàng)建一個(gè)Worker對(duì)象
 var worker = new Worker('worker.js')
 // 綁定接收消息的監(jiān)聽(tīng)
 worker.onmessage = function (event) {
 console.log('主線(xiàn)程接收分線(xiàn)程返回的數(shù)據(jù): '+event.data)
 alert(event.data)
 }
 // 向分線(xiàn)程發(fā)送消息
 worker.postMessage(number)
 console.log('主線(xiàn)程向分線(xiàn)程發(fā)送數(shù)據(jù): '+number)
 }
 console.log(this) // window

Worker 線(xiàn)程

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

這樣當(dāng)分線(xiàn)程在計(jì)算時(shí)，用戶(hù)界面還可以操作，而且更早拿到計(jì)算后數(shù)據(jù)，響應(yīng)速度更快了。

3. Web Workers的缺點(diǎn)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com