[转] 为什么javascript是单线程的却能让AJAX异步调用?

时间:2022-10-01 20:34:57

为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?

[转] 为什么javascript是单线程的却能让AJAX异步调用?
function foo() {
console.log( 'first' );
setTimeout( ( function(){ console.log( 'second' ); } ), 5); } for (var i = 0; i < 1000000; i++) {
foo();
}
[转] 为什么javascript是单线程的却能让AJAX异步调用?

执行结果会首先全部输出first,然后全部输出second;尽管中间的执行会超过5ms。为什么?

因为JS运行在浏览器中,是单线程的,每个window一个JS线程,既然是单线程的,在某个特定的时刻只有特定的代码能够被执行,并阻塞其它的代码。而浏览器是事件驱动的(Event driven),浏览器中很多行为是异步(Asynchronized)的,会创建事件并放入执行队列中。javascript引擎是单线程处理它的任务队列,你可以理解成就是普通函数和回调函数构成的队列。当异步事件发生时,如mouse click, a timer firing, or an XMLHttpRequest completing(鼠标点击事件发生、定时器触发事件发生、XMLHttpRequest完成回调触发等),将他们放入执行队列,等待当前代码执行完成。

前 面已经提到浏览器是事件驱动的(Event driven),浏览器中很多行为是异步(Asynchronized)的,例如:鼠标点击事件、窗口大小拖拉事件、定时器触发事件、 XMLHttpRequest完成回调等。当一个异步事件发生的时候,它就进入事件队列。浏览器有一个内部大消息循环,Event Loop(事件循环),会轮询大的事件队列并处理事件。例如,浏览器当前正在忙于处理onclick事件,这时另外一个事件发生了(如:window onSize),这个异步事件就被放入事件队列等待处理,只有前面的处理完毕了,空闲了才会执行这个事件。setTimeout也是一样,当调用的时 候,js引擎会启动定时器timer,大约xxms以后执行xxx,当定时器时间到,就把该事件放到主事件队列等待处理(浏览器不忙的时候才会真正执 行)。

每个浏览器具体实现主事件队列不尽相同,这不谈了。

浏览器不是单线程的

虽然JS运行在浏览器中,是单线程的,每个window一个JS线程,但浏览器不是单线程的,例如Webkit或是Gecko引擎,都可能有如下线程:

  • javascript引擎线程
  • 界面渲染线程
  • 浏览器事件触发线程
  • Http请求线程

很多童鞋搞不清,如果js是单线程的,那么谁去轮询大的Event loop事件队列?答案是浏览器会有单独的线程去处理这个队列。

AJAX请求是否真的异步?

既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步? 
其实请求确实是异步的,这请求是由浏览器新开一个线程请求(见前面的浏览器多线程)。当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更 事件放到 JavaScript引擎的事件处理队列中等待处理。当浏览器空闲的时候出队列任务被处理,JavaScript引擎始终是单线程运行回调函数。 javascript引擎确实是单线程处理它的任务队列,能理解成就是普通函数和回调函数构成的队列。

总结一下,Ajax请求确实是异步的,这请求是由浏览器新开一个线程请求,事件回调的时候是放入Event loop单线程事件队列等候处理。

setTimeout(func, 0)为什么有时候有用?

写 js多的童鞋可能发现,有时候加一个setTimeout(func, 0)非常有用,为什么?难道是模拟多线程吗?错!前面已经说过了,javascript是JS运行在浏览器中,是单线程的,每个window一个JS线 程,既然是单线程的,setTimeout(func, 0)神奇在哪儿?那就是告诉js引擎,在0ms以后把func放到主事件队列中,等待当前的代码执行完毕再执行,注意:重点是改变了代码流程,把func 的执行放到了等待当前的代码执行完毕再执行。这就是它的神奇之处了。它的用处有三个:

  • 让浏览器渲染当前的变化(很多浏览器UI render和js执行是放在一个线程中,线程阻塞会导致界面无法更新渲染)
  • 重新评估”script is running too long”警告
  • 改变执行顺序

