細說event-loop

chen小白發表於2019-02-25

圖解js執行過程

console.log(`Hi`);
setTimeout(function cb1() { 
    console.log(`cb1`);
}, 5000);
console.log(`Bye`);
複製程式碼
  • 動態示意圖
    image
  • 分解過程
  1. 第一步
    image
  2. 第二步
    image

    3.第三步

    image

    4.第四步

    image
  3. 第五步
    image
  4. 第六步
    image
  5. 第七步
    image
  6. 第八步
    image
  7. 第九步
    image
  8. 第十步
    image
  9. 第十一步
    image
  10. 第十二步
    image
  11. 第十三步
    image
  12. 第十四步
    image
  13. 第十五步
    image
  14. 第十六步
    image

擴充套件

  1. 通過了解js函式的執行過程,我們可以更好的理解在監聽頁面滾動事件、視窗大小改動因為它們會產生大量的函式呼叫在callback queue(回撥佇列裡)等待被拉取到Call Stack棧裡執行,容易阻塞頁面、造成假死。使用throttle函式或debounce函式可以減少回撥函式的數量,起到優化的作用。
  2. setTimeout的延遲觸發並不會一定精確,因為回撥棧裡的佇列為空時,才會去拉取setTimeout的函式執行,假設有的函式執行比價耗時,延遲執行的時間到了setTimeout函式也不一定會執行。

參考連結

相關文章