Js异步机制

JavaScript是一门单线程语言,所谓单线程,就是指一次只能完成一件任务,如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。这种模式的好处是实现起来比较简单,执行环境相对单纯,坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应也就是假死状态,往往就是因为某一段Javascript代码长时间运行比如死循环,导致整个页面卡在这个地方,其他任务无法执行。

执行机制

为了解决上述问题,Javascript将任务的执行模式分为两种:同步Synchronous与异步Asynchronous,同步或非同步,表明着是否需要将整个流程按顺序地完成,阻塞或非阻塞,意味着你调用的函数会不会立刻告诉你结果

同步

同步模式就是同步阻塞,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的。

var i = 100;
while(--i) { console.log(i); }
console.log("while 执行完毕我才能执行");

异步

异步执行就是非阻塞模式执行,每一个任务有一个或多个回调函数callback,前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。浏览器对于每个Tab只分配了一个Js线程,主要任务是与用户交互以及操作DOM等,而这也就决定它只能为单线程,否则会带来很复杂的同步问题,例如假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器无法确定以哪个线程的操作为准。

setTimeout(() => console.log("我后执行"), 0);
// 注意:W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms,此外这与浏览器设定、主线程以及任务队列也有关系,执行时间可能大于4ms,例如老版本的浏览器都将最短间隔设为10毫秒。另外,对于那些DOM的变动尤其是涉及页面重新渲染的部分,通常不会立即执行,而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout()。
console.log("我先执行");

异步机制

首先来看一个例子,与上文一样来测试一个异步执行的操作

setTimeout(() => console.log("我在很长时间之后才执行"), 0);
var i = 3000000000;
while(--i) { }
console.log("循环执行完毕");

本地测试,设置的setTimeout回调函数大约在30s之后才执行,远远大于4ms,我在主线程设置了一个非常大的循环来阻塞Js主线程,注意我并没有设置一个死循环,假如我在此处设置死循环来阻塞主线程,那么设置的setTimeout回调函数将永远不会执行,此外由于渲染线程与JS引擎线程是互斥的,Js线程在处理任务时渲染线程会被挂起,整个页面都将被阻塞,无法刷新甚至无法关闭,只能通过使用任务管理器结束Tab进程的方式关闭页面。

Js实现异步是通过一个执行栈与一个任务队列来完成异步操作的,所有同步任务都是在主线程上执行的,形成执行栈,任务队列中存放各种事件回调(也可以称作消息),当执行栈中的任务处理完成后,主线程就开始读取任务队列中的任务并执行,不断往复循环。

例如上例中的setTimeout完成后的事件回调就存在任务队列中,这里需要说明的是浏览器定时计数器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,如果线程处于阻塞状态就会影响记计时的准确,计数是由浏览器线程进行计数的,当计数完毕,就将事件回调加入任务队列,同样HTTP请求在浏览器中也存在单独的线程,也是执行完毕后将事件回调置入任务队列。通过这个流程,就能够解释为什么上例中setTimeout的回调一直无法执行,是由于主线程也就是执行栈中的代码没有完成,不会去读取任务队列中的事件回调来执行,即使这个事件回调早已在任务队列中。

Event Loop

主线程从任务队列中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event LoopEvent Loop是一个执行模型,在不同的地方有不同的实现,浏览器和NodeJS基于不同的技术实现了各自的Event Loop。浏览器的Event Loop是在HTML5的规范中明确定义,NodeJSEvent Loop是基于libuv实现的。

在浏览器中的Event Loop由执行栈Execution Stack、后台线程Background Threads、宏队列Macrotask Queue、微队列Microtask Queue组成。

  • 执行栈就是在主线程执行同步任务的数据结构,函数调用形成了一个由若干帧组成的栈。
  • 后台线程就是浏览器实现对于setTimeoutsetIntervalXMLHttpRequest等等的执行线程。
  • 宏队列,一些异步任务的回调会依次进入宏队列,等待后续被调用,包括setTimeoutsetIntervalsetImmediate(Node)requestAnimationFrameUI renderingI/O等操作
  • 微队列,另一些异步任务的回调会依次进入微队列,等待后续调用,包括Promiseprocess.nextTick(Node)Object.observeMutationObserver等操作