例如:下面的例子,点击按钮就会显示"calculating....",如果删除setTimeout就不会。因为reDraw事件被进入事件队列到长时间操作的最后才能被执行,所以无法刷新。

[转] 为什么javascript是单线程的却能让AJAX异步调用?
<button id='do'> Do long calc!</button>
<div id='status'></div>
<div id='result'></div> $('#do').on('click', function(){ $('#status').text('calculating....'); //此处会触发redraw事件的fired,但会放到队列里执行,直到long()执行完。 // without set timeout, user will never see "calculating...."
//long();//执行长时间任务,阻塞 // with set timeout, works as expected
setTimeout(long,50);//用定时器,大约50ms以后执行长时间任务,放入执行队列,但在redraw之后了,根据先进先出原则 }) function long(){
var result = 0
for (var i = 0; i<1000; i++){
for (var j = 0; j<1000; j++){
for (var k = 0; k<1000; k++){
result = result + i+j+k
}
}
}
$('#status').text('calclation done') // has to be in here for this example. or else it will ALWAYS run instantly. This is the same as passing it a callback
}
[转] 为什么javascript是单线程的却能让AJAX异步调用?

非阻塞js的实现(non-blocking javascript)

js 在浏览器中需要被下载、解释并执行这三步。在html body标签中的script都是阻塞的。也就是说,顺序下载、解释、执行。尽管Chrome可以实现多线程并行下载外部资源,例如:script file、image、frame等(css比较复杂,在IE中不阻塞下载,但Firefox阻塞下载)。但是,由于js是单线程的,所以尽管浏览器可以 并发加快js的下载,但必须依次执行。所以chrome中image图片资源是可以并发下载的,但外部js文件并发下载没有多大意义。

[转] 为什么javascript是单线程的却能让AJAX异步调用?

要实现非阻塞js(non-blocking javascript)有两个方法:1. html5 2. 动态加载js
首先一种办法是HTML5的deferasync关键字:

[转] 为什么javascript是单线程的却能让AJAX异步调用?
defer:

<script type="text/javascript" defer src="foo.js"></script>

async:

<script type="text/javascript" async src="foo.js"></script>
[转] 为什么javascript是单线程的却能让AJAX异步调用?

然后第二种方法是动态加载js:

[转] 为什么javascript是单线程的却能让AJAX异步调用?
setTimeout(function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "foo.js";
var head = true; //加在头还是尾
if(head)
document.getElementsByTagName("head")[0].appendChild(script);
else
document.body.appendChild(script);
}, 0); //另外一个独立的动态加载js的函数
function loadJs(jsurl, head, callback){
var script=document.createElement('script');
script.setAttribute("type","text/javascript"); if(callback){
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
}
script.setAttribute("src", jsurl); if(head)
document.getElementsByTagName('head')[0].appendChild(script);
else
document.body.appendChild(script); }
[转] 为什么javascript是单线程的却能让AJAX异步调用?

