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

发布时间:2025-05-20 06:33:52 发布人:远客网络

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

一、我对JS异步执行机制的理解

说起JS的异步执行机制，如果百度一下，你首先会发现阮一峰的写过一篇关于异步机制的文章（），等你津津有味又一头雾水的看完，然后继续看百度的其他结果，然后会发现，阮一峰的这篇被另一个大牛朴灵给批判了

（）。

由此可见，关于异步执行机制到底是怎么回事，因为涉及到浏览器底层机制，所以不容易彻底了解清楚，就算是大牛阮一峰，也只是通过英文文献来了解，而且一知半解。我的这篇文章只是试图尽可能简单的描述一下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的过程

浏览器怎么执行js的

浏览器执行js的方法：在浏览器地址栏直接执行JavaScript脚本，也可以在浏览器的地址栏中输入JavaScript语句，由浏览器直接执行。如输入：

在微信浏览器里面开启H5网页中执行JS调起支付

在微信浏览器中访问你制作的HTML5的介面。

介面中使用了微信提供的JS程式码，该程式码可以唤起微信支付，让使用者进行支付。

在微信浏览器中执行js：typeof(WeixinJSBridge)为什么是undefined呢页面需要引入什么js么？

不需要引用js，但是你要这么写：

if(typeofWeixinJSBridge=="undefined"){

if(document.addEventListener){

document.addEventListener('WeixinJSBridgeReady',wxPayCall,false);

}elseif(document.attachEvent){

document.attachEvent('WeixinJSBridgeReady',wxPayCall);

document.attachEvent('onWeixinJSBridgeReady',wxPayCall);

你要在注册一下WeixinJSBridgeReady

functionweixinShareTimeline(title,desc,link,imgUrl)

WeixinJSBridge.invoke('shareTimeline',

如何在IOS的safari浏览器调起微信支付

在浏览器中调起微信支付，一般情况下，是在后台接入微信支付的介面，然后当用户需要支付的时候，在前台显示一个支付的二维码，使用者使用微信支付的扫一扫功能，扫描该二维码，获取相应的支付资讯，使用手机进行支付

如何才能只让网页在微信浏览器里开启

在手机端吗？需要root或者越狱之后，修改预设浏览器的应用为微信客户端就行了。

在微信内建浏览器里面能直接开启的wap网页吗

这个是网站的证书问题跟你的电脑浏览器没有问题一般你认为那个网站上是安全的那么就是安全的；一般商业网站才会使用SSL证书的

理论上是可以的，但是微信有它自己的一套安全机制，不是什么网页都允许在内部开启。有时它会提示“点选右上角选单选择在浏览器开启”，所以在里面开启的页面最好要简单一些，不要太复杂。

微信内建浏览器可以直接开启的wap网页的。

1、开启微信。随便找到一个好友聊天。

2、在聊天内容里输入你想浏览的网页网址。如果想浏览百度，就输入百度网址。

3、这时候发现网址是蓝色的，点选网址，就可跳转到百度网站了。在这里可以随心所欲的搜寻内容了。

可以，不过你得先把地址复制传送给某个人。才能点选开启，微信没有导航栏

你直接复制网页地址，然后在浏览器中开启就好了，怎么复制那，直接通过开启微信文章或者微信的h5页面，然后再通过分享之档案助手或者QQ我的电脑上，就可以看到了！

1.首先点击打开浏览器的菜单【工具】，然后选择【选项】-【internet选项】；如果是IE用户，可以直接在IE图标上点击右键，选择属性进入。

2.打开Internet选项设置窗口后，点击【安全】选项卡，点击【自定义级别】。

3.在弹出的【自定义级别】窗口中，找到【脚本】选项一栏。

4.然后点击下面的【Java小程序脚本】和【活动脚本】下的【启用】

5.或者也可以将脚本栏目下的所有项都选择到【启用】，

6.设置完成后，点击窗口右下角的【确定】按钮，弹出询问是否更改时，点击【是】。

7.最后，在Internet属性窗口中，点击【应用】-【确定】关闭退出即可在浏览器中启用Javascript代码并显示特效了。

JS是解释执行的，即读取一个语句就执行一个。以前的严格JS是以分号为语句的分隔符，但现在一些浏览器已经接受以换行符为分隔符（似乎是很多人喜欢用基于对象的编程了，而在JS中写对象的函数是需要加分号的，所以很多人都爱忘）。

JS本身只提供语法解析与少部分内部函数支持，其他的均由宿主支持。比如在网页JS中的window,document,navigator等对象，均是由浏览器提供基于其它语言的代码，这些代码通常被隐藏，但很大程度上决定了JS的运行效率。如果你有兴趣，打开Chrome，按F12，调处Console，然后输alert（注意没有()），你就会发现[nativecode]这个东西。

常见的执行js代码都是放入到HTML引入后，然后通过HTML文件来执行胡查看代码。显然这是比较麻烦的事情，如果电脑里面安装了node.js，可以使用node来直接使用node来运行想要运行的js文件。

document.write("name:"+mycard.Owner+"speed:"+mycard.Rate);

JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

脚本简单地说就是一条条的文字命令，这些文字命令是我们可以看到的（如可以用记事本打开查看、编辑），脚本程序在执行时，是由系统的一个解释器，将其一条条的翻译成机器可识别的指令，并按程序顺序执行。因为脚本在执行时多了一道翻译的过程，所以它比二进制程序执行效率要稍低一些。

实现的方法和详细的操作步骤如下：

1、第一步，打开Chrome浏览器，然后单击“设置”选项，见下图，转到下面的步骤。

2、第二步，完成上述步骤后，拉到底部，然后单击“高级”选项，见下图，转到下面的步骤。

3、第三步，完成上述步骤后，单击“网站设置”选项，见下图，转到下面的步骤。

4、第四步，完成上述步骤后，单击“

?JavaScript”选项，见下图，转到下面的步骤。

5、第五步，完成上述步骤后，打开“允许（推荐）”选项，然后刷新页面即可生效，见下图。这样，就解决了这个问题了。