Js执行时,进行如下流程

  1. 首先将执行栈中代码同步执行,将这些代码中异步任务加入后台线程中
  2. 执行栈中的同步代码执行完毕后,执行栈清空,并开始扫描微队列
  3. 取出微队列队首任务,放入执行栈中执行,此时微队列是进行了出队操作
  4. 当执行栈执行完成后,继续出队微队列任务并执行,直到微队列任务全部执行完毕
  5. 最后一个微队列任务出队并进入执行栈后微队列中任务为空,当执行栈任务完成后,开始扫面微队列为空,继续扫描宏队列任务,宏队列出队,放入执行栈中执行,执行完毕后继续扫描微队列为空则扫描宏队列,出队执行
  6. 不断往复...

实例

// Step 1
console.log(1); // Step 2
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3);
});
}, 0); // Step 3
new Promise((resolve, reject) => {
console.log(4);
resolve();
}).then(() => {
console.log(5);
}) // Step 4
setTimeout(() => {
console.log(6);
}, 0); // Step 5
console.log(7); // Step N
// ... // Result
/*
1
4
7
5
2
3
6
*/
Step 1
// 执行栈 console
// 微队列 []
// 宏队列 []
console.log(1); // 1
Step 2
// 执行栈 setTimeout
// 微队列 []
// 宏队列 [setTimeout1]
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3);
});
}, 0);
Step 3
// 执行栈 Promise
// 微队列 [then1]
// 宏队列 [setTimeout1]
new Promise((resolve, reject) => {
console.log(4); // 4 // Promise是个函数对象,此处是同步执行的 // 执行栈 Promise console
resolve();
}).then(() => {
console.log(5);
})
Step 4
// 执行栈 setTimeout
// 微队列 [then1]
// 宏队列 [setTimeout1 setTimeout2]
setTimeout(() => {
console.log(6);
}, 0);
Step 5
// 执行栈 console
// 微队列 [then1]
// 宏队列 [setTimeout1 setTimeout2]
console.log(7); // 7
Step 6
// 执行栈 then1
// 微队列 []
// 宏队列 [setTimeout1 setTimeout2]
console.log(5); // 5
Step 7
// 执行栈 setTimeout1
// 微队列 [then2]
// 宏队列 [setTimeout2]
console.log(2); // 2
Promise.resolve().then(() => {
console.log(3);
});
Step 8
// 执行栈 then2
// 微队列 []
// 宏队列 [setTimeout2]
console.log(3); // 3
Step 9
// 执行栈 setTimeout2
// 微队列 []
// 宏队列 []
console.log(6); // 6

参考

https://www.jianshu.com/p/1a35857c78e5
https://segmentfault.com/a/1190000016278115
https://segmentfault.com/a/1190000012925872
https://www.cnblogs.com/sunidol/p/11301808.html
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop

