事件循环

任务队列类型

• 宏任务：macro task

  • script(整体代码)
  • setTimeout
  • setInterval
  • I/O
  • UI交互事件
  • setImmediate(Node.js 环境)

• 微任务：micro task

  • Promise
  • MutationObserver
  • process.nextTick(Node.js 环境，优先级最高)

• 特殊任务：requestAnimationFrame：总在渲染队列之前执行

渲染队列

1. 收集css，计算样式
2. 创建渲染树，layout布局，设置元素的位置
3. print，渲染为像素展示到页面上

事件循环过程

1. 主线程运行时，执行整体代码，整体代码调用浏览器的各种api，api会向任务队列中加入各种事件。

2. 查询任务队列中是否有任务（宏任务）完成，有则取出一个进行执行。

3. 查询微任务队列是否有任务（微任务）完成，有则取出执行，直到清空微任务队列

4. 检查是否需要进行渲染，需要渲染则先执行requestAnimationFrame方法，然后执行渲染队列

当栈中的代码执行完毕，开始进行循环，重复一下2-4

NodeJs中的事件循环

在11版本之前为固定执行某些阶段，之后与浏览器相同。