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