我对js异步执行机制的理解

author author     2023-05-08     150

关键词:

参考技术A

说起JS的异步执行机制,如果百度一下,你首先会发现阮一峰的写过一篇关于异步机制的文章( http://www.ruanyifeng.com/blog/2014/10/event-loop.html ),等你津津有味又一头雾水的看完,然后继续看百度的其他结果,然后会发现,阮一峰的这篇被另一个大牛朴灵给批判了
( http://www.360doc.com/content/14/1011/13/15077656_416048738.shtml )。

由此可见,关于异步执行机制到底是怎么回事,因为涉及到浏览器底层机制,所以不容易彻底了解清楚,就算是大牛阮一峰,也只是通过英文文献来了解,而且一知半解。我的这篇文章只是试图尽可能简单的描述一下JS的异步执行机制,坦白说,我现在并不能完全弄懂这个机制,所以也不能完全解释清这个机制,所以,如果我写的越严谨,就越容易出错,我只能简单但是较模糊的描述一下:

JS的运行环境是一个很复杂的环境,它里面有非常多的复杂的名词事物,用简单又不严谨的说法来说,运行环境里至少有下面这些事物:

有一个国外的web app,专门用来讲解异步事件的门道 Loupe ,这个更接近真实情况。为什么我不讲解这个?因为更复杂了,我们并不打算研究浏览器的底层,不是么?

然后说一下任务队列里的任务。所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,靠主线程自己就可以执行完成的任务;异步任务指的是,主线程执行开始之后,需要靠主线程之外的线程才能完成的任务。由主线程决定是否要动用其他线程。以下内容,不再提栈,只说主线程。

现在说重点:

异步任务的执行机制是:

当主线程遇到一个异步任务,比如一个ajax请求,当主线程执行到 xhr.send() 的时候,这个send命令是立即执行的, 并不会像一些人想象的,拖到所有同步任务的最后面。 然后主线程向http线程发送指令,要求http线程向服务器发送请求。这里强调一下http线程,显然它不是主线程的一部分,因为它可以并发,如果你有100个ajax请求,每个都需要1秒钟,是不是http线程要花100秒呢?并不是,它会并发100个请求,总共耗时大约1.01秒就完成了。

主线程向以http线程为代表的几个线程发送指令之后,主线程就暂时不再管这个ajax任务了,而是去看任务队列里的下一个任务。

http线程发送了请求之后接收反馈,收到之后,形成一个新的事件(可以叫做“我收到啦!”事件),然后插入到回调函数队列中,因为回调函数队列的优先级很低,所以会排到总队列的最后面,其结果就是:主线程把同步任务都完成了,才开始执行异步事件的 回调 注意,并不是异步任务在全体同步任务结束之后才开始,而是异步任务的回调通常在全体同步任务结束之后才开始!异步任务跟异步任务的回调是两回事!是两个任务!一个鲜明的例子就是 setTimeout(fn, 1000) ,计时是从主线程遇到 setTimeout() 任务,然后分配给计时器线程,计时器线程开始干活的时候就开始计时了!只不过要1秒之后 fn 才执行! setTimeout() 和 fn 是两个任务! setTimeout() 是立即执行, fn 才是1秒之后执行。但是 setTimeout() 的执行,人眼是感受不到的,因为并没有什么地方有一个秒表告诉你 setTimeout() 开始执行了;而fn的执行,人眼能感受到,所以人们会错误的以为fn才是异步任务,其实fn并不是, fn 是个回调任务,往往 fn 是同步任务,比如 fn 可能是 console.log(123) ,这怎么会是异步任务。

所以,异步机制是浏览器的两个或以上常驻线程共同完成的,异步请求是JS主线程和其他某个线程共同完成的,JS的执行线程发起异步请求(这时浏览器会开一条新的HTTP请求线程来执行请求,这时JS自己的任务已完成,继续执行线程队列中剩下的其他任务),然后在未来的某一时刻"任务队列"线程监视到之前的发起的HTTP请求已完成, "任务队列"就会把完成事件插入到JS执行队列的尾部等待JS处理

最后专门说说定时触发(settimeout和setinterval)。

定时触发是由浏览器的定时器线程执行的定时计数, 然后在定时时间到达之后,定时器线程把定时处理函数的执行请求插入到JS回调队列的尾端。

这个1到底是100毫秒之后弹出,还是1000毫秒(或更多时间)后弹出呢?又或是1100毫秒之后弹出?

答案是,1000毫秒多一点点之后弹出。

原因:浏览器会先执行setTimeout,也就是开始计时,然后开始执行sometask,执行了1000毫秒,然后去回调队列里看回调任务,alert(1);早就恭候了,因为定时100毫秒之后alert(1)就可以执行了。所以,等1000毫秒的任务完成,1就会立即弹出,所以答案是1000毫秒多一点点之后弹出。

所以用这两个函数的时候,实际的执行时间是大于或等于指定时间的,不保证能准确定时的。

最后强调一下setInterval。比如我希望每100毫秒打印一个1。然后,又有极端情况,就是sometask耗时1000毫秒。你以为sometask结束之后会打出10个1么?并不会,只会打出1个1,因为setInterval第一次读秒结束之后,回调队列出现了一个alert(1),根据之前的理论,并不会执行。又过了100毫秒之后,计时器线程会去观察回调队列是不是已经有了alert(1),如果有,就不再往回调队列里加alert(1),目的就是为了避免回调叠加执行。

总之,你需要记住,异步任务就是主线程在任务队列里看到了这个任务,看了一眼之后就然后安排别的线程帮忙,然后主线程就忙别的去了,别的线程帮忙完事之后,再在队列末尾放一个新任务叫“帮忙完毕”,到此异步任务本身就完事。主任务看到“帮忙完毕”任务之后,就去执行回调,回调执行完,这个异步任务连同回调就全都完事。然后,如果并没有回调。。。没有就没有呗。

js为什么是单线程的?10分钟了解js引擎的执行机制

...理解JS引擎的执行机制1.JS为什么是单线程的?为什么需要异步?单线程又是如何实现异步的呢?2.JS中的eventloop(1)3.JS中的eventloop(2)4.说说setTimeout首先,请牢记2点:(1)JS是单线程语言(2)JS的EventLoop是JS的执行机制。深入了解JS的执行,就等于... 查看详情

javascript是单线程的而且是异步的机制

浏览器中的js程序是单线程的,那异步调用是怎么实现的呢?计时器是靠谁实现的呢?单线程难道是一边执行程序一边计时吗?好了…………之前就有好多的疑问 ,现在按我的理解和大家说一说一、JavaScript单线程  在浏览... 查看详情

js异步编程理解

...,程序的执行顺序与任务的排列顺序是一致的、同步的。异步:每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程... 查看详情

Node.js - 为啥我的一些回调没有异步执行?

...使用回调作为Node和http类的控制流模式的新手问题。根据我对事件循环的理解,所有代码都是阻塞的,i/o是非阻塞的并使用回调,这是一个简单的ht 查看详情

对javascript中异步同步机制以及线程深入底层了解

  今天在网上看到各种对Js异步同步单线程多线程的讨论经过前辈们的洗礼加上鄙人小小的理解就来纸上谈兵一下吧~   Js本身就是单线程的至于为什么Js是单线程的那就要追溯到Js的历史了总而言之由于Js是浏览... 查看详情

js队列(代码片段)

js中的异步队列(micro&macro)js都是靠事件驱动的,js中的事件循环机制是什么呢?只是简单写一下自己的理解,所以不是很全面;js程序执行有主队列以及异步队列两种方式栈中是按照顺序进行执行,对于一段代码的解释,按照不同的类... 查看详情

[js]异步事件及promise运行机制探究

事件分为1、同步事件2、异步事件异步事件又被分为宏任务微任务宏任务1、新程序或子程序被直接执行,如<script>标签里的代码是程序被直接执行,控制台写代码也算程序直接执行。2、事件的回调函数,如onClick,onKeyup的回调... 查看详情

js执行机制

...    js事件循环将任务分为2类:同步任务、异步任务同步任务进入主线程,异步任务进入EventTable并注册函数当指定的事件完成时,EventTable会将这个函数移入EventQueue主线程内的任务执行完 查看详情

js的异步的问题的再次理解

...不做,只有抖着腿的等;*本来语言本身是同步的,之所以是异步执行,是因为在浏览器环境中,调用了浏览器的api,  一,httpajax,是单线程调用了浏览器的进程,由它来发http请求,之后得到了返回值,就插入了一个队列(异步队列),  ... 查看详情

js执行机制(学习笔记)(代码片段)

同步跟异步同步任务:按任务顺序进行执行,上一个执行完毕才会执行下一个任务异步任务:当前一个任务需要等待时,比如SetTimeout(fun,0)会先去执行下一个任务同时进行js的执行机制1.先执行主线程执行栈中的同... 查看详情

js事件循环机制

js是单线程的,但是底层还是有很多其他的线程,比如网络请求线程,事件执行线程,主线程遇到上述的异步任务就会放到事件队列中,等主线程执行完毕后,在执行事件队列中的,异步也就这样这时候产生 查看详情

settimeout的异步传输机制

setTimeout是异步的,在设置完setTimeout后,指定代码会在设定的时间后加入到任务队列,但并不是立即执行,js是单线程语言,所有的代码按顺序执行,即同步执行,同步执行的代码放在执行队列中,而异步执行的setTimeout放在任务... 查看详情

js---执行机制

...个矛盾的命令,浏览器究竟该如何执行呢?2JS为什么需要异步?如果JS中不存在异步,只能自上而下执行,如果上一行解 查看详情

js线程运行机制,与从底层理解为什么我们要在异步任务里面写回调函数(代码片段)

1.进程与线程什么是进程?我们可以在电脑的任务管理器中查看到正在运行的进程,可以认为一个进程就是在运行一个程序,比如用浏览器打开一个网页,这就是开启了一个进程。但是比如打开3个网页,那么... 查看详情

javascript运行机制:eventloop(代码片段)

...JavaScript的代码执行顺序,进而更好的理解JavaScript的异步模式。概述在刚开始学习JavaScript时,我经常会产生两个问题:JavaScript是一门单线程语言,那如何实现异步任务?同步任务和异步任务的执行顺序如何... 查看详情

我对js延迟异步脚本的思考

关于对延迟脚本的思考async和defer属性的脚本,相信大家都听说过,但是他的真正执行细节是什么样子的?很少有文章认真研究它,可能不太有人注重细节,但其实真正有技术含量的工作和项目,对于性能要求极高,那么细节就很重要... 查看详情

javascript异步编年史,从“纯回调”到promise

...ash;—程序的分块执行 一开始学习javascript的时候,我对异步的概念一脸懵逼,因为当时百度了很多文章,但很多各种文章不负责任的把笼统的描述混杂在一起,让我对这个JS中的重要概念难以理解,“异步是非阻塞的&rd... 查看详情

[转]js引擎的执行机制

------------------------------------------------------JS引擎的执行机制 关于JS引擎的执行机制,首先牢记2点:.JS是单线程语言JS的EventLoop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的eventloop关于单线程相对还比较好理解,... 查看详情