本篇文章為大家展示了怎樣掌握JavaScript執(zhí)行機制，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

崇明網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,崇明網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為崇明近千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的崇明做網(wǎng)站的公司定做！

一、為什么JavaScript是單線程

如果想了解JavaScript為什么是單線程的，我們就要從JavaScript是用來做什么工作的來入手。

JavaScript作為瀏覽器的腳本語言，產(chǎn)出的目的就是為了瀏覽器與用戶進行交互，操作DOM元素，從而提升用戶的交互及體驗感。JavaScript要操作瀏覽器的DOM元素，因此導(dǎo)致JavaScript無法成為多線程語言，我們假設(shè)一個場景，如果JavaScript是多線程語言，兩個線程同時操作一個DOM元素，一個線程需要編輯更新DOM元素，而另一個則是刪除DOM元素節(jié)點，這是瀏覽器應(yīng)該以哪個為準呢？

同一時間只能做同一件事情，因為操作DOM元素的原因，導(dǎo)致單線程是JavaScript這門語言的核心，也是這門語言特點。

HTML5提出Web Worker標準，允許JavaScript腳本創(chuàng)建多個線程，但是子線程完全受主線程控制，且不得操作DOM。即使這樣的改動也并沒有改變js單線程的本質(zhì)。

二、JavaScript中的同步與異步

javaScript的單線程機制，就導(dǎo)致同一時間只能做一件事情。就像一堆人在ATM取款機取款，即使后面再多的人在著急，也只能一個一個的排隊，等待前一個人取完款，才能輪到后一人。

可是這樣會導(dǎo)致如果說前一個任務(wù)消耗時間過長，后一個任務(wù)就會等待非常久，比如，我們需要加載一個數(shù)據(jù)量非常大的Ajax請求，我們不得不等待請求相應(yīng)結(jié)果，再繼續(xù)往下行執(zhí)后續(xù)任務(wù)。

那我們該如何處理這種情況呢？既然我們無法改變JavaScript的單線程機制，我們是否可以將一些耗時久的任務(wù)進行暫時掛起，等到主任務(wù)執(zhí)行完成之后，再將這些掛載的任務(wù)執(zhí)行。JavaScript的作者也想到了這樣的方式，JavaScript擁有了同步任務(wù)與異步任務(wù)。

同步任務(wù)就是，任務(wù)在主線程上進行排隊，下一個任務(wù)必須等待上一個任務(wù)執(zhí)行完成，才可以執(zhí)行。而異步任務(wù)是指，任務(wù)不進入主線程，而進入任務(wù)隊列（task queue）進行等待，進入任務(wù)隊列的任務(wù)只有"任務(wù)隊列"通知主線程，某個異步任務(wù)可以執(zhí)行了，該任務(wù)才會進入主線程執(zhí)行。

三、Event Loop事件循環(huán)機制

JavaScript的所有同步任務(wù)都在主線程上執(zhí)行，形成一個執(zhí)行棧。

任務(wù)隊列是先進先出的原則，先進隊列的事件先執(zhí)行，后進隊列的事件后執(zhí)行。

Event Loop

• 執(zhí)行執(zhí)行棧中的同步任務(wù)。

• 當(dāng)遇到一個異步任務(wù)后不會一直等待其返回結(jié)果，會先將異步任務(wù)進行暫時掛起，繼續(xù)執(zhí)行其他的同步任務(wù)。

• 當(dāng)異步任務(wù)有結(jié)果之后，JavaScript會任務(wù)將添加進任務(wù)隊列中。被添加進任務(wù)隊列中的任務(wù)不會立刻進行回調(diào)執(zhí)行而是等待主線程（執(zhí)行棧）空閑時才加入到執(zhí)行棧中進行回調(diào)執(zhí)行

• 等待執(zhí)行棧中的任務(wù)執(zhí)行完畢。

• 將任務(wù)隊列中的任務(wù)加入執(zhí)行棧后執(zhí)行。

如此反復(fù)，這樣就形成了一個無限的循環(huán)（event loop）。（下圖來自網(wǎng)絡(luò)）

學(xué)習(xí)了 Event Loop 我們一起來看看下面這道題：

setTimeout(function(){
     console.log('setTimeout start')
 });
 new Promise(function(resolve){
     console.log('promise start');
     resolve()
 }).then(function(){
     console.log('promise then')
 });
 console.log('script end');

