关于 EventLoop 的简单理解

EventLoop 出现的目的

js 单线程

众所周知 js 是单线程的，那为什么是单线程嘞，作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定 JavaScript 同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

单线程解决方案

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。如果排队是因为计算量大，CPU 忙不过来，倒也算了，但是很多时候 CPU 是闲着的，因为 IO 设备（输入输出设备）很慢（比如 Ajax 操作从网络读取数据），不得不等着结果出来，再往下执行。于是就有了 EventLoop 的出现。

宏任务与微任务从哪里来

微任务

  • Promise ，当调用 Promise.resolve() 或者 Promise.reject() 的时候，会产生微任务。
  • MutationObserver 接口，监听 DOM 节点发生改变的时候，就会产生 DOM 变化记录的微任务。
  • Process.nextTick（Node 独有）

宏任务

  • 渲染事件（如解析 DOM、计算布局、绘制）
  • 用户交互事件（如鼠标点击、滚动页面、放大缩小等）
  • JavaScript 脚本执行事件
  • 网络请求完成、文件读写完成事件

执行顺序图解（图片来自网络）

个人理解

  • js 会先执行主线程任务，遇到微任务就放进微任务队列，遇到宏任务就放入宏任务队列。
  • 主线程代码执行完成后就会从微任务队列中去取微任务执行直到微任务队列清空，
  • 微任务队列完成后就会从宏任务队列中取出宏任务执行，（个人理解：主线程代码就是第一个宏任务） 如主线程任务一般，遇到微任务放入微任务队列，遇到宏任务放入宏任务队列。
  • 重复此过程，这就是事件循环机制。