博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript是单线程的深入分析
阅读量:6542 次
发布时间:2019-06-24

本文共 4382 字,大约阅读时间需要 14 分钟。

面试的时候发现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

首先一种办法是HTML5的和关键字:

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://wcsdo.baihongyu.com/

你可能感兴趣的文章
高清摄像头MIPI CSI2接口浅解【转】
查看>>
C# CancellationTokenSource和CancellationToken的实现
查看>>
PCIE BAR空间
查看>>
如何用数学课件制作工具画角平分线
查看>>
VS2015 中统计整个项目的代码行数
查看>>
UWP控件与DataBind
查看>>
bash: php: command not found
查看>>
XVIII Open Cup named after E.V. Pankratiev. Eastern Grand Prix
查看>>
数据恢复软件如何换机使用?
查看>>
《高性能mysql》到手
查看>>
(转)关于如何学好游戏3D引擎编程的一些经验
查看>>
使用Kotlin为你的APP自定义一个统一的标题栏
查看>>
EF各版本增删查改及执行Sql语句
查看>>
拓扑排序
查看>>
jQGrid API
查看>>
Bzoj1758: [Wc2010]重建计划
查看>>
redis集群部署及踩过的坑
查看>>
j2EE监听器-listener
查看>>
使用pip命令报You are using pip version 9.0.3, however version 18.0 is available pip版本过期.解决方案...
查看>>
(转)LINQ之路
查看>>