彻底搞懂JS事件循环机制(event loop)
知识点:
- js异步实现
- EventLoop、消息队列
- 宏任务 与 微任务
同步模式与异步模式
首先要确定 js是单线程语言,js在设计之初用作用户互动,以及操作DOM。这决定了它只能是单线程(例如多线程操作同一dom,一个删除一个修改,这样会产生冲突)。
但倘若只有同步模式,遇到耗时操作,页面便会阻塞,就像接口请求不到数据,或者图片未加载完成,页面就卡住一直等待。这样显然不现实也不实用。所以异步模式应运而生。
你可能会有疑问,单线程的js是怎么完成异步操作的,可以这么理解js是单线程语言,但运行环境可以开多线程帮助处理(例如: 浏览器,node…)。js后推出的Worker类,也是这么实现的。
先来一道热身题,看看你的答案与 console 记过是否一致
倘若你的答案不正确,我帮你分析一下js代码运行的顺序
- 首先运行主线程。console.log同步代码直接压入执行栈,执行并弹出,页面打印 global begin
- 遇到setTImeout异步代码,函数进入event Table(异步事件注册表)并注册函数,webAPIs(浏览器)帮助我们倒计时,倒计时结束,再将回调函数放入event Queue(事件队列,消息队列),等待主线程运行完毕,会自动将队列里的任务放入主线程继续执行
- timer1、timer2倒计时后放入队列,主线程继续执行,打印global end
- 因为timer2的倒计时短,所以提前放入队列,所以打印timer2 invoke,然后注册inner开始倒计时。完后打印timer1 invoke。
- 最后再去队列取事件,打印inner invoke
怎么样,学废了嘛~~看完这个你对同步异步应该有了初步的了解
这里有一个大坑,例如setTimeout设置3000,延时3秒操作,但通常不是严格3s后便会执行,4s?5s?
之所以这样是因为,回调函数3s后放入队列,等待主线程完成才会执行。主线程的执行时间那就不知道了,你能一直阻塞。。。。
开发经常用的小技巧:setTimeout(fn,0) ,代码放入队列,等待主线程完成再执行。
提一嘴规则其实没有0 最低按4ms处理
EventLoop
所谓事件环,就是三步不断循环的js的执行闭环
- 同步主线程
- 异步函数放入eventTable注册,等待完成后放入eventQueue
- 同步主线程完成,取eventQueue放入主线程
宏任务(Tasks) 与微任务(Microtasks)
两个任务皆为 异步任务,区别就是执行顺序。
我总结一句话,消息队列 有微先走微,微可插宏队。
- 宏任务:script(主线程)、setTimeout、setInterval、setImmediate
- 微任务:Promise的then(promise传入的执行函数会立即执行属于同步)、process.nextTick(node环境)、Object.observe(已废弃)、 MutationObserver(观测dom变化)
给你一道题慢慢理解吧
Promise.resolve().then(()=>{console.log('Promise1') setTimeout(()=>{console.log('setTimeout2')},0)
})setTimeout(()=>{console.log('setTimeout1')Promise.resolve().then(()=>{console.log('Promise2') })
},0)// Promise1,setTimeout1,Promise2,setTimeout2
题目解析:
- 先走主线程,promise直接resolve,then里面函数属于异步微任务, setTimeout1属于异步宏任务,0延迟后,都放入事件环
- 当主线程走完,将事件环内的函数放入主线程,先微后宏,打印Promise1,然后再次遇到setTimeout,放入事件环。
- setTimeout1回调执行, 打印setTimeout1,遇到promise放入事件环,主线程第二遍走完,现在事件环有 setTimeout2和Promise2。
- 微任务可插队宏任务,先打印 Promise2,再打印 setTimeout2
终极题目
这个搞会了基本没人考得住你 (node版本太低,会和高版本出现答案不同的情况)。
不懂了评论基本会回
console.log('1');
setTimeout(function() {console.log('2');process.nextTick(function() {console.log('3');})new Promise(function(resolve) {console.log('4');resolve();}).then(function() {console.log('5')})
})
process.nextTick(function() {console.log('6');
})
new Promise(function(resolve) {console.log('7');resolve();
}).then(function() {console.log('8')
})setTimeout(function() {console.log('9');process.nextTick(function() {console.log('10');})new Promise(function(resolve) {console.log('11');resolve();}).then(function() {console.log('12')})
})
node环境执行答案:1、7、6、8、2、4、3、5、9、11、10、12
彻底搞懂JS事件循环机制(event loop)相关推荐
- 一分钟搞懂js事件循环
宏任务与微任务: 异步任务分为 宏任务(macrotask) 与 微任务 (microtask),不同的API注册的任务会依次进入自身对应的队列中,然后等待 Event Loop 将它们依次压入执行 ...
- 事件循环机制(event loop)
目录 前言 一.事件循环概述 二.进程和线程 三.为什么JavaScript是单线程? 四.JavaScript如何解决单线程阻塞问题? 五.JavaScript 运行机制 六.任务队列 task q ...
- 带你了解事件循环机制(Event Loop)
什么是事件循环机制? 事件循环分为两种,分别是浏览器事件循环和node.js事件循环,本文主要对浏览器事件循环进行描述. 我们都知道JavaScript是一门单线程语言,指主线程只有一个.Event ...
- js 循环 等待异步执行完再执行_JS异步执行机制——事件循环(Event Loop)
JS异步执行机制--事件循环(Event Loop) 本文首发地址: 前端基础 | JS异步执行机制--事件循环(Event Loop)www.brandhuang.com 先祭出一段代码,你清楚它 ...
- js 异步执行_JS异步执行机制——事件循环(Event Loop)
JS异步执行机制--事件循环(Event Loop) 本文首发地址: 前端基础 | JS异步执行机制--事件循环(Event Loop)www.brandhuang.com 先祭出一段代码,你清楚它 ...
- JS事件循环机制:同步与异步任务 之 宏任务 微任务
JS事件循环机制:同步与异步任务 之 宏任务 微任务 阅读目录 javascript事件循环 setTimeout和setInterval中的执行时间 宏任务和微任务 javascript是单线程,一 ...
- 一篇文章彻底搞懂Android事件分发机制
本文讲的是一篇文章彻底搞懂Android事件分发机制,在android开发中会经常遇到滑动冲突(比如ScrollView或是SliddingMenu与ListView的嵌套)的问题,需要我们深入的了解 ...
- js事件循环机制(await-async-事件循环)
await和async 异步函数 async function async关键字用于声明一个异步函数: async是asynchronous单词的缩写,异步.非同步: sync是synchronous ...
- 彻底搞懂 JS 中 this 机制
彻底搞懂 JS 中 this 机制 摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...
最新文章
- 全美人工智能研究生院排名出炉:CMU第一,MIT第二
- 单例设计模式八种方式——5) 懒汉式(线程安全,同步代码块) 6) 双重检查 7) 静态内部类 8) 枚举
- HDU 1242 Rescue BFS+优先队列
- 和虫师一起学python(7)
- qml自定义switch_QML官方系列教程——Qt Quick Controls Styles
- hibernate下载
- windows中VS卸载opencv配置,重新安装其他版本
- 深度学习的推荐模型(DLRMs):设计孪生掩码层高效学习维度自适应的Embedding...
- html给主题设置背景色,css如何设置元素的背景色?
- 统计各班参加补考的人数
- E-mail和IM真的应该被监控么?
- 通过crontab定时执行shell脚本教程
- WPS Excel JS宏简单使用
- Matlab 曲线拟合之polyfit与polyval函数
- linux 如何停止mysql,linux下如何启动/停止/重启mysql:
- 嵌入式linux检测U盘拔插
- 拉取 gcr.io 镜像,如 Kubernetes,istio 等
- oauth2单点登录总结
- 缺少包含@author的注释信息解决方法
- 神兵利器——使用LINQ to SQL检索和操作数据库