本文實例講述了JavaScript運行機制。分享給大家供大家參考，具體如下：

第一次寫博客

目前研一第二學期，大二開始入門前端，然而長久以來都是對于框架的簡單調用，并未對其進行深入研究，因此，這個博客是作為自我督促的開始。這篇博客的內容源于前段時間寫一個微信小程序前端，發現頁面的渲染順序總與自己的預想相違背，因此近期看了一些關于JavaScript運行機制的博客及文檔，有了一些基本的框架，接下來就來詳細看一下我所了解到的內容。

JavaScript執行順序

首先，JavaScript是按照順序，一行一行執行的，且JS只有一條線程，即不可能進行兩條代碼同時執行，也就是說，在一條代碼執行時，它后面的所有代碼都需要等待，直到該代碼執行結束，后面的才能繼續執行。如果是這樣，就會導致用戶體驗度極其不好，例如一個請求發送給服務器，后續代碼就會一直等待，直到服務器返回結果，用戶才能進行新的操作。

這又是怎么回事呢？

詳細解釋JavaScript執行機制JavaScript執行棧

JavaScript是以壓棧的方式進行代碼的執行的，一開始執行時棧內為空，當執行開始，JS引擎會將代碼放入棧底，若該代碼包含其他函數的調用，則將被調用的函數放在棧頂，若該代碼未包含其他函數的調用，則執行該函數，執行完成后出棧，以此類推，最終直到棧為空。

JavaScript的同步任務和異步任務

事實上，真正的JS內部分為同步任務和異步任務，然而這并沒有改變JS單線程的特征。

同步任務：執行后直接返回結果，例：console.log()；c = a + b 異步任務：執行后無法立刻返回結果，需要等待一定時間，才能執行回調函數，對返回結果進行操作

系統來說，JS存在一個主線程，它會首先執行所有同步任務，而異步任務都會先進行注冊，然后主線程不會等待異步任務執行結果的返回，而是繼續執行下面的同步任務（在此過程中，如果異步任務返回結果，接下來的回調函數會放在Event Queue中等待），直到同步任務全部執行完畢，主線程就會從Event Queue讀取任務進行執行。該過程會不斷循環，即事件循環Event Loop。

事件循環是如何發生的

不覺得奇怪嗎，如果按照上述同步任務和異步任務的執行方式，那不是一輪就可以執行完畢嗎，又何來的Event Loop？

這是個小細節，異步任務存在多個時，每一個異步任務返回的結果所需的時間都是不同的，這就存在Event Queue以先進先出的形式將返回結果進行排隊，第一個異步任務返回結果，那么就將其放在隊列的首位，接下來的異步任務緊隨其后，就這樣排成一隊。當主線程空閑時（即同步任務執行完畢后），便從Event Queue中讀取事件，放入主線程執行。而循環來自于，當Event Queue執行完畢后，過了一段時間，又有之前的異步任務返回結果，放到Event Queue中，監控器檢測到Event Queue為非空，主線程又開始執行Event Queue中的任務。

宏任務和微任務

在解釋定義之前，我們先對異步任務進行說明：

對服務器的異步請求：最常見的異步任務，這涉及前后端的交互，需要服務器對請求進行處理，并返回請求結果 setTimeout和setInterval：延時操作，后者為循環操作（都涉及延時值） Promise：JS用來處理異步操作的對象 process.nextTick(callback)：類似node.js版的'setTimeout'，在事件循環的下一次循環中調用 callback 回調函數。

廣義上JS分為同步任務和異步任務，在此對任務進行更精細的定義：

macro-task(宏任務)：包括整體代碼script，setTimeout，setInterval micro-task(微任務)：Promise，process.nextTick

在此，之所以提出宏任務和微任務，是為了更好的理解事件循環！

執行過程：

主線程會按順序先執行第一次循環的宏任務，然后將第一次循環遇到的微任務放入微任務的Event Queue中，將遇到的宏任務放入宏任務Event Queue中，在此特別注意！！第一次循環的宏任務是整體script代碼！??； 然后后執行微任務的Event Queue； 第二次循環時，會從宏任務的Event Queue中取出第一個宏任務，然后執行當前宏任務中包含的代碼，同樣將遇到的微任務放入微任務的Event Queue中，將遇到的宏任務放入宏任務Event Queue中； 再執行當前微任務的Event Queue中的任務； 第三次循環，從宏任務的Event Queue中取出第二個宏任務…(以此循環)

簡而言之，就是先執行宏任務，再執行微任務，特別注意兩點即可：

第一次循環的宏任務是整體script代碼 宏任務隊列是一次循環執行一條宏任務

這里看個例子：

console.log(’1’); setTimeout(function() { console.log(’2’); process.nextTick(function() { console.log(’3’); }) new Promise(function(resolve) { console.log(’4’); resolve(); }).then(function() { console.log(’5’) }) }) process.nextTick(function() { console.log(’6’); }) new Promise(function(resolve) { console.log(’7’); resolve(); }).then(function() { console.log(’8’) }) setTimeout(function() { console.log(’9’); process.nextTick(function() { console.log(’10’); }) new Promise(function(resolve) { console.log(’11’); resolve(); }).then(function() { console.log(’12’) }) }) //作者：ssssyoki //鏈接：https://juejin.im/post/59e85eebf265da430d571f89 //來源：掘金

輸出順序為：

1，7，6，8，2，4，3，5，9，11，10，12

總結

在此博客中，或許包含一些你未曾聽過的名詞或方法，我并未對其進行詳細解釋。之所以如此，是由于，于我個人，在看一些資料時，經常遇到不懂的東西，我會選擇自己進行查閱和理解，這樣更有效于記憶和通透的理解，就跟查單詞是一樣的，如果文本里直接告訴你，反而不會重視。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。