JavaScript Event Loop
今天要分享的是javascript事件的運(yùn)行機(jī)制车荔，我們知道js是單線程的，但是為什么會是單線程？它又是怎么樣運(yùn)行的芽突？
帶梯子的直接傳送help i'm stuck in an event-loop
這小哥講得透徹 ??????
想直接看結(jié)果可以翻到底部
歷史原因
很早以前網(wǎng)上沖浪越來越流行時，對于開發(fā)客戶端腳本的需求也逐漸增大董瞻。這時網(wǎng)頁已經(jīng)不斷地變得更大和更復(fù)雜寞蚌。而更加加劇用戶痛苦的是田巴，僅僅為了簡單的表單有效性驗(yàn)證，就要與服務(wù)器進(jìn)行多次地往返交互挟秤。設(shè)想一下壹哺，用戶填完一個表單，點(diǎn)擊提交按鈕艘刚，等待了 30 秒的處理后管宵，看到的卻是一條告訴你忘記填寫一個必要的字段。
急需開發(fā)一種客戶端腳本語言來解決簡單的處理問題攀甚。在客戶端處理一部分事情箩朴，優(yōu)化體驗(yàn)，同時也減輕了服務(wù)端的壓力秋度，當(dāng)初的考慮只是一個腳本類型的輔助操作瀏覽器語言炸庞。
但是JavaScript是單線程呢？
不妨反過來想荚斯，如果js是多線程會怎么樣燕雁？多個線程對同一個dom操作，這該怎么辦鲸拥？頻繁的操作又該怎么辦拐格？瀏覽器的處理性能問題。所以JavaScript開發(fā)出來的原因就決定了是什么刑赶。
事件調(diào)用機(jī)制 call stack
接下來就是我們的重頭戲js調(diào)用機(jī)制了捏浊，由于是單線程語言，這就意味著它只有一個單一的調(diào)用堆棧撞叨，也就是每次只能做一件事金踪。
就拿比較流行的V8引擎來說，組成由:
- 內(nèi)存堆(memory heap): 分配內(nèi)存的地方(可執(zhí)行代碼)
- 調(diào)用棧(call stack): 程序運(yùn)行時候函數(shù)的調(diào)用過程
v8.png
JS運(yùn)行的時候牵敷，會有棧內(nèi)存（stack）和堆內(nèi)存（heap）胡岔，當(dāng)我們用new實(shí)例化一個類的時候，這個new出來的對象就保存在heap里面枷餐，而這個對象的引用則存儲在stack里靶瘸。程序通過stack里的引用找到這個對象。例如var a = [1,2,3];毛肋，a是存儲在stack里的引用怨咪，heap里存儲著內(nèi)容為[1,2,3]的Array對象。
在這里我們引出調(diào)用棧的概念
也就是你所寫的JS代碼是如何執(zhí)行的润匙，不多逼逼诗眨，看代碼
function a() {
console.log('a')
//console.trace()
}
function b() {
a()
}
function c() {
b()
}
c()
這段簡單的代碼，相信都能看出來調(diào)用都順序
- 在全局調(diào)用了 c()
- c 調(diào)用了 b
- b 調(diào)用了 a
-
a 調(diào)用了console
換成在調(diào)用棧就是：如圖 ??
callstack.png -
global => c => b => a => console依次進(jìn)棧
運(yùn)行完畢后出棧 -
console => a => b => c => global依次出棧
：可以用console.trace() 在控制臺看到調(diào)用棧
嗯哼孕讳，很簡單吧
how about
console.log('start')
setTimeout(function(){
console.log('setTimeout')
}, 100)
sleep(100000000)
console.log('end')
這就要說到j(luò)s異步處理了匠楚，為啥要用異步巍膘？同步（按照代碼執(zhí)行順序）執(zhí)行，setTimeout 100000000芋簿，空閑的cpu就要一直等待100000000ms峡懈，才繼續(xù)執(zhí)行任務(wù)，巨大的資源浪費(fèi)明顯是不合理的益咬。so
在這里我就直接給出答案了逮诲，反正你們打開控制臺也能直接看到了
//start
//end
//setTimeout
那么
console.log('start')
setTimeout(function(){
console.log('setTimeout 100')
}, 100)
setTimeout(function(){
console.log('setTimeout 0')
}, 0)
console.log('end')
是0先輸出呢還是100呢？
這樣幽告？
console.log('start')
setTimeout(function(){
console.log('setTimeout 1')
setTimeout(function(){
console.log('setTimeout 3')
}, 0)
}, 0)
setTimeout(function(){
console.log('setTimeout 2')
}, 1000)
console.log('end')
異步在棧里面是如何調(diào)用的梅鹦？
其實(shí)一個圖就能看懂了
- V8 遇到異步函數(shù)，函數(shù)進(jìn)棧
- call back 交給WebAPIs
- 函數(shù)出棧
- 繼續(xù)執(zhí)行代碼
... - WebAPI判定可以執(zhí)行了
- call back 進(jìn)入回調(diào)隊(duì)列
- 代碼執(zhí)行完畢冗锁，棧清空
- 隊(duì)列依次進(jìn)棧
