深入分析JavaScript 事件循环(Event Loop)


Posted in Javascript onJune 19, 2020

事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑。

众所周知,JS是单线程的,即同一时间只能运行一个任务。一般情况下这不会引发问题,但是如果我们有一个耗时较多的任务,我们必须等该任务执行完毕才能进入下一个任务,然而等待的这段时间常常让我们无法忍受,因为我们这段时间什么都不能做,包括页面也是锁死状态。

好在,时代在进步,浏览器向我们提供了JS引擎不具备的特性:Web API。Web API包括DOM API、定时器、HTTP请求等特性,可以帮助我们实现异步、非阻塞的行为。我们可以通过异步执行任务的方法来解决单线程的弊端,事件循环为此而生。

提问QAQ:为什么JavaScript是单线程的?

多个线程表示您可以同时独立执行程序的多个部分。确定一种语言是单线程还是多线程的最简单方法是看它拥有有多少个调用堆栈。JS 只有一个,所以它是单线程语言。

将JS设计为单线程是由其用途运行环境等因素决定的,作为浏览器脚本语言,JS的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。同时,单线程执行效率高。

1. Event Loop旧印象

大家熟悉的关于事件循环的机制说法大概是:主进程执行完了之后,每次从任务队列里取一个任务执行。如图所示,所有的任务分为同步任务和异步任务,同步任务直接进入任务队列-->主程序执行;异步任务则会挂起,等待其有返回值时进入任务队列从而被主程序执行。异步任务会通过任务队列的机制(先进先出的机制)来进行协调。具体如图所示:

深入分析JavaScript 事件循环(Event Loop)

同步和异步任务分别进入不同的执行环境,同步的进入主线程,即主执行栈,异步的进入任务队列。主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。 上述过程的不断重复就是我们所熟悉的Event Loop (事件循环)。但是promise出现之后,这个说法就不太准确了。

2. Event Loop 后印象

2.1 理论

这里首先用一张图展示JavaScript的事件循环:

深入分析JavaScript 事件循环(Event Loop)

直接看这张图,可能黑人问号已经出现在同学的脑海。。。

这里将task分为两大类,分别是macroTask(宏任务)和microTask(微任务).一次事件循环:先运行macroTask队列中的一个,然后运行microTask队列中的所有任务。接着开始下一次循环(只是针对macroTask和microTask,一次完整的事件循环会比这个复杂的多)。

那什么是macroTask?什么是microTask呢?

JavaScript引擎把我们的所有任务分门别类,一部分归为macroTask,另外一部分归为microTack,下面是类别划分:

macroTask:

  • setTimeout
  • setInterval
  • setImmediate
  • requestAnimationFrame
  • I/O
  • UI rendering

microTask:

  • process.nextTick
  • Promise
  • Object.observe
  • MutationObserver

我们所熟悉的定时器就属于macroTask,仅仅了解macroTask的机制还是不够的。为直观感受两种队列的区别,下面上代码进行实践感知。

2.2 实践

以setTimeout、process.nextTick、promise为例直观感受下两种任务队列的运行方式。

console.log('main1');

process.nextTick(function() {
 console.log('process.nextTick1');
});

setTimeout(function() {
 console.log('setTimeout');
 process.nextTick(function() {
 console.log('process.nextTick2');
 });
}, 0);

new Promise(function(resolve, reject) {
 console.log('promise');
 resolve();
}).then(function() {
 console.log('promise then');
});

console.log('main2');

别着急看答案,先以上面的理论自己想想,运行结果会是啥?

最终结果是这样的:

main1
promise
main2
process.nextTick1
promise then

// 第二次事件循环
setTimeout
process.nextTick2

process.nextTick 和 promise then在 setTimeout 前面输出,已经证明了macroTask和microTask的执行顺序。但是有一点必须要指出的是。上面的图容易给人一个错觉,就是主进程的代码执行之后,会先调用macroTask,再调用microTask,这样在第一个循环里一定是macroTask在前,microTask在后。

但是最终的实践证明:在第一个循环里,process.nextTick1和promise then这两个microTask是在setTimeout这个macroTask里之前输出的,这是因为Promises/A+规范规定主进程的代码也属于macroTask。

主进程这个macroTask(也就是main1、promise和main2)执行完了,自然会去执行process.nextTick1和promise then这两个microTask。这是第一个循环。之后的setTimeout和process.nextTick2属于第二个循环

别看上面那段代码好像特别绕,把原理弄清楚了,都一样 ~

requestAnimationFrame、Object.observe(已废弃) 和 MutationObserver这三个任务的运行机制大家可以从上面看到,不同的只是具体用法不同。重点说下UI rendering。在HTML规范:event-loop-processing-model里叙述了一次事件循环的处理过程,在处理了macroTask和microTask之后,会进行一次Update the rendering,其中细节比较多,总的来说会进行一次UI的重新渲染。

3. 小结

总而言之,记住一次事件循环:先运行macroTask队列中的一个,然后运行microTask队列中的所有任务。接着开始下一次循环。

参考文献:

  • JavaScript Event Loop相关原理解析
  • 深入理解事件循环机制
  • JavaScript运行机制

以上就是深入分析JavaScript 事件循环(Event Loop)的详细内容,更多关于JavaScript 事件循环(Event Loop)的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
原生JS实现微信通讯录
Jun 18 #Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 #Javascript
js实现ajax的用户简单登入功能
Jun 18 #Javascript
JS实现躲避粒子小游戏
Jun 18 #Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 #Javascript
vue实现购物车结算功能
Jun 18 #Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 #Javascript
You might like
深入PHP运行环境配置的详解
2013/06/04 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
JS实现简单日历特效
2020/01/03 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
flask中的wtforms使用方法
2018/07/21 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python语言基本语句用法总结
2019/06/11 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
python判断是空的实例分享
2020/07/06 Python
python3中数组逆序输出方法
2020/12/01 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
写自荐信的七个技巧
2013/10/15 职场文书
医药营销个人求职信
2014/04/12 职场文书
环保标语大全
2014/06/12 职场文书
担保书怎么写 ?
2019/04/22 职场文书
入党心得体会
2019/06/20 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
Java 多线程并发FutureTask
2022/06/28 Java/Android