本来想总结一下的,网上却发现有人已经解释的很清楚了,特转过来。
这也解释了为什么在用自动化测试工具来运行dumrendtree时设定的超时和测试case设定的超时的关联性。
面试的时候发现99%的童鞋不理解为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?还有non-blocking IO, event loop等概念很不清楚。来深入分析一下:
首先看下面的代码:
1
2
3
4
5
6
7
8
9
|
function foo() {
console.log( 'first' );
setTimeout( ( function (){ console.log( 'second' ); } ), 5);
} for ( var i = 0; i < 1000000; i++) {
foo();
} |
执行结果会首先全部输出first,然后全部输出second;尽管中间的执行会超过5ms。为什么?
Javascript是单线程的
因为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事件被进入事件队列到长时间操作的最后才能被执行,所以无法刷新。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<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
} |
非阻塞js的实现(non-blocking javascript)
js在浏览器中需要被下载、解释并执行这三步。在html body标签中的script都是阻塞的。也就是说,顺序下载、解释、执行。尽管Chrome可以实现多线程并行下载外部资源,例如:script file、image、frame等(css比较复杂,在IE中不阻塞下载,但Firefox阻塞下载)。但是,由于js是单线程的,所以尽管浏览器可以 并发加快js的下载,但必须依次执行。所以chrome中image图片资源是可以并发下载的,但外部js文件并发下载没有多大意义。
要实现非阻塞js(non-blocking javascript)有两个方法:1. html5 2. 动态加载js
defer
1
|
<script type= "text/javascript" defer src= "foo.js" ></script>
|
async
1
|
<script type= "text/javascript" async src= "foo.js" ></script>
|
然后第二种方法是动态加载js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
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);
}
这篇文章也不错,可以迅速的了解一些架构:http://www.cnblogs.com/Mainz/archive/2012/09/08/2676618.html
|
相关推荐
从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的,文章通过讲解JavaScript的单线程引擎,从而让读者更加深入的了解JavaScript定时器。
异步的概念之所以首先在Web2.0中火起来,是因为在浏览器中Javascript在单线程上执行,而且他还与UI渲染公用一个线程.这意味着Javascript在执行的时候UI渲染和响应是处于停滞状态的.为了用户体验更好而采取异步的方式...
ACCP6.0的课程相对于ACCP5.0增加了DB2关系型数据库系统,DB2具有很好的网络支持能力,每个子系统可以连接十几万个分布式用户,可同时激活上千个活动线程,对大型分布式应用系统尤为适用。DB2具有较好的可伸缩性,...
此次将长期的思考、感悟,多年的系统开发、设计和团队管理经验,以及深入分析众多项目实战的宝贵成果和盘托出,力求将编程思想与具体实践融为一体,提炼出适合于广大读者快速理解和彻底掌握.NET软件开发的最佳学习...
JavaScript 词法分析解析 前端学习方法分享 Sublime Text工具使用介绍 谢幕 第17周 今日内容概要 jQuery 和Dom关系及jQuery版本 jQuery选择器 实例多选反选取消 删选器以及Tab菜单示例 示例:模态编程框 jQuery ...
JavaSE核心 异常处理、多线程基础、IO系统、网络编程、Java反射机制、JVM性能调优(JVM内存结构剖析、GC分析及调优、JVM内存参数优化)、Java泛型、JDK新特性 熟练掌握JavaSE核心内容,特别是IO和多线程;...
自己动手写Web服务器(Socket、多线程)、ashx模式Web开发、ViewState、Cookie、Session、Http协议、Web开发基本原则、XSS漏洞防范、Request对象、Response对象、Server对象、虚拟路径、HttpHandler深入、ASP.Net...
ASP.NET培训资料(笔记版)(AJAX,C#,JavaScript,SQL) 详细的资料 三个月的课程录像+资料笔记(花了一万六千块的培训资料超值【19G的经典内容】 认真学习后包你能成为优秀的.net程序员 <br>(注明:不是...
ASP.NET培训资料(课堂视频含笔记)(AJAX,C#,JavaScript,SQL) <br>我将不定期发布,直至所有课程完毕 <br>详细的资料 三个月的课程录像+资料笔记(花了一万六千块的培训资料超值【19G的经典内容】 认真...
此次将长期的思考、感悟,多年的系统开发、设计和团队管理经验,以及深入分析众多项目实战的宝贵成果和盘托出,力求将编程思想与具体实践融为一体,提炼出适合于广大读者快速理解和彻底掌握.NET软件开发的最佳学习...
较深入地分析了Qt对象模型的一些基本知识,涉及信号和槽机制、Qt元对象系统、属性系统和对象树机制,以及部件类型和部件的几何布局等内容。 35 \ 第4章 程序主窗口—— QMainWindow 卢传富 Qt应用程序的主窗口是由多...
较深入地分析了Qt对象模型的一些基本知识,涉及信号和槽机制、Qt元对象系统、属性系统和对象树机制,以及部件类型和部件的几何布局等内容。 35 \ 第4章 程序主窗口—— QMainWindow 卢传富 Qt应用程序的主窗口是由...
深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的私有变量 关于反射中创建类型实例的两种方法 ASP.Net应用程序的多进程模型 NET委托...
(40课时) 系统地讲授多线程的基本概念、线程的设计、线程的优先级等以及线程的使用;讲授共享程序集(公有程序集)、私有程序集的组成、原理和使用;学习反射(Reflection)、属性(Attribute)的相关概念和使用。...
(40课时) 系统地讲授多线程的基本概念、线程的设计、线程的优先级等以及线程的使用;讲授共享程序集(公有程序集)、私有程序集的组成、原理和使用;学习反射(Reflection)、属性(Attribute)的相关概念和使用。...
(40课时) 系统地讲授多线程的基本概念、线程的设计、线程的优先级等以及线程的使用;讲授共享程序集(公有程序集)、私有程序集的组成、原理和使用;学习反射(Reflection)、属性(Attribute)的相关概念和使用。...
│ │ │ Java程序员认证模拟题及详细分析.doc │ │ │ question.rar │ │ │ test4.doc │ │ │ 模拟题.rar │ │ │ 经典的104-147模拟题.rar │ │ │ │ │ ├─035 │ │ │ 2003.10.5.15.51.43.TestKing%...
│ │ │ Java程序员认证模拟题及详细分析.doc │ │ │ question.rar │ │ │ test4.doc │ │ │ 模拟题.rar │ │ │ 经典的104-147模拟题.rar │ │ │ │ │ ├─035 │ │ │ 2003.10.5.15.51.43.TestKing%...
│ │ │ Java程序员认证模拟题及详细分析.doc │ │ │ question.rar │ │ │ test4.doc │ │ │ 模拟题.rar │ │ │ 经典的104-147模拟题.rar │ │ │ │ │ ├─035 │ │ │ 2003.10.5.15.51.43.TestKing%...
│ │ │ Java程序员认证模拟题及详细分析.doc │ │ │ question.rar │ │ │ test4.doc │ │ │ 模拟题.rar │ │ │ 经典的104-147模拟题.rar │ │ │ │ │ ├─035 │ │ │ 2003.10.5.15.51.43.TestKing%...