JavaScript Event Loop
今天要分享的是javascript事件的運行機制，我們知道js是單線程的，但是為什么會是單線程？它又是怎么樣運行的？
帶梯子的直接傳送help i'm stuck in an event-loop
這小哥講得透徹 ??????
想直接看結果可以翻到底部
歷史原因
很早以前網上沖浪越來越流行時，對于開發客戶端腳本的需求也逐漸增大。這時網頁已經不斷地變得更大和更復雜。而更加加劇用戶痛苦的是，僅僅為了簡單的表單有效性驗證，就要與服務器進行多次地往返交互。設想一下，用戶填完一個表單，點擊提交按鈕，等待了 30 秒的處理后，看到的卻是一條告訴你忘記填寫一個必要的字段。
急需開發一種客戶端腳本語言來解決簡單的處理問題。在客戶端處理一部分事情，優化體驗，同時也減輕了服務端的壓力，當初的考慮只是一個腳本類型的輔助操作瀏覽器語言。
但是JavaScript是單線程呢？
不妨反過來想，如果js是多線程會怎么樣？多個線程對同一個dom操作，這該怎么辦？頻繁的操作又該怎么辦？瀏覽器的處理性能問題。所以JavaScript開發出來的原因就決定了是什么。
事件調用機制 call stack
接下來就是我們的重頭戲js調用機制了，由于是單線程語言，這就意味著它只有一個單一的調用堆棧，也就是每次只能做一件事。
就拿比較流行的V8引擎來說，組成由:
- 內存堆(memory heap): 分配內存的地方(可執行代碼)
- 調用棧(call stack): 程序運行時候函數的調用過程
v8.png
JS運行的時候，會有棧內存（stack）和堆內存（heap），當我們用new實例化一個類的時候，這個new出來的對象就保存在heap里面，而這個對象的引用則存儲在stack里。程序通過stack里的引用找到這個對象。例如var a = [1,2,3];，a是存儲在stack里的引用，heap里存儲著內容為[1,2,3]的Array對象。
在這里我們引出調用棧的概念
也就是你所寫的JS代碼是如何執行的，不多逼逼，看代碼
function a() {
console.log('a')
//console.trace()
}
function b() {
a()
}
function c() {
b()
}
c()
這段簡單的代碼，相信都能看出來調用都順序
- 在全局調用了 c()
- c 調用了 b
- b 調用了 a
-
a 調用了console
換成在調用棧就是：如圖 ??
callstack.png -
global => c => b => a => console依次進棧
運行完畢后出棧 -
console => a => b => c => global依次出棧
：可以用console.trace() 在控制臺看到調用棧
嗯哼，很簡單吧
how about
console.log('start')
setTimeout(function(){
console.log('setTimeout')
}, 100)
sleep(100000000)
console.log('end')
這就要說到js異步處理了，為啥要用異步？同步（按照代碼執行順序）執行，setTimeout 100000000，空閑的cpu就要一直等待100000000ms，才繼續執行任務，巨大的資源浪費明顯是不合理的。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')
異步在棧里面是如何調用的？
其實一個圖就能看懂了
- V8 遇到異步函數，函數進棧
- call back 交給WebAPIs
- 函數出棧
- 繼續執行代碼
... - WebAPI判定可以執行了
- call back 進入回調隊列
- 代碼執行完畢，棧清空
- 隊列依次進棧
