说说eventloop

稀土掘金
首页
沸点
课程上新
直播
活动
商城
APP
插件

探索稀土掘金
搜索
创作者中心
vip
会员
6
上学威龙的头像
谈谈浏览器的EventLoop

上学威龙
lv-2
2021年03月21日 21:08 · 阅读 361 编辑
前言
掌握浏览器的EventLoop的知识有助于我们了解浏览器的渲染进程是如何工作的，并且我们以后写代码时 知其然亦能知其所以然。

d6a7fc9ee5480abca4f331e7da76423.jpg

浏览器是如何工作的
我们知道页面的工作是依靠事件循环机制的，那事件循环机制是怎么工作的呢，接下来我们一步一步的进行分析！

我们知道浏览器是一个任务一个任务去执行的，也就是单线程。任务依次执行这很容易理解，但是我们知道在我们操作页面的时候，比如说鼠标的点击事件、键盘的操作事件，这些事件是不固定和不定时的，那浏览器又怎么保证这些时间的实时性和有序性呢。

在这里浏览器是这样子实现的，首先用队列的数据结构来存储任务，队列的结构是先进先出的，能够很好的和浏览器事件搭配使用，我们把新发生的事件推入任务队列的尾部。比如说我们首先用鼠标点击了一个input框，然后我们在input框中输入信息。这时总共有两个事件发生，如下图：

054464125b960a36b5b3f98cc73f323.png

使用了队列这种数据结构后，可以保证事件的顺序的有序性

实时性
那浏览器难道知道我在什么时候会触发一些事件吗？他怎么执行我触发的事件的呢？

浏览器实现这些的基础在于它会不停的轮询去获取队列中的任务来执行，其实就是相当于一个for循环，每次循环都会从队列中获取队头的任务去执行，当执行完这个任务后再次重复上面的步骤，直到任务队列中不存在任务了。如下图所示：

b6976b430a1a76a37c8923c4c379805.png

宏任务和微任务
浏览器把任务分为了宏任务和微任务，下面来讲一下这两种任务，首先是宏任务。

宏任务
宏任务常见的有：
① html的解析事件
② 用户的交互事件，就如同上面的点击事件和键盘输入事件
③ js代码的执行
④ 一些Web Api事件，比如说setTimeout、setInterval等。
普通宏任务的执行流程就像上面说的一样，推入队列的队尾中，依次执行该事件，但是对于像setTimeout这种延时执行的api就不会不同的处理方式。

定时器在eventloop的流程
如果我们像普通宏任务一样把定时器的回调函数推入任务队列中，那么如果排在该定时器前的任务有很多，执行时间超过了定时器设置的执行时间，那么就不能做到 定时 这一特点。所以浏览器特地创建了另外一个专门存放定时器这种宏任务的队列-- 延时队列。

浏览器的主线程会把定时器的id、回调函数、发起时间、延时时间 都推入延时队列中，当事件循环系统在执行一个宏任务时，在执行完该宏任务的时候，就回去检查延时队列中是否有任务已经到期执行，有的话则会执行该任务。为什么总是常说不要用setTimeout去执行一些精度要求比较高的事件，比如说用setTimeout去实现动画，这是因为如果当前任务执行时间过长，那么定时器设置的到期时间就会和预期时间不匹配，造成一些卡顿。

7163bd861bd12909264f97b78999705.png

微任务
微任务主要有，MutationObserver、Promise.then() 等事件。微任务是用来解决异步回调的问题的，每一个宏任务都会携带一个微任务队列，它会在当前宏任务快要执行完将要退出该宏任务的时候去检查微任务队列中是否有任务，有的话则会执行微任务，反之则进入下一个循环。

d2d41e3528bff4483a69e2fd037e4df.png

代码演练
console.log(1);
Promise.resolve().then((res) => {
console.log(2);
});
setTimeout(() => {
Promise.resolve().then((res) => {
console.log(3);
});
console.log(4);
}, 0);
console.log(5);
复制代码
js代码属于宏任务，在当前宏任务下，我们看到了Promise.then()所以我们把它放入该宏任务的微任务队列中，然后遇到了setTimeout定时器，我们会把它放入延时队列中，因为setTimeout也属于宏任务，所以它也会有自己的微任务队列，我们把setTimeout回调函数中的Promise.then()放入它的微任务队列中。然后我们来开始分析：

① 把当前宏任务的js代码执行，首先打印 1，然后会打印 5
② 宏任务中的代码执行完后会去查找它的微任务队列中是否有任务，在这里检查到了一个任务，执行它会输出 2
③ 当前的宏任务已经执行完了，就回去查看延时队列中是否有到期的任务，在这里存在到期的任务，就回去执行它，输出 4
④ 执行完代码后检查微任务队列中是否有任务，在这里有一个Promise.then()的任务，执行输出3

