深入分析 Javascript 单线程
面试的时候发现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); } |
深入分析 Javascript 单线程的更多相关文章
- 细说JavaScript单线程的一些事
标签: JavaScript 单线程 首发地址:码农网<细说JavaScript单线程的一些事> 最近被同学问道 JavaScript 单线程的一些事,我竟回答不上.好吧,感觉自己的 Ja ...
- JavaScript单线程和浏览器事件循环简述
JavaScript单线程 在上篇博客<Promise的前世今生和妙用技巧>的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型.应很多网友的回复,在这篇文章中将继续展 ...
- 浏览器中Javascript单线程分析
线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...
- 我理解的javascript单线程机制
废话不多说,我们先来看几个例子: 1. setTimeout( console.log(2); result: 2 1 2. console.log(100 setTimeout( cons ...
- JavaScript单线程和异步机制
随着对JavaScript学习的深入和实践经验的积累,一些原理和底层的东西也开始逐渐了解.早先也看过一些关于js单线程和事件循环的文章,不过当时看的似懂非懂,只留了一个大概的印象:浏览器中的js程序时 ...
- javascript单线程那些事
首先,说下为什么 JavaScript 是单线程? 总所周知,JavaScript是以单线程的方式运行的.说到线程就自然联想到进程.那它们有什么联系呢? 进程和线程都是操作系统的概念.进程是应用程序的 ...
- 关于javaScript单线程的见解
众所周知JavaScript是一门单线程的语言,这就意味着在同一时间他只能做一件事: 但是html5中提出了web worker的标准--->允许js创建多个线程, 这是否将改变js的单线程机制 ...
- JavaScript 单线程相关
众所周知,Javascript是单线程执行的,这也就是说:JavaScript在同一个时间上只能处理一件事.他不像C,Java等这些多线程的,可以开不同的线程去同时处理多件事情. 那么为什么别的语言都 ...
- 从Javascript单线程谈Event Loop
假如面试回答js的运行机制时,你可能说出这么一段话:"Javascript的事件分同步任务和异步任务,遇到同步任务就放在执行栈中执行,而碰到异步任务就放到任务队列之中,等到执行栈执行完毕之后 ...
随机推荐
- 最简MacOs10.8安装
虚拟机中安装Mac Os X的方法网上很多很多,但是对刚接触的朋友来讲肯定不是一件容易的事,这个自己深有体会,包括去年已经装好过,今年再找教程安装都装不起来,期间还出现了各种问题,幸好去年装好之后备份 ...
- 通过注册的URL Scheme向目标APP传递参数
通过注册的URL Scheme向目标APP传递参数 通过URL Scheme启动APP很简单就可以做到,但有时候我们想在启动APP的时候传递一些参数,这个时候我们就可以通过URL Scheme自定义U ...
- DP大作战—状态压缩dp
题目描述 阿姆斯特朗回旋加速式阿姆斯特朗炮是一种非常厉害的武器,这种武器可以毁灭自身同行同列两个单位范围内的所有其他单位(其实就是十字型),听起来比红警里面的法国巨炮可是厉害多了.现在,零崎要在地图上 ...
- Google HTML/CSS代码风格指南(中文版)
原文链接:http://wncbl.cn/posts/c8e10815/ 看一下没什么印象,那就写一遍吧. 背景 本文档定义了HTML/CSS的编写格式和风格规则.它旨在提高合作和代码质量,并使其支持 ...
- win7 64位安装oracle10g出现未知错误,程序异常终止解决方法
修改Oracle 10G\database\stage\prereq\db\refhost.xml 在 </SYSTEM> <CERTIFIED_SYSTEMS>后面添加 &l ...
- 每日Scrum--No.4
Yesterday:学习迪杰斯特拉算法并进行简单的编写代码 Today:继续编写代码 Problem:变量名的定义出错,造成调用的时候出错,不过改过来就好了.算法的编写不全面,漏掉个别语句,如在调试的 ...
- Tomcat6环境JBPM4.4报错:java.lang.ClassNotFoundException: de.odysseus.el.util.SimpleResolver
Tomcat6环境JBPM4.4报错:java.lang.ClassNotFoundException: de.odysseus.el.util.SimpleResolver 报错信息:
- 水溶彩铅的特点&技法运用
工欲善其事必先利其器!亲爱的同学们都准备好画笔了吗?今天,助助为同学们介绍一下水溶性彩色铅笔的特点,技法运用的基本教程,请仔细看哟! [水溶性彩色铅笔的特点] 能够同时画出像铅笔一样的线条和水彩一样的 ...
- JavaScript Patterns 4.4 Self-Defining Functions
If you create a new function and assign it to the same variable that already holds another function, ...
- MaxMin搜索