細說event-loop

圖解js運行過程

console.log('Hi');
setTimeout(function cb1() { 
    console.log('cb1');
}, 5000);
console.log('Bye');
複製代碼

• 動態示意圖

  

• 分解過程

1. 第一步

   

2. 第二步

   

   3.第三步

   

   4.第四步

   

3. 第五步

   

4. 第六步

   

5. 第七步

   

6. 第八步

   

7. 第九步

   

8. 第十步

   

9. 第十一步

   

10. 第十二步

    

11. 第十三步

    

12. 第十四步

    

13. 第十五步

    

14. 第十六步

    

擴展

1. 經過了解js函數的運行過程，咱們能夠更好的理解在監聽頁面滾動事件、窗口大小改動由於它們會產生大量的函數調用在callback queue（回調隊列裏）等待被拉取到Call Stack棧裏執行，容易阻塞頁面、形成假死。使用throttle函數或debounce函數能夠減小回調函數的數量,起到優化的做用。
2. setTimeout的延遲觸發並不會必定精確，由於回調棧裏的隊列爲空時，纔會去拉取setTimeout的函數執行，假設有的函數執行比價耗時，延遲執行的時間到了setTimeout函數也不必定會執行。

參考連接

• event-loop動畫演示連接
• event-loop-視屏演示
• 理解js執行棧、上下文