在學習js執行機制之前,我們可以必須要明確js的乙個特點:就是js的是單繼承的。這一點是非常重要的,方便我們理解後續的知識。
二.js中的任務
因為js是單執行緒的,所以js的任務需要乙個乙個的順序執行,但是有的任務的執行事件很長,那麼它後面的任務也會等待前乙個任務執行完畢才能執行,這就會極大的造成資源浪費(畢竟cpu一直在空閒,而後面的任務卻不能執行)。於是,js的設計者就將js的任務分為了同步任務和非同步任務。
同步任務是指在主線程上執行的任務,只有前乙個任務執行完畢之後才會執行下乙個任務
非同步任務是指不進入主線程,而進入任務佇列的任務,只有當主線程內部的任務執行完了,才會去執行任務佇列的任務。那怎麼知道主線程執行棧為空呢?js引擎存在monitoring process程序,會持續不斷的檢查主線程執行棧是否為空,一旦為空,就會去任務佇列檢查是否有等待被呼叫的函式。
因為js是單執行緒的,所以當有很多任務需要執行時,這是我們就需要考慮一下這多個任務的執行順序了,而想要知道這多個任務的執行順序,首先我們就需要了解js的event loop了,js的event loop執行過程如下:
(1)所有的同步任務都在主線程上執行,形成乙個執行棧
(2)主線程之外還存在乙個「非同步佇列」,只要非同步任務有了執行結果,就在任務佇列內放置乙個事件。
(3)一旦執行棧內的所有同步任務執行完畢,系統就會讀取「任務佇列」,看看佇列裡面有哪些事件,那麼對應的非同步任務,於是結束等待狀態,進入執行棧,開始執行
(4)主線程不斷重複上面的三步
上面的這些語句是比較官方的,所以我們可以用下面的圖和語句來解釋js的執行過程,首先先來一張圖
(1)同步任務和非同步任務會分別進入不同的場所,如果當前任務是同步任務,那麼該任務會進入主線程執行棧,如果當前任務是非同步任務,那麼就會進入event tab並註冊函式
(2)當指定的事情完成後,event tab會將這個函式移入event queue。
(3)當主線程內的任務執行完畢後,就會去event queue讀取對應的函式,進入主程序棧,並執行。
(4)上述過程不斷重複,就是我們常說的event loop。
其實我們在前面已經講過了,js中的任務分為同步任務和非同步任務,但這只是廣義上的區分,而我們對任務有更精細的定義,
不同型別的任務會進入不同的event queue。
事件迴圈的順序決定js**的執行順序。進入整體**script(巨集任務)後,會開始第一次迴圈,接著執行所有的微任務,然後再從巨集任務開始,等到該任務佇列執行完畢,在執行所有的微任務。如此迴圈下去。接下來上圖幫助理解一下
關於上述的執行過程我翻了很多資料,最後得出乙個最終的結論就是:只有巨集任務佇列中的所有任務都執行完之後才會執行微任務,而且同一微任務佇列中,會優先執行process.nexttick,然後再執行promise的then方法。這個地方一定要注意!!!
console.log('');
settimeout(function() )
new promise(function(resolve) ).then(function() )
})process.nexttick(function() )
new promise(function(resolve) ).then(function() )
settimeout(function() )
new promise(function(resolve) ).then(function() )
})
大家可以寫一下這道題的答案(大家都是js大佬,相信一看就知道這道題的答案了),這道題的答案就是
1,7,6,8,9,11,2,4,10,3,12,5
同時來一張執行結果圖。
JS執行機制
js是單執行緒的,settimeout和setinterval是非同步任務,要掛起,不先執行,等同步任務完成之後,再去處理非同步任務 console.log 1 settimeout function 0 console.log 3 console.log 4 輸出 1 3 4 2console.l...
JS執行機制
輸出結果為 1,2,3 js是從上到下執行的 js是單執行緒的,即在同一時間只能做一件事情 遇到同步程式,直接執行 遇到非同步程式,先掛起,等同步程式執行完畢後再執行 同步佇列 優先順序最高 非同步佇列 遇到非同步佇列先掛起,等同步佇列執行完後,再選擇執行非同步佇列的某個 settimeout中的時...
JS執行機制
js單執行緒 在同一時間js只能做一件事。為什麼是單執行緒?如果多執行緒,同時操作乙個dom會出問題。非阻塞 event loop 事件迴圈 任務佇列 同步任務佇列要優先於非同步任務佇列處理。非同步任務被分為巨集任務和微任務。常見的非同步任務分類如下 巨集任務 定時器系列,dom事件 ui互動事件 ...