Js异步机制的实现的更多相关文章

  1. 从一到面试题了解js异步机制:setTimeout 和 Pronmise

    1.毫无疑问setTimeout是最晚输出的 2.请无视undefined,这是浏览器的返回值. 3.new Promise中并不是异步,而.then()后才是异步.

  2. JavaScript单线程和异步机制

    随着对JavaScript学习的深入和实践经验的积累,一些原理和底层的东西也开始逐渐了解.早先也看过一些关于js单线程和事件循环的文章,不过当时看的似懂非懂,只留了一个大概的印象:浏览器中的js程序时 ...

  3. 深入理解node.js异步编程:基础篇

    ###[本文是基础内容,大神请绕道,才疏学浅,难免纰漏,请各位轻喷] ##1. 概述 目前开源社区最火热的技术当属Node.js莫属了,作为使用Javascript为主要开发语言的服务器端编程技术和平 ...

  4. node.js零基础详细教程(4):node.js事件机制、node异步IO操作

    第四章 建议学习时间3小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...

  5. 浅析JS异步执行机制

    前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面.本文将针对JS异步执行机制进行一个简单的分析. 从一份代码讲起 下面是两个经典的JS定时执行函数,这两个函数的区别相信对JS有 ...

  6. js异步处理工作机制

    js异步处理工作机制   从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的.计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的.我们先来认识一下 ...

  7. 面试 09-02.js运行机制:异步和单线程

    09-02.js运行机制:异步和单线程 #前言 面试时,关于同步和异步,可能会问以下问题: 同步和异步的区别是什么?分别举一个同步和异步的例子 一个关于 setTimeout 的笔试题 前端使用异步的 ...

  8. JS魔法堂:深究JS异步编程模型

    前言  上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...

  9. C“中断” 与 JS“异步回调” 横向对比

    在底层C语言中,有一个非常重要而特别的概念,叫做“中断”.用比喻来说,我正在写着博客,突然我妈打个电话过来,我就离开了键盘去接电话了,然后写博客就中断了,我聊完电话回来再继续写.乍一听似乎并没有什么大 ...

随机推荐

  1. 初学嵌入式Linux

    初学嵌入式Linux,感觉需要学习的东西太多了.把学习过程中的收获和问题记录在这里,算是一份经验吧.     前面利用开发板带的现成的东西step by step让Linux 2.4.19在开发板上跑 ...

  2. Excel表格转Json数据结构

    Excel表格转Json数据结构 辗转了好几个项目,每个项目的导表工具都巨难用,速度慢,潜规则多,扩展性差,不易于调试.Sqlite,Json,Lua,Xml各种格式都用过. 举个例子: 大多数导表工 ...

  3. Linux命令进阶篇-文件查看与查找

    上一篇的博客对于Linux如何在不同目录下跳转和查看目录下内容做出了总结,主要靠cd和ls,很常见也很实用.但是你看到目录下面那么多不同花花绿绿的文件,心里是不是痒痒,是不是想进去一探究竟,有办法! ...

  4. 最全ElasticSearch6.5白金版本从构建ELK、集群搭建到和Mybatis结合操作详细讲解

    1.安装ElasticSearch6.5.1 解压相关的ElasticSearch6.5.1的tar包到目录下,如果我们需要使用JDBC来连接的话是需要到白金版以上的,以下为将基础版破解为白金版的方法 ...

  5. JVM收集器简介

    JVM GC收集器集合:

  6. Unity 随机房间地图生成

    无论是在迷宫还是类似于地牢的游戏地图中,利用程序来生成每次都不一样的地图是一件叫人兴奋不已的事. 这时我们需要解决两个非常重要的随机事件: 1.在一定范围内随机出各不相同但又不能互相重叠的房间 2.优 ...

  7. SecureCRT的主题配置

    SecureCRT是用来远程连接服务器终端的常用软件,由于其本身的主题十分难看,故此经过一番查找,确定了自己喜欢的主题配置,下面是记录自己配置的过程. 修改主题样式 ​ SecureCRT修改主题分两 ...

  8. PyTorch专栏(二)

    专栏目录: 第一章:PyTorch之简介与下载 PyTorch简介 PyTorch环境搭建 第二章:PyTorch之60min入门 PyTorch 入门 PyTorch 自动微分 PyTorch 神经 ...

  9. 线段树(区间合并)HDU - 1540

    题意:输入n,m,给定n个相互连通的村庄,有m个操作,D x,表示破坏x村庄使其与相邻的两个村庄不相通,R 表示修复上一个被破坏的村庄,与相邻的两个村庄联通.Q x表示与x相连的村庄有多少个. 思路: ...

  10. iOS 图片圆角性能

    通常设置圆角方式 imageView.clipsToBounds = YES; imageView.layer.cornerRadius = 50; 这样设置会触发离屏渲染,比较消耗性能.比如当一个页 ...