细说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执行栈、上下文