javascript中的event loop事件循环详解


Posted in Javascript onDecember 14, 2018

前言

javascript是单线程的语言,也就是说,同一个时间只能做一件事。而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质

这是今天一个朋友发给我的一个面试题,

感觉还挺有意思的,

写个博客以供分享

先看看这个面试题目:

观察下面的代码,写出输出结果

console.log('0')
setTimeout(function () {
 console.log('1');
});

new Promise(function(resolve,reject){
 console.log('2')
 resolve(3)
}).then(function(val){
 console.log(val)
})
console.log(4)

输出结果: “0” “2” 4 3 “1”

今天主要是分析为什么输出结果是这样的?这就和 javascript 的执行机制密切相关了.

Event Queue 和 Event Loop

javascript 是一门单线程的语言, 这就意味着在执行代码的时候, 都只有一个主线程来处理所有的任务.

我们都知道 javascript 包括同步代码和异步代码, 那么 javascript 是怎么处理这两种情况的呢?

  • 同步和异步任务分别进入不同的执行 场所, 同步的进入主线程,异步的进入 Event Table 并注册函数
  • 当指定的事情完成时, Event Table 会将这个函数(回调函数)移入 Event Queue
  • 主线程内的任务执行完毕为空, 会去 Event Queue 读取对应的函数,进入主线程执行
  • 上述过程会不断重复, 也就是常说的 Event Loop(事件循环)

这里我们引进了 Event Queue 事件队列这一概念. 所有异步操作的回调都会进入到这里. 然后等到主线程空闲, 就会从这里调取回调执行.

setTimeout

setTimeout 相信大家都有使用过, 可以延时执行并且是异步执行的.

但是有时候我们得到的结果往往是代码实际执行的时间比我们想要延时执行的时间要久。这又是为什么呢?

这就和我们之前所说的 Event Loop 有关了, 我们可以来具体看下 setTimeout 的执行步骤:

setTimeout(function () {
asyncFn()
}, 1000);

syncFn()
  • asyncFn 将异步执行函数放在 Event Table, 并且开始计时
  • 开始执行 syncFn, 但是 syncFn 可能需要处理的内容很多, 执行时间超过 1 秒, 但是计时还在继续
  • 计时到达 1 秒, setTimeout 延时完成, asyncFn 进入 Event Queue 事件队列, 但是主线程还在执行, 所以只能等待
  • syncFn 执行完成, 此时 asyncFn 从事件队列中进入主线程执行

所以有时候会出现代码实际执行时间比延时时间长的情况。

宏任务和微任务

之前我们说过异步任务会进入到事件队列中, 不同类型的任务会进入到不同的队列中, 比如宏任务会进入到宏任务队列中, 微任务会进入到微任务队列中.

我们只要记住 当当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件,然后再去宏任务队列中取出一个事件。同一次事件循环中,微任务永远在宏任务之前执行

这时候我们就可以解释一开始的代码执行结果了:

  • 主线程执行按顺序代码
  • 遇到 setTimeout, 回调进入到宏任务队列上
  • 遇到 Promise, 立即执行, then 函数进入到微任务队列
  • 同步代码执行结束, 主线程检查是否存在微任务, 发现 then, 执行
  • 微任务执行完毕, 再去查找宏任务 setTimeout, 执行
  • setTimeout 执行结束, 检查是否存在微任务, 不存在, 结束.

总结

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

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
vue ssr 指南详读
Jun 29 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 #Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 #Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 #Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 #Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 #Javascript
javascript对HTML字符转义与反转义
Dec 13 #Javascript
Web安全之XSS攻击与防御小结
Dec 13 #Javascript
You might like
索尼ICF-SW100收音机评测
2021/03/02 无线电
十天学会php之第七天
2006/10/09 PHP
mysq GBKl乱码
2006/11/28 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP生成plist数据的方法
2015/06/16 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
javascript实现数独解法
2015/03/14 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
js实现简单的秒表
2020/01/16 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python之Sklearn使用入门教程
2021/02/19 Python
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
文员自我评价怎么写
2013/09/19 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
法定代表人身份证明书
2014/09/10 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
调任通知
2015/04/21 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
单独二胎证明
2015/06/24 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python