嘗試按照，上文我們剛學(xué)到的JavaScript執(zhí)行機制去分析

1. 首先執(zhí)行同步任務(wù)，執(zhí)行到setTimeout，但是setTimeout是異步任務(wù)的暫時掛起，等待計時超時，添加進任務(wù)隊列中。

2. 繼續(xù)往下，在執(zhí)行到new Promise，new Promise里面的是同步任務(wù)，打印 "promise start"。

3. 在執(zhí)行到resolve將.then添加進任務(wù)隊列中。

4. 在執(zhí)行 console.log('script end');打印"script end"。

5. 這時主任務(wù)都已經(jīng)執(zhí)行完成，在將異步任務(wù)添加進主任務(wù)中直接執(zhí)行，打印"setTimeout start"，再將.then添加進主任務(wù)中，打印"promise then"。

所以結(jié)果應(yīng)該是：promise start -> script end -> setTimeout start -> promise then 嗎?

親自在瀏覽器執(zhí)行后，結(jié)果居然不是這樣，而是 promise start -> script end -> promise then -> setTimeout start

宏任務(wù)與微任務(wù)

那為什么上文中的結(jié)果為什么跟我們預(yù)想的不一致，為什么 setTimeout start 會在 promise 之后打印。

其實是因為異步的執(zhí)行也是有先后順序的。其實用異步跟同步的方式去劃分任務(wù)隊列的執(zhí)行順序是不準確的。應(yīng)該劃分為 微任務(wù) 與 宏任務(wù)。

• 宏任務(wù)(macro-task)：script 代碼、setTimeout、setInterval

• 微任務(wù)(micro-task)：Promise、process.nextTick

所以說setTimeout是異步任務(wù)中的 宏任務(wù) ，而Promise是異步任務(wù)中的 微任務(wù) 。不管是 微任務(wù) 還是 宏任務(wù),都會進入相應(yīng)的 Event Queue， 接下來我們在看一個流程圖。

我們來稍微理解一下：

• 1. 執(zhí)行宏任務(wù)（script代碼）

• 2. 當(dāng)執(zhí)行宏任務(wù)的時遇到了微任務(wù)，就會將微任務(wù)添加進 Event Queue

• 3. 在當(dāng)前宏任務(wù)執(zhí)行完成后，會查看微任務(wù)的 Event Queue ，并將里面全部的微任務(wù)依次執(zhí)行完

• 4. 在執(zhí)行玩所有的為微任務(wù)之后，繼續(xù)進行第一步，以此循環(huán)

這便也是 javaScript 的運行機制，結(jié)合這個我們再重新的分析一下上面的例子。

• 1. 首先執(zhí)宏任務(wù)（script代碼 ），遇到setTimeout將其添加進宏任務(wù)的Event Queue。

• 2. 繼續(xù)往下，在執(zhí)行到new Promise，打印 "promise start"。

• 3. 在執(zhí)行到resolve，.then是微任務(wù)，添加進微任務(wù)的Event Queue。

• 4. 在執(zhí)行 console.log('script end');打印 "script end"。

• 5. 到這里本輪的宏任務(wù)就已經(jīng)全部執(zhí)行結(jié)束了，這時查找微任務(wù)的 Eevent Queue 是否存在可執(zhí)行的微任務(wù)， 發(fā)現(xiàn)有剛才在第三步添加進去額度.then，執(zhí)行并打印 "promise then"

• 6. 這時第一輪的 event loop 就已經(jīng)徹底結(jié)束了，下一輪 event loop 先執(zhí)行一個宏任務(wù)，發(fā)現(xiàn)宏任務(wù)的Event Queue中有添加進去的setTimeout，執(zhí)行并打印 "setTimeout start"

永遠記住JavaScript是單線程，以前是、現(xiàn)在是、將來也會是。所有的多線程說法都是扯淡。

即使是Event Queue，也只不是實現(xiàn)異步的方式，也是js的執(zhí)行機制。

以后能用JavaScript實現(xiàn)的。都將會用JavaScript來實現(xiàn)。

JavaScript是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動態(tài)效果，讓網(wǎng)頁更加美觀。

上述內(nèi)容就是怎樣掌握JavaScript執(zhí)行機制，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。