[转] 为什么javascript是单线程的却能让AJAX异步调用?的更多相关文章

  1. Javascript是单线程的深入分析

    本来想总结一下的,网上却发现有人已经解释的很清楚了,特转过来. 这也解释了为什么在用自动化测试工具来运行dumrendtree时设定的超时和测试case设定的超时的关联性. 面试的时候发现99%的童鞋 ...

  2. Javascript引擎单线程机制及setTimeout执行原理说明

    setTimeout用法在实际项目中还是会时常遇到.比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM,如果再这个函数堆栈中把页面背景先从白色设为红色,再设回白色,那么浏览器会认为DOM没有发生任何 ...

  3. Javascript:再论Javascript的单线程机制 之 DOM渲染时机

    Javascript:再论Javascript的单线程机制 之 DOM渲染时机 背景 Javascript是单线程事件驱动的,所有能看到的Javascript代码都是在一个线程执行,定时器回调和AJA ...

  4. JavaScript的单线程性质以及定时器的工作原理

    前些日子还在网上争论过js动画用setTimeout还是setInterval,个人偏向于setTimeout,当动画中牵扯到ajax时用setInterval会有时间偏差,出现一些问题即使用clea ...

  5. 关于javascript的单线程和异步的一些问题

    关于js单线程和异步方面突然就糊涂了,看别人的文章越看越糊涂,感觉这方面是个坑,跳进去就不好跳出来.再去看,看着看着感觉自己明白了一些东西,也不知道对不对,反正是暂时把自己说服了,这样理解能理解的通, ...

  6. 我想这次我真的理解了 JavaScript 的单线程机制

    今天面试的时候被问到一个问题,是关于 JS 异步的.当时我脑海中闪过了一个单线程的概念,但却没有把真正的原理阐述清楚.所以回来特意重新回顾了前面单线程和异步相关的一些知识点. 虽然之前学习的时候也接触 ...

  7. javascript的单线程

    1.什么是javascript的单线程javascript是单线程的语言,所以在一个进程上,只能运行一个县城,不能多个线程同时运行.也就是说javascript不允许多个线程共享内存空间.如果多个线程 ...

  8. JavaScript是单线程还是多线程(转)

    多线程要考虑线程之间的资源抢占,死锁,冲突之类一系列问题.JavaScript作为一门客户端脚本,貌似没有多线程的一些列问题.那么JavaScript是单线程还是多线程?通过查资料总结了JavaScr ...

  9. Javascript的单线程和异步编程

    运行时概念 下面的内容解释了一个理论上的模型.现代 JavaScript 引擎着重实现和优化了描述的几个语义. 可视化描述 栈 函数调用形成了一个栈帧. function foo(b) { var a ...

随机推荐

  1. Command Pattern 命令模式

    定义: 命令模式将‘请求’封装成对象,以便使用不同的请求,队列或者日志来参数化其他对象,命令模式也支持可撤销的操作. 类图 如上图所示:Command类是用来声明执行操作的接口:ConcreteCom ...

  2. HASHKILL

    6ac66ed89ef9654cf25eb88c21f4ecd0是flag的MD5码,(格式为ctf{XXX_XXXXXXXXXXX_XXXXX})由一个0-1000的数字,下划线,纽约的一个区,下划 ...

  3. Bootstrap两端对齐的导航实例

    Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  4. tomcat &colon; Error configuring application listener of class org&period;springframework&period;web&period;context&period;ContextLoaderListener java&period;lang&period;ClassNotFoundException&colon;

    错误 严重: Error configuring application listener of class org.springframework.web.context.ContextLoader ...

  5. 关于wordpress后台首页加载ajax&period;googleapis特别慢的解决办法

    通过审查元素发现,拖慢后台加载速度的主要是两个路径 1.https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js 2.h ...

  6. 哪有Python视频百度云链接?

    说到Python视频哪个好,小编在这里不好下结论.毕竟孰好孰坏,只有合适的才是最好的.就像买鞋子,一双鞋子好不好,只有合脚才是真的好.不过,这里有些个人认为通俗易懂的Python视频可以分享给大家. ...

  7. P2158 &lbrack;SDOI2008&rsqb; 仪仗队(欧拉函数模板)

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...

  8. gpg使用说明

    http://blog.163.com/ywz_306/blog/static/13257711201121921452480/

  9. mysql 分组排序取最值

    查各个用户下单最早的一条记录 查各个用户下单最早的前两条记录 查各个用户第二次下单的记录 一.建表填数据: SET NAMES utf8mb4; -- 取消外键约束 ; -- ------------ ...

  10. 查看mysql执行的线程,并杀掉他

    文章转自https://www.cnblogs.com/weiok/p/5672238.html 1.进入mysql/bin目录下输入mysqladmin processlist; 2.启动mysql ...