前端js中的事件循环eventloop机制详解


Posted in Javascript onMay 15, 2019

前言

我们知道 js 是单线程执行的,那么异步的代码 js 是怎么处理的呢?例如下面的代码是如何进行输出的:

console.log(1);
setTimeout(function() {
 console.log(2);
}, 0);
new Promise(function(resolve) {
 console.log(3);
 resolve(Date.now());
}).then(function() {
 console.log(4);
});
console.log(5);
setTimeout(function() {
 new Promise(function(resolve) {
  console.log(6);
  resolve(Date.now());
 }).then(function() {
  console.log(7);
 });
}, 0);

在不运行的情况可以先猜测下最终的输出,然后展开我们要说的内容。

1. 宏任务与微任务

依据我们多年编写 ajax 的经验:js 应该是按照语句先后顺序执行,在出现异步时,则发起异步请求后,接着往下执行,待异步结果返回后再接着执行。但他内部是怎样管理这些执行任务的呢?

在 js 中,任务分为宏任务(macrotask)和微任务(microtask),这两个任务分别维护一个队列,均采用先进先出的策略进行执行!同步执行的任务都在宏任务上执行。

宏任务主要有:script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)。

微任务主要有:Promise.then、 MutationObserver、 process.nextTick(Node.js 环境)。

具体的操作步骤如下:

  1. 从宏任务的头部取出一个任务执行;
  2. 执行过程中若遇到微任务则将其添加到微任务的队列中;
  3. 宏任务执行完毕后,微任务的队列中是否存在任务,若存在,则挨个儿出去执行,直到执行完毕;
  4. GUI 渲染;
  5. 回到步骤 1,直到宏任务执行完毕;

这 4 步构成了一个事件的循环检测机制,即我们所称的eventloop。

回到我们上面说的代码:

console.log(1);
setTimeout(function() {
 console.log(2);
}, 0);
new Promise(function(resolve) {
 console.log(3);
 resolve(Date.now());
}).then(function() {
 console.log(4);
});
console.log(5);
setTimeout(function() {
 new Promise(function(resolve) {
  console.log(6);
  resolve(Date.now());
 }).then(function() {
  console.log(7);
 });
}, 0);

执行步骤如下:

  1. 执行 log(1),输出 1;
  2. 遇到 setTimeout,将回调的代码 log(2)添加到宏任务中等待执行;
  3. 执行 console.log(3),将 then 中的 log(4)添加到微任务中;
  4. 执行 log(5),输出 5;
  5. 遇到 setTimeout,将回调的代码 log(6, 7)添加到宏任务中;
  6. 宏任务的一个任务执行完毕,查看微任务队列中是否存在任务,存在一个微任务 log(4)(在步骤 3 中添加的),执行输出 4;
  7. 取出下一个宏任务 log(2)执行,输出 2;
  8. 宏任务的一个任务执行完毕,查看微任务队列中是否存在任务,不存在;
  9. 取出下一个宏任务执行,执行 log(6),将 then 中的 log(7)添加到微任务中;
  10. 宏任务执行完毕,存在一个微任务 log(7)(在步骤 9 中添加的),执行输出 7;

因此,最终的输出顺序为:1, 3, 5, 4, 2, 6, 7;

我们在Promise.then实现一个稍微耗时的操作,这个步骤看起来会更加地明显:

console.log(1);
var start = Date.now();
setTimeout(function() {
 console.log(2);
}, 0);
setTimeout(function() {
 console.log(4, Date.now() - start);
}, 400);
Promise.resolve().then(function() {
 var sum = function(a, b) {
  return Number(a) + Number(b);
 }
 var res = [];
 for(var i=0; i<5000000; i++) {
  var a = Math.floor(Math.random()*100);
  var b = Math.floor(Math.random()*200);
  res.push(sum(a, b));
 }
 res = res.sort();
 console.log(3);
})

Promise.then中,先生成一个500万随机数的数组,然后对这个数组进行排序。运行这段代码可以发现:马上会输出1,稍等一会儿才会输出3,然后再输出2。不论等待多长时间输出3,2一定会在3的后面输出。这也就印证了eventloop中的第3步操作,必须等所有的微任务执行完毕后,才开始下一个宏任务。

同时,这段代码的输出很有意思:

setTimeout(function() {
 console.log(4, Date.now() - start); // 4, 1380 电脑状态的不同,输出的时间差也不一样
}, 400);

本来要设定的是400ms后输出,但因为之前的任务耗时严重,导致之后的任务只能延迟往后排。也能说明,setTimeout和setInterval这种操作的延时是不准确的,这两个方法只能大概将任务400ms之后的宏任务中,但具体的执行时间,还是要看线程是否空闲。若前一个任务中有耗时的操作,或者有无限的微任务加入进来时,则会阻塞下一个任务的执行。

2. async-await

从上面的代码中也能看到 Promise.then 中的代码是属于微服务,那么 async-await 的代码怎么执行呢?比如下面的代码:

function A() {
  return Promise.resolve(Date.now());
}
async function B() {
  console.log(Math.random());
  let now = await A();
  console.log(now);
}
console.log(1);
B();
console.log(2);

其实,async-await 只是 Promise+generator 的一种语法糖而已。上面的代码我们改写为这样,可以更加清晰一点:

function B() {
  console.log(Math.random());
  A().then(function(now) {
    console.log(now);
  })
}
console.log(1);
B();
console.log(2);

这样我们就能明白输出的先后顺序了: 1, 0.4793526730678652(随机数), 2, 1557830834679(时间戳);

3. requestAnimationFrame

requestAnimationFrame也属于执行是异步执行的方法,但我任务该方法既不属于宏任务,也不属于微任务。按照MDN中的定义:

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

requestAnimationFrame是GUI渲染之前执行,但在微服务之后,不过requestAnimationFrame不一定会在当前帧必须执行,由浏览器根据当前的策略自行决定在哪一帧执行。

4. 总结

我们要记住最重要的两点:js是单线程和eventloop的循环机制。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 #Javascript
微信小程序的tab选项卡的实现效果
May 15 #Javascript
少女风vue组件库的制作全过程
May 15 #Javascript
vue两组件间值传递 $router.push实现方法
May 15 #Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 #Javascript
详解微信UnionID作用
May 15 #Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 #Javascript
You might like
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
关于php fread()使用技巧
2010/01/22 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
javascript的函数
2007/01/31 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
js中this的用法实例分析
2015/01/10 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
图文详解WinPE下安装Python
2016/05/17 Python
python实现聊天小程序
2018/03/13 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python实现linux下抓包并存库功能
2018/07/18 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
区域总监的岗位职责
2013/11/21 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
食品业务员岗位职责
2014/03/18 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL