好程式設計師web前端分享JS引擎的執行機制
好程式設計師web前端分享JS引擎的執行機制,一、JS是單執行緒語言。JS的EventLoop是JS的執行機制。深入瞭解JS的執行,就等於深入瞭解JS裡的eventloop。
1、靈魂三問:JS為什麼是單執行緒的?為什麼需要非同步?單執行緒又是如何實現非同步的呢?
技術的出現,都跟現實世界裡的應用場景密切相關的。同樣的,我們就結合現實場景,來回答這三個問題。
(1)JS為什麼是單執行緒的?
JS最初被設計用在瀏覽器中,那麼想象一下,如果瀏覽器中的JS是多執行緒的。
場景描述:
那麼現在有2個程式,process1process2,由於是多程式的JS,所以他們對同一個dom,同時進行操作。process1刪除了該dom,而process2編輯了該dom,同時下達2個矛盾的命令,瀏覽器究竟該如何執行呢?
這樣想,JS為什麼被設計成單執行緒應該就容易理解了吧。
(2)JS為什麼需要非同步?
如果JS中不存在非同步,只能自上而下執行,如果上一行解析時間很長,那麼下面的程式碼就會被阻塞。對於使用者而言,阻塞就意味著"卡死",這樣就導致了很差的使用者體驗。
所以,JS中存在非同步執行。
(3)JS單執行緒又是如何實現非同步的呢?
既然JS是單執行緒的,只能在一條執行緒上執行,又是如何實現的非同步呢?
是透過的事件迴圈(eventloop),理解了eventloop機制,就理解了JS的執行機制。
2、JS中的eventloop(1)
例1,觀察它的執行順序
console.log(1)setTimeout(function(){console.log(2)},0)console.log(3)
執行結果是:132
也就是說,setTimeout裡的函式並沒有立即執行,而是延遲了一段時間,滿足一定條件後才去執行的,這類程式碼,我們叫非同步程式碼。
所以,這裡我們首先知道了JS裡的一種分類方式,就是將任務分為:同步任務和非同步任務。
按照這種分類方式:JS的執行機制是:
首先判斷JS是同步還是非同步,同步就進入主程式,非同步就進入eventtable
非同步任務在eventtable中註冊函式,當滿足觸發條件後,被推入eventqueue
同步任務進入主執行緒後一直執行,直到主執行緒空閒時,才會去eventqueue中檢視是否有可執行的非同步任務,如果有就推入主程式中
以上三步迴圈執行,這就是eventloop。
所以上面的例子,你是否可以描述它的執行順序了呢?
console.log(1)是同步任務,放入主執行緒裡
setTimeout()是非同步任務,被放入eventtable,0秒之後被推入eventqueue裡
console.log(3是同步任務,放到主執行緒裡
當1、3在控制條被列印後,主執行緒去eventqueue(事件佇列)裡檢視是否有可執行的函式,執行setTimeout裡的函式。
3、JS中的eventloop(2)
所以,上面關於eventloop就是我對JS執行機制的理解,直到我遇到了下面這段程式碼。
例2:
setTimeout(function(){console.log('定時器開始啦')});
newPromise(function(resolve){console.log('馬上執行for迴圈啦');
for(vari=0;i<10000;i++){i==99&&resolve();
}}).then(function(){console.log('執行then函式啦')});console.log('程式碼執行結束');
嘗試按照,上文我們剛學到的JS執行機制去分析:
setTimeout是非同步任務,被放到eventtable
newPromise是同步任務,被放到主程式裡,直接執行列印console.log('馬上執行for迴圈啦')
.then裡的函式是非同步任務,被放到eventtable
console.log('程式碼執行結束')是同步程式碼,被放到主程式裡,直接執行
所以,結果是:馬上執行for迴圈啦---程式碼執行結束---定時器開始啦---執行then函式啦嗎?
親自執行後,結果居然不是這樣,而是:馬上執行for迴圈啦---程式碼執行結束---執行then函式啦---定時器開始啦
那麼,難道是非同步任務的執行順序,不是前後順序,而是另有規定?事實上,按照非同步和同步的劃分方式,並不準確。
而準確的劃分方式是:
macro-task(宏任務):包括整體程式碼script,setTimeout,setInterval
micro-task(微任務):Promise,process.nextTick
JS引擎的執行機制
按照這種分類方式,JS的執行機制是:
執行一個宏任務,過程中如果遇到微任務,就將其放到微任務的“事件佇列”裡
當前宏任務執行完成後,會檢視微任務的“事件佇列”,並將裡面全部的微任務依次執行完
重複以上2步驟,結合eventloop(1)eventloop(2),就是更為準確的JS執行機制了
嘗試按照剛學的執行機制,去分析例2:
首先執行script下的宏任務,遇到setTimeout,將其放到宏任務的“佇列”裡
遇到newPromise直接執行,列印"馬上執行for迴圈啦"
遇到then方法,是微任務,將其放到微任務的“佇列”裡。
列印"程式碼執行結束"
本輪宏任務執行完畢,檢視本輪的微任務,發現有一個then方法裡的函式,列印"執行then函式啦"
到此,本輪的eventloop全部完成。
下一輪的迴圈裡,先執行一個宏任務,發現宏任務的“佇列”裡有一個setTimeout裡的函式,執行列印"定時器開始啦"
所以最後的執行順序是:馬上執行for迴圈啦---程式碼執行結束---執行then函式啦---定時器開始啦
4、談談setTimeout
這段setTimeout程式碼什麼意思?我們一般說:3秒後,會執行setTimeout裡的那個函式
setTimeout(function(){console.log('執行了')},3000)
但是這種說並不嚴謹,準確的解釋是:3秒後,setTimeout裡的函式被會推入eventqueue,而eventqueue(事件佇列)裡的任務,只有在主執行緒空閒時才會執行。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2645452/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端教程分享JavaScript的執行機制!程式設計師Web前端JavaScript
- 好程式設計師web前端分享如何理解JS的單執行緒程式設計師Web前端JS執行緒
- 好程式設計師web前端分享HTML元素強制不換行程式設計師Web前端HTML
- 好程式設計師web前端教程分享js閉包程式設計師Web前端JS
- 好程式設計師web前端教程分享js模板模式程式設計師Web前端JS模式
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS
- 好程式設計師web前端分享js剪下板Clipboard.js 使用程式設計師Web前端JS
- 好程式設計師web前端教程分享js中的模組化二程式設計師Web前端JS
- 好程式設計師web前端教程分享js中的模組化一程式設計師Web前端JS
- 好程式設計師web前端教程分享Vue.js面試題程式設計師Web前端Vue.js面試題
- 好程式設計師web前端教程分享JS基礎知識程式設計師Web前端JS
- 好程式設計師web前端教程分享js reduce方法使用教程程式設計師Web前端JS
- 好程式設計師web前端分享js實現實戰案例程式設計師Web前端JS
- 好程式設計師web前端分享web測試之Js中的變數程式設計師Web前端JS變數
- 好程式設計師web前端分享應該怎樣學好web前端?程式設計師Web前端
- 好程式設計師web前端分享web前端入門知識程式設計師Web前端
- 好程式設計師分享Web前端開發工具程式設計師Web前端
- 好程式設計師web前端教程分享CSS技巧!程式設計師Web前端CSS
- 好程式設計師web前端分享Cookie知識程式設計師Web前端Cookie
- 好程式設計師web前端分享前端 javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享web前端基礎知識程式設計師Web前端
- 好程式設計師web前端教程分享預設行為和拖拽思路程式設計師Web前端
- 好程式設計師web前端教程分享JavaScript面試題程式設計師Web前端JavaScript面試題
- 好程式設計師分享Web前端效能最佳化程式設計師Web前端
- 好程式設計師web前端分享邏輯運算程式設計師Web前端
- 好程式設計師分享Web前端知識之HTML程式設計師Web前端HTML
- 好程式設計師web前端分享常見面試題程式設計師Web前端面試題
- 好程式設計師web前端分享HTML 字符集程式設計師Web前端HTML
- 好程式設計師web前端分享CSS元素型別程式設計師Web前端CSS型別
- 好程式設計師web前端分享HTML基礎篇程式設計師Web前端HTML
- 好程式設計師web前端分享CSS基礎篇程式設計師Web前端CSS
- 好程式設計師web前端分享高度自適應程式設計師Web前端
- 好程式設計師web前端培訓分享JS面試題總結一程式設計師Web前端JS面試題
- 好程式設計師web前端教程分享js檔案引用編碼方式程式設計師Web前端JS
- 好程式設計師web前端學習路線分享Jsonp詳解程式設計師Web前端JSON
- 好程式設計師web前端分享:如何理解web語義化?程式設計師Web前端
- 好程式設計師web前端分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端javascript練習題一程式設計師Web前端JavaScript