最后打输出结果为：1 5 2 4 3

总结
希望自己的梳理能给各位看官带来一点作用，如果讲的不好，请多多包含，感谢^.

分类：
前端
标签：
浏览器
安装掘金浏览器插件
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
前往安装
评论

热门评论
肚肚的头像
肚肚
lv-3
掘友等级
1年前
“每一个宏任务都携带一个微任务队列”，这句话好像不对。标准里写的是：Each event loop has a microtask queue, which is a queue of microtasks, initially empty. A microtask is a colloquial way of referring to a task that was created via the queue a microtask algorithm.每一个事件循环有一个微任务队列。

上学威龙
（作者）
1年前
我觉得这算是一个标准和实现之间的不同吧，WHATWG标准中也提到浏览器可以有多个任务队列，并且可以给这些队列排优先级，但是实现上只有两种，一个是普通的任务队列，一个是延时队列。
全部评论 3
最新
最热
稀土君的头像
稀土君
lv-8
掘友等级
最酷的 @ 稀土
1年前
你的作品数据较昨天有所变化，赶紧来创作者中心看一下；现在体验专栏新功能还有大额京东卡拿，点击查看：sourl.co ；app用户请升级最新版本应用后在我的页面查看哟！
肚肚的头像
肚肚
lv-3
掘友等级
1年前
“每一个宏任务都携带一个微任务队列”，这句话好像不对。标准里写的是：Each event loop has a microtask queue, which is a queue of microtasks, initially empty. A microtask is a colloquial way of referring to a task that was created via the queue a microtask algorithm.每一个事件循环有一个微任务队列。

上学威龙
（作者）
1年前
我觉得这算是一个标准和实现之间的不同吧，WHATWG标准中也提到浏览器可以有多个任务队列，并且可以给这些队列排优先级，但是实现上只有两种，一个是普通的任务队列，一个是延时队列。
相关推荐
树深遇鹿
8月前
前端
浏览器的EventLoop
177
1
评论
去追光
1年前
浏览器
前端
浏览器的兼容问题及解决方案整理（建议收藏）
1.7w
272
23
渣渣xiong
1年前
面试
一分钟让你透彻理解EventLoop
785
11
1
zxg_神说要有光
6月前
前端
JavaScript
浏览器
浏览器的 5 种 Observer，你用过几种？
1.4w
316
23
Duhai
7月前
前端
浏览器和EventLoop机制
323
3
评论
乐嫣
11月前
JavaScript
看完一定懂的 Event Loop
3121
47
14
瑾江
1年前
JavaScript
浏览器线程-事件循环（Event Loop）
947
12
1
隐冬
1年前
JavaScript
浏览器事件循环EventLoop解析
2451
57
13
已禁用
4年前
Ajax
浏览器
JavaScript
ajax跨域，这应该是最全的解决方案了
9832
713
17
Godlike-meteor
1年前
前端
你可能不知道的 JavaScript Event Loop
450
1
评论
Fairy_妍
4月前
前端
浏览器进程与EventLoop
257
2
评论
侍大城
2年前
Node.js
Event Loop模型理解
2016
6
2
玛朵布莎丹
10月前
JavaScript
前端
浏览器事件循环机制Event Loop
362
2
评论
黑金团队
3年前
CSS
JavaScript
PostCSS
viewport移动端适配
1.7w
195
9
coderbin
1年前
JavaScript
浅谈个人对JavaScript Event Loop的理解
132
点赞
评论
winty
2年前
前端
浏览器
细说浏览器输入URL后发生了什么
2.4w
320
18
张凯宇
1年前
Node.js
Event Loop(首先它是node.js的概念)
138
点赞
评论
wawoweb
1年前
前端
我是这样理解EventLoop的
2351
60
14
林三岁
1年前
前端
一定要弄懂Event Loop
240
点赞
评论
Yeefun
4年前
Chrome
Firefox
CSS
怎麽把＂滚动条＂隐藏？
3.7w
331
22

上学威龙
lv-2
前端切图仔 @ CV
获得点赞 27
文章被阅读 8,383

下载稀土掘金APP
一个帮助开发者成长的社区

相关文章
浏览器与Node的事件循环(Event Loop)有何区别?
1071点赞 · 105评论
微任务、宏任务与Event-Loop
1459点赞 · 112评论
浏览器事件循环机制（event loop）
116点赞 · 11评论
面试经典：Event Loop
158点赞 · 37评论
浏览器事件循环EventLoop解析
57点赞 · 13评论
目录
前言
浏览器是如何工作的
实时性
宏任务和微任务
宏任务
定时器在eventloop的流程
微任务
代码演练
总结