深入分析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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
jquery等待效果示例
May 01 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
JS请求servlet功能示例
Jun 01 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
vue-cli3配置与跨域处理方法
Aug 17 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截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
angular4中关于表单的校验示例
2017/10/16 Javascript
React中的render何时执行过程
2018/04/13 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
Python中title()方法的使用简介
2015/05/20 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
Python异常处理操作实例详解
2018/05/10 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
python zip()函数使用方法解析
2019/10/31 Python
Python autoescape标签用法解析
2020/01/17 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
园林毕业生自我鉴定范文
2013/12/29 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
公司年会开场白
2015/06/01 职场文书
执行力心得体会范文
2016/01/11 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB