浏览器事件循环
本文探讨的是浏览器的事件循环,如果你对此颇有心得,欢迎指出本文的错误。如果你学过 NodeJs 的事件循环,请暂时忘记,因为浏览器的事件循环和 NodeJs 的事件循环完全不同。
浏览器的进程模型
浏览器是一个多进程多线程的应用程序,内部工作极其复杂(复杂度接近操作系统)。
当我们打开浏览器时,它会自动启动多个进程。使用 Shift + Esc
打开浏览器任务管理器即可查看,其中有:
浏览器进程
负责界面显示、用户交互、子进程管理,同时提供存储等功能。浏览器进程内部会启动多个线程来处理不同的任务。
界面显示是指除标签页以外的界面,包括地址栏、书签栏、前进后退按钮等,这些界面在每个 Tab 页中都是类似的,所以在浏览器进程中统一维护。
GPU 进程
负责 3D 绘制等。
网络进程
负责网络资源的加载。网络进程内部会启动多个线程来处理不同的网络任务。
插件进程
负责插件的运行。毕竟插件也可能崩溃,所以需要单独的进程来与渲染进程隔离开来。
渲染进程
默认情况下一个 Tab 标签页就对应着一个渲染进程,负责页面渲染、脚本执行、事件处理等。由于进程之间是相互隔离的,所以一个页面的崩溃不会影响其他页面。
渲染进程内部会有多个线程来处理不同的任务,其中最主要的是渲染主线程
注意
还有其他模式,比如:一个站点对应一个渲染进程。在这种模式下,一个站点的所有页面都在同一个渲染进程中。从而减少了进程的数量。
渲染主线程
渲染主线程是渲染进程的主线程,它处理的任务有:
- 解析 HTML
- 解析 CSS
- 计算样式
- 布局
- 处理图层
- 绘制页面(如每秒绘制 60 次页面)
- 执行 JS 代码
- 执行事件处理函数
- 执行定时器回调函数
- ······
要处理这么多的任务,渲染主线程如何进行任务的调度呢?比如下面问题:
- 我正在执行一个 JS 代码,突然有一个事件触发了,我应该先处理哪个?
- 我正在执行一个 JS 代码,突然有一个定时器到期了,我应该先处理哪个?
- 用户点击了按钮,同时有一个定时器到期了,我应该先处理哪个?
渲染主线程想出一个绝妙的主意来处理这个问题:排队
- 在最开始的时候,渲染主线程会进入一个无限循环
- 每次循环会检测消息队列是否有任务存在。如果有,则取出第一个任务执行,执行完进行下一个循环;如果没有,则进入休眠状态。
- 其他所有线程(包括其他进程的线程)可以随时向消息队列中添加任务。新任务会加入到消息队列的末尾。在添加新任务时,如果渲染主线程正在休眠,则会被唤醒,继续循环拿取任务。
整个过程,称之为事件循环(消息循环)。
JS 单线程 & 非阻塞
JS 是一门单线程的语言。 JS 运行在浏览器的渲染主线程中(暂时不考虑 NodeJS),而渲染主线程是一个单线程。
在 JS 刚发明的时候,将 JS 设计成单线程可以简化开发,避免多线程的复杂性。如果 JS 是多线程的,那么两个 JS 线程同时操作 DOM,一个线程删除一个节点,另一个线程又在这个节点上添加一个节点,这样就会出现问题。
随着技术的发展,人们也认识到 JS 单线程的局限性,虽然单线程可以保证程序的执行顺序,但是也限制了程序的执行效率。现在虽然有了 Web Worker,但是 Web Worker 也只是辅助线程,并不能操作 DOM。因此 JS 依然是一门单线程的语言。
JS 是一门非阻塞的语言
非阻塞指的是 JS 在执行的时候,如果遇到了一个异步的任务,比如网络请求、定时器、事件处理函数等,JS 会将这个任务交给浏览器的其他线程去处理,自己继续执行后面的任务。当异步任务完成后,浏览器会将这个任务放到消息队列中,等待渲染主线程调度执行。
JS 是单线程的语言,指的是 JS 代码只能在一个线程中执行,但是 JS 代码执行过程中的某些任务是可以交给其他线程去处理的。
比如setTimeout
、setInterval
交给计时线程处理,addEventListener
交给交互线程处理等等。
JS 会阻碍渲染
上面不是刚说了 JS 是非阻塞的吗?为什么又说 JS 会阻碍渲染呢?
- 非阻塞指的是 JS 以异步的方式执行时不会阻塞渲染主线程,因为异步任务是交给其他线程处理的。
- 而当 JS 以同步的方式执行时,如果执行时间过长,就会阻塞渲染主线程。
下面代码中,当点击按钮时,JS 会执行一个耗时 3s 的死循环,这时候渲染主线程就会被阻塞,导致页面无法响应。
<h1>Hello World</h1>
<button>点击我,3s后改变上方文字</button>
<script>
const h1 = document.querySelector('h1')
const btn = document.querySelector('button')
// 死循环指定的事件
function delay(ms) {
const start = Date.now()
while (Date.now() - start < ms);
}
btn.onclick = function () {
h1.textContent = '谢谢你,Javascript'
delay(3000)
}
</script>
Hello World
事件循环
前面简要介绍了事件循环,下面详细介绍它的过程。
前面谈到了消息队列,说渲染主线程会进入一个无限循环,每次循环会检测消息队列是否有任务存在。这个循环的过程就是事件循环。
其实消息队列并不是一个队列,而是多个任务队列的统称,比如:
微队列
,存放需要最快执行的任务,优先级【最高】交互队列
,存放交互事件的回调函数,优先级【高】延时队列
,存放定时器到达后的回调函数,优先级 【中】- ······
交互队列的优先级比延时队列高是有道理的,因为浏览器认为及时响应用户的交互更重要。
注意
过去曾将任务分为宏任务和微任务,对应的有宏队列和微队列。但随着浏览器复杂度的提升,W3C 不再使用宏队列的说法,而是细分成多个任务队列。微队列依然保留。
微任务有:Promise
、MutationObserver
、process.nextTick
(NodeJS 中的微任务)等。其他基本上都是宏任务。 例如:
// 立即将一个函数添加到微队列中
Promise.resolve().then(() => {
console.log('微任务')
})
W3C 规定:
- 浏览器必须有一个微队列,微队列中的任务优先其他队列中的任务执行
- 每个任务都有一个任务类型,同一类型的任务必须在一个队列里。不同类型的任务可以分属于不同的队列。
常见面试题
- 下面代码的输出是什么?
console.log(1)
setTimeout(() => {
console.log(2)
})
const observer = new MutationObserver(() => {
console.log(4)
})
observer.observe(document.body, {
attributes: true,
})
document.body.setAttribute('id', 'id')
Promise.resolve().then(() => {
console.log(3)
})
解析:首先渲染主线程执行全局 JS 代码,输出 1。然后遇到 setTimeout
,将这个计时任务交给计时线程处理,继续执行后面的代码。遇到 MutationObserver
,将这个微任务添加到微队列中。遇到 Promise
,将这个微任务添加到微队列中。最后执行完全局 JS 代码后,微队列中有两个任务,微队列中的任务优先级最高,所以先执行微队列中的任务,输出 4,3。同时,计时线程中 setTimeout
的任务到期,计时线程将该任务的回调函数包装成延时任务加入到延时队列中,渲染主线程执行完微队列中的任务后执行该任务,最后输出 2。