对javascript EventLoop事件循环机制不一样的理解
前置知识点:
- 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计
推荐阅读: - js异步编程,Promise实现
推荐阅读: - 堆、栈、队列、执行栈、任务、微任务、事件循环机制♻️
推荐阅读:
事件循环机制
相信读者读完以上推荐的文章后,已经知道
事件循环机制
是怎么一回事了吧,也能从容应对面试。接下来我要谈谈自己的理解:
为什么会有事件循环机制
- js设计之初就是单线程模式,代码也都是顺序执行,当遇到因为大量计算、http请求等需要额外的等待时间时,浏览器用户就会体验到卡顿了,所以所有的设计和改进初衷只有一个就是要快。
事件循环机制的产生
浏览器说我的内核是多线程,可以辅助JS引擎线程啊,Web Worker线程提供大量计算辅助(不能操作DOM),事件触发线程,定时触发器线程, 异步http请求线程。
执行栈(先进后出),由JS引擎线程控制,引用下面这个例子谈谈自己的理解:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18console.log('script start'); setTimeout(function() {
console.log('setTimeout');
}, 0); Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('script end'); // "script end"
// "promise1"
// "promise2"
// "setTimeout"在
ES5
还没有Promise
时代,异步回调很常见,上面例子中,通过解读Promise源码(前端面试必考题Promise的源码解析),我们可以把Promise
转换成如下图式回调(个人理解,文章中的Promise源码也只是模拟,大部分浏览器已经原生支持)。打印完
script start
,script end
主执行栈出栈,如果Promise.resolve().then
换成new Promise(executor)
,脑补Promise
换成回调函数,那么这个函数一执行,executor
函数也就执行了,然后遇到异步回调,回调函数被其它对应的线程接手,启动观察者模式,完成后回调函数被推入事件任务队列,等待执行栈空了进入主线程执行以上这种在异步函数中放同步函数的例子,为了合理解释输出顺序而推出了
microtasks
微任务的概念,请看下面的例子,脑补Promise
换成回调函数,Promise.prototype.then
内部执行了return new Promise()
,js引擎在捕捉到Promise
时,放到了由js引擎自身控制的微任务队列等待执行,也就造成promise1、2、3、4错开打印1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24console.log('script start'); new Promise(function(resolve, reject) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
}); new Promise(function(resolve, reject) {
console.log('promise3');
resolve();
}).then(function() {
console.log('promise4');
}); console.log('script end'); // "promise1"
// "promise3"
// "script end"
// "promise2"
// "promise4"micro 大专栏 对javascript EventLoop事件循环机制不一样的理解tasks
微任务的概念完全为了解释异步函数中放同步函数的场景,而且各类文章和面试都是这种题目和例子,在实际开发过程中,你会在Promise
中这么写么?,在我看来这种比较打印顺序太过于理论,而且可能会混乱你的思绪。就像下面的例子,Promise
的resolve
决定了Promise状态,就像在回调函数中满足了条件才会继续执行,例子中只是用setTimeout
模拟异步请求,用之前的理论你可能觉得setTimeout
被放入了事件任务队列,那没有resolve
的Promise
怎么解释呢?(放到微任务里一直阻碍第一个setTimeout
宏任务执行吗?显然是不可能的,这不是跟设计事件循环机制初衷冲突了么)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22setTimeout(function() {
console.log('setTimeout');
}, 0); new Promise(function(resolve, reject) {
setTimeout(function() { // 模拟异步请求
console.log('promise1');
resolve();
}, 0);
}).then(function() {
console.log('promise2');
}); new Promise(function(resolve, reject) {
// resolve(); 注释掉resolve,使Promise一直处于‘pending’状态
}).then(function() {
console.log('promise2');
}); // "setTimeout"
// "promise1"
// "promise2"个人认为把
Promise
,async/await
脑补成原始的回调函数(模拟源码中模拟异步是用的setTimeout
函数),而js引擎捕捉到setTimeout
,setInterval
就转给定时触发器线程处理,捕捉到XMLHttpReuqest
,fetch
就转给异步http请求线程,跟事件触发线程一起管理着事件任务队列,微任务的概念可以看作是当事件触发线程遇到几乎同时需要把回调函数放到事件任务队列时,Promise
内部的异步标识函数优先级高于setTimeout
函数吧,以上例子中没有执行resolve
的Promise
状态一直处于’pending’,事件触发线程压根没有放入到事件任务队列,总之浏览器会安排的妥妥的,不要打架,虽然js引擎线程只有一个(听我指挥排好队,咱们这都是同步代码执行ms级别,我开了很多其它线程处理需要等待的代码了)。以下例子模拟所谓的几乎同时把回调函数放到事件任务队列,记得把Promise
脑补成原始的回调函数。仿佛回到了没有微任务的时代。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27setTimeout(function() {
console.log('setTimeout');
}, 0); new Promise(function(resolve, reject) {
setTimeout(function() { // 模拟异步请求
console.log('promise1');
resolve();
}, 2000);
}).then(function() {
console.log('promise2');
}); new Promise(function(resolve, reject) {
setTimeout(function() { // 模拟异步请求
console.log('promise3');
resolve();
}, 2000);
}).then(function() {
console.log('promise4');
}); // "setTimeout"
// "promise1"
// "promise2"
// "promise3"
// "promise4"
以上内容纯属未深入了解js情况下的个人理解,感觉是在努力摒弃微任务的概念,回归ES5回调函数时代,便于自身理解事件循环机制而做出的遐想。
多环境下的事件循环机制
在node环境、浏览器环境以及各个不同版本下js引擎处理的方式还不太一样。node比浏览器还复杂些
对javascript EventLoop事件循环机制不一样的理解的更多相关文章
- JavaScript的事件循环机制浅析
前言 JavaScript是一门单线程的弱类型语言,但是我们在开发中,经常会遇到一些需要异步或者等待的处理操作. 类似ajax,亦或者ES6中新增的promise操作用于处理一些回调函数等. 概念 在 ...
- 【运行机制】 JavaScript的事件循环机制总结 eventLoop
0.从个例子开始 //code-01 console.log(1) setTimeout(() => { console.log(2); }); console.log(3); 稍微有点前端经验 ...
- javascript的事件循环机制
JavaScript是一门编程语言,既然是编程语言那么就会有执行时的逻辑先后顺序,那么对于JavaScript来说这额顺序是怎样的呢? 首先我们我们需要明确一点,JavaScript是单线程语言.所谓 ...
- JavaScript 运行机制:Event事件循环机制
JavaScript Event事件循环机制 JS是单线程的,浏览器只分配一个主线程给JS.一次只能执行一个任务,当前任务执行完后在可以执行下一个任务.任务多时,就会形成任务队列排队等待执行.但是非常 ...
- 深入理解JavaScript事件循环机制
前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...
- javascript事件循环机制 浅尝手记
引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必 ...
- selector.select(500); EventLoop及事件循环机制 netty 在半透明做代理网关下 对请求的批处理
Netty框架学习之路(五)—— EventLoop及事件循环机制 - 懋懋之为 - CSDN博客 https://blog.csdn.net/tjreal/article/details/79751 ...
- 深入浅出Javascript事件循环机制
一.JS单线程.异步.同步概念 众所周知,JS是单线程(如果一个线程删DOM,一个线程增DOM,浏览器傻逼了-所以只能单着了),虽然有webworker酱紫的多线程出现,但也是在主线程的控制下.web ...
- 浏览器中的JavaScript事件循环机制
浏览器的事件循环机制是HTML中定义的规范. JavaScript有一个主线程和调用栈,所有的任务都会被放到调用栈等待主线程执行. JS调用栈 是一种先进后出的数据结构.当函数被调用时,会被添加到栈中 ...
随机推荐
- iOS 中UITableView的深理解
例如下图:首先分析一下需求:1.根据模型的不同状态显示不同高度的cell,和cell的UI界面. 2.点击cell的取消按钮时,对应的cell首先要把取消按钮隐藏掉,然后改变cell的高度. 根据需求 ...
- android 获得存储设备状态
1.获取存储器总大小,可用大小 File path= Environment.getExternalStorageDirectory();StatFs fs = new StatFs(path.get ...
- idea maven Running C:\Users\Administrator\AppData\Local\Temp\archetype1tmp
Running C:\Users\Administrator\AppData\Local\Temp\archetype1tmp 在IDEA中通过maven项目管理工具创建javaweb项目的时候一直卡 ...
- 三十三、www服务apache软件
1.前面提到:www服务是一种网页服务,但是网页服务也是需要软件来支撑的,通过软件的形式展示需要的网页,返回给浏览器. www服务软件排名:http://w3techs.com/technologie ...
- 关于Java中注解的总结
注解用来给类声明附加额外信息,可以标注在类.字段.方法等上面,编译器.JVM以及开发人员等都可以通过反射拿到注解信息,进而做一些相关处理 Java中注解的知识结构图 常用注解 @Override ...
- 向通用自动驾驶部门Cruise投资22.5亿美元,软银打得什么主意?
5月29日,加利福尼亚州的一辆特斯拉Model S撞上停在路边的警车.据透露,当时这辆特斯拉正处于自动辅助驾驶即Autopilot模式.而在今年,这已经不是第一次特斯拉自动驾驶模式出问题了.此外,Ub ...
- npm基本语法
npm -version 查看npm版本 npm install <name> 安装node.js的依赖包 npm install <name> @3.0.6 安装版本为3 ...
- 快速进入当前目录的cmd窗口
- 路由配置(route IP
转载于:http://blog.csdn.net/chenlycly/article/details/52141854 使用下面的 route 命令可以查看 Linux 内核路由表. # route ...
- mysql挖掘与探索------第2章 索引1-2 全文索引FULLTEXT
A 显示表的所有索引: show INDEX from phphi_article; B删除索引:alter table phphi_article drop INDEX fullwords; C添加 ...