JS三座大山再学习(三、异步和单线程)
前言
写这一篇的时候,西瓜君查阅了很多资料和文章,但是相当多的文章写的都很简单,甚至互相之间有矛盾,这让我很困扰;同时也让我坚定了要写出一篇好的关于JS异步、单线程、事件循环的文章,下面,让我们一起来学习本文吧,冲鸭~~
单线程
1. 什么是单线程
//栗子1
console.log(1)
console.log(2)
console.log(3)
//输出顺序 1 2 3
单线程即同一时间只做一件事
2. JavaScript为什么是单线程
- 首先是历史原因,在创建 javascript 这门语言时,多进程多线程的架构并不流行,硬件支持并不好。
- 其次是因为多线程的复杂性,多线程操作需要加锁,编码的复杂性会增高。
- 而且,如果同时操作 DOM ,在多线程不加锁的情况下,最终会导致 DOM 渲染的结果不可预期
为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。
异步
1.JS的 同步任务/异步任务
同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务
异步:不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行
//异步的栗子
console.log(1)
setTimeout(()=>{
console.log(2)
},100)
console.log(3)
//输出顺序 1 3 2
2. JavaScript为什么需要异步
如果在JS代码执行过程中,某段代码执行过久,后面的代码迟迟不能执行,产生阻塞(即卡死),会影响用户体验。
JavaScript怎么实现异步
JS 实现异步时通过 事件循环(Event Loop),下面我们来了解一下
1.执行栈与任务队列
先理解几个概念
- JS任务 分为同步任务(synchronous)和异步任务(asynchronous)
- 同步任务都在 JS引擎线程(主线程) 上执行,形成一个执行栈(call stack)
- 事件触发线程 管理一个 任务队列(Task Queue)
- 异步任务 触发条件达成,将 回调事件 放到任务队列(Task Queue)中
- 执行栈中所有同步任务执行完毕,此时JS引擎线程空闲,系统会读取任务队列,将可运行的异步任务回调事件添加到执行栈中,开始执行
当一个JS文件第一次执行的时候,js引擎会 解析这段代码,并将其中的同步代码 按照执行顺序加入执行栈中,然后从头开始执行。如果当前执行的是一个方法,那么js会向执行栈中添加这个方法的执行环境,然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码 执行完毕并返回结果后,js会退出这个执行环境并把这个执行环境销毁,回到上一个方法的执行环境。这个过程反复进行,直到执行栈中的代码全部执行完毕。
举个栗子:
//Event loop
//(1)
console.log(1)
//(2)
setTimeout(()=>{
console.log(2)
},100)
//(3)
console.log(3)
- 先解析整段代码,按照顺序加入到执行栈中,从头开始执行
- 先执行(1),是同步的,所以直接打印 1
- 执行(2),发现是 setTimeout,于是调用浏览器的方法(webApi)执行,在 100ms后将 console.log(2) 加入到任务队列
- 执行(3),同步的,直接打印 3
- 执行栈已经清空了,现在检查任务队列,(执行太快的话可能此时任务队列还是空的,没到100ms,还没有将(2)的打印加到任务队列,于是不停的检测,直到队列中有任务),发现有 console.log(2),于是添加到执行栈,执行console.log(2),同步代码,直接打印 2 (如果这里是异步任务,同样会再走一遍循环:-->任务队列->执行栈)
所以结果是 1 3 2
注:setTimeout/Promise等我们称之为任务源。而进入任务队列的是他们指定的回调
2.宏任务(macro task)与微任务(micro task)
上面的循环只是一个宏观的表述,实际上异步任务之间也是有不同的,分为 宏任务(macro task) 与 微任务(micro task),最新的标准中,他们被称为 task与 jobs
- 宏任务有哪些:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering(渲染)
- 微任务有哪些:process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)
下面我们再详细讲解一下执行过程
执行栈在执行的时候,会把宏任务放在一个宏任务的任务队列,把微任务放在一个微任务的任务队列,在当前执行栈为空的时候,主线程会 查看微任务队列是否有事件存在。如果微任务队列不存在,那么会去宏任务队列中 取出一个任务 加入当前执行栈;如果微任务队列存在,则会依次执行微任务队列中的所有任务,直到微任务队列为空(同样,是吧队列中的事件加到执行栈执行),然后去宏任务队列中取出最前面的一个事件加入当前执行栈...如此反复,进入循环。
注:
- 宏任务和微任务的任务队列都可以有多个
- 当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件,然后再去宏任务队列中取出一个事件。同一次事件循环中,微任务永远在宏任务之前执行。
- 不同的运行环境 循环策略可能有不同,这里探讨chrome、node环境
举个栗子:
//Event loop
//(1)
setTimeout(()=>{
console.log(1)
},100)
//(2)
setTimeout(()=>{
console.log(2)
},100)
//(3)
new Promise(function(resolve,reject){
//(4)
console.log(3)
resolve(4)
}).then(function(val){
//(5)
console.log(val);
})
//(6)
new Promise(function(resolve,reject){
//(7)
console.log(5)
resolve(6)
}).then(function(val){
//(8)
console.log(val);
})
//(9)
console.log(7)
//(10)
setTimeout(()=>{
console.log(8)
},50)
*上面的代码在node和chrome环境的正确打印顺序是 3 5 7 4 6 8 1 2
下面分析一下执行过程:
- 全部代码在解析后加入执行栈
- 执行(1),宏任务,调用webapi setTimeout,这个方法会在100ms后将回调函数放入宏任务的任务队列
- 执行(2),同(1),但是会比(1)稍后一点
- 执行(3),同步执行new Promise,然后执行(4),直接打印 3 ,然后resolve(4),然后.then(),把(5)放入微任务的任务队列
- 执行(6),同上,先打印 5 ,再执行resolve(6),然后.then()里面的内容(8)加入到微任务的任务队列
- 执行(9),同步代码,直接打印 7
- 执行(10),同(1)和(2),只是时间更短,会在 50ms 后将回调 console.log(8) 加入宏任务的任务队列
- 现在执行栈清空了,开始检查微任务队列,发现(5),加入到执行栈执行,是同步代码,直接打印 4
- 任务队列又执行完了,又检查微任务队列,发现(8),打印 6
- 任务队列又执行完了,检查微任务队列,没有任务,再检查宏任务队列,此时如果超过了50ms的话,会发现 console.log(8) 在宏任务队列中,于是执行 打印 8
- 依次打印 1 2
注:因为渲染也是宏任务,需要在一次执行栈执行完后才会执行渲染,所以如果执行栈中同时有几个同步的改变同一个样式的代码,在渲染时只会渲染最后一个
结语
写到这里,仍然觉得还有很多知识点没有写出来,但是想写又不知道从哪里入手。于是决定今天就写到这里,日后再做补充。
到这篇,JS三座大山系列就暂时完结了,在这其中自己也学到了很多,希望能继续输出一些有意义的东西,加油,西瓜君~~
参考文章:
https://www.jianshu.com/p/12b9f73c5a4f
https://www.cnblogs.com/cangqinglang/p/8967268.html
如有错误,请斧正
以上
JS三座大山再学习(三、异步和单线程)的更多相关文章
- JS三座大山再学习 ---- 异步和单线程
本文已发布在西瓜君的个人博客,原文传送门 前言 写这一篇的时候,西瓜君查阅了很多资料和文章,但是相当多的文章写的都很简单,甚至互相之间有矛盾,这让我很困扰:同时也让我坚定了要写出一篇好的关于JS异步. ...
- JS三座大山再学习(一、原型和原型链)
原文地址 ## 前言 西瓜君之前学习了JS的基础知识与三座大山,但之后工作中没怎么用,印象不太深刻,这次打算再重学一下,打牢基础.冲鸭~~ 原型模式 JS实现继承的方式是通过原型和原型链实现的,JS中 ...
- JS三座大山再学习 ---- 原型和原型链
本文已发布在西瓜君的个人博客,原文传送门 ## 前言 西瓜君之前学习了JS的基础知识与三座大山,但之后工作中没怎么用,印象不太深刻,这次打算再重学一下,打牢基础.冲鸭~~ 原型模式 JS实现继承的方式 ...
- JS三座大山再学习(二、作用域和闭包)
原文地址 作用域 JS中有两种作用域:全局作用域|局部作用域 栗子1 console.log(name); //undefined var name = '波妞'; var like = '宗介' c ...
- JS三座大山再学习 ---- 作用域和闭包
本文已发布在西瓜君的个人博客,原文传送门 作用域 JS中有两种作用域:全局作用域|局部作用域 栗子1 console.log(name); //undefined var name = '波妞'; v ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
- nodejs 学习三 异步和同步
同步函数 for (let i = 0; i < 10; i ++) { setTimeout(() => { console.log(`${i} ______ ${new Date}`) ...
- JS地毯式学习三
1. 插件是一类特殊的程序 . 他可以扩展浏览器的功能 , 通过下载安装完成 . 比如 , 在线音乐.视频动画等等插件. // 检测非 IE 浏览器插件是否存在function hasPlugin(n ...
- 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制
[原创]分布式之数据库和缓存双写一致性方案解析(三) 正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...
随机推荐
- NetworkManager网络通讯_Example(一)
---恢复内容开始--- 用户手册,范例精讲. 用户手册上给出了一个简单的范例,并指出可以以此为基础进行相开发,再次对范例进行精讲.(NetworkManager对使用unity的轻量级游戏开发有很大 ...
- 11 一步一步Zabbix4.4.0系统教你实现sendEmail邮件报警
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 一步一步Zabbix4.4.0系统教你实现sendEmail邮件报警 sendEmail是一个轻量 ...
- Web for pentester_writeup之XSS篇
Web for pentester_writeup之XSS篇 XSS(跨站脚本攻击) Example 1 反射性跨站脚本,URL中name字段直接在网页中显示,修改name字段, Payload: h ...
- csp-s模拟测试101的T3代码+注释
因为题目过于大神所以单独拿出来说.而且既然下发std了颓代码貌似也不算可耻233 很难讲啊,所以还是写在代码注释里面吧 因为比较认真的写了不少注释,所以建议缩放到80%观看,或者拿到gedit上 1 ...
- CSPS模拟测试59
这场考得我心态爆炸......... 开场T1只会$n^{2}$,然后发现bfs时每个点只需要被更新一次,其他的更新都是没用的. 也就是说,我们可以只更新还没被更新的点? 于是我先YY了一个链表,发现 ...
- zookeeper集群模式安装
服务器节点规划: 节点1:192.168.0.103 节点2:192.168.0.104 节点3:192.168.0.105 安装zookeeper,将zookeeper上传到三个服务器,保存在/ho ...
- php session获取不到的解决方法
php session获取不到的解决方法 因为sesson数据是存在服务器端的硬盘一般临时空间不足 /tmp/ 1 这个需要清空下系统盘就可以了2 你可以在空间充足的地方mkdir 文件夹——你可以使 ...
- javascript 解决默认取整的坑(目前已知的最佳解决方案)
javascript 解决默认取整的坑(目前已知的最佳解决方案) 复现该问题 js在数字操作时总会取更高精度的结果,例如1234/10结果就是123.4,但是在c或者java中整数除以10的结果还是整 ...
- 深入理解 DNS
深入理解 DNS 简介 DNS(Domain Name System)域名系统,它是一个将域名和 IP 地址相互映射的一个分布式数据库,把容易记忆的主机名转换成主机 IP 地址. DNS使用 TCP ...
- 花了几个小时总结了一些容易出错的 Java 知识点!
本文已经收录自 JavaGuide (61k+Star![Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识.欢迎 Star!欢迎骚扰!) 原文地址:https://javag ...