JS 事件循环

63 阅读2分钟

说事件循环之前要先简单了解一下浏览器的进程:

浏览器最主要的进程有:

1、浏览器进程

主要负责界⾯显示、⽤户交互、⼦进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2、网络进程

负责加载⽹络资源。⽹络进程内部会启动多个线程来处理不同的⽹络任务。

3、渲染进程

渲染进程启动后,会开启⼀个渲染主线程,主线程负责执⾏ HTML、CSS、JS 代码。
默认情况下,浏览器会为每个标签⻚开启⼀个新的渲染进程,以保证不同的标签⻚之间不相互影响。

可参见chrome官方说明文档

渲染主线程是如何工作的?

  1. 解析HTML
  2. 解析CSS
  3. 计算样式
  4. 布局
  5. 处理图层
  6. 每秒把页面绘制60次
  7. 执行全局JS代码
  8. 执行事件处理函数
  9. 执行计时器的回调函数等等

下面说回事件循环(Event Loop)

事件循环⼜叫做消息循环,是浏览器渲染主线程的⼯作⽅式。

在 Chrome 的源码中,它开启⼀个不会结束的 for 循环,每次循环从消息队列中取出第⼀个任务执⾏,⽽其他线程只需要在合适的时候将任务加⼊到队列末尾即可。

过去把消息队列简单分为宏队列和微队列,这种说法⽬前已⽆法满⾜复杂的浏览器环境,取⽽代之的是⼀种更加灵活多变的处理⽅式。

根据 W3C 官⽅的解释,每个任务有不同的类型,同类型的任务必须在同⼀个队列,不同的任务可以属于不同的队列。不同任务队列有不同的优先级,在⼀次事件循环中,由浏览器⾃⾏决定取哪⼀个队列的任务。但浏览器必须有⼀个微队列,微队列的任务⼀定具有最⾼的优先级,必须优先调度执⾏。

详细解释来源渡一前端