Javascript定时器(一)——单线程
一、JavaScript 引擎是单线程的
可以从下面的代码中看到,第一个用setTimeout中的代码是死循环,由于是单线程,下面的两个定时器就没机会执行了。
<script type="text/javascript">
setTimeout( function(){ while(true){} } , 100);
setTimeout( function(){ alert('你好!setTimeout'); } , 200);
setInterval( function(){ alert('你好!setInterval'); } , 200);
</script>
浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现3个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。
- JavaScript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来然后加以处理,浏览器无论再什么时候都只有一个JS线程在运行JS程序。
- GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
- 浏览器事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。
由上图可看出,浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务,JavaScript引擎一直等待着任务队列中任务的到来,由于单线程关系,这些任务得进行排队,一个接着一个被引擎处理。
t1、t2....tn表示不同的时间点,tn下面对应的小方块代表该时间点的任务。
t1时刻:
- GUI渲染线程
浏览器事件触发线程:
在t1时间段内,首先是用户点击了一个鼠标键,点击被浏览器事件触发线程捕捉后形成一个鼠标点击事件,由图可知,对于JavaScript引擎线程来说,这事件是由其它线程异步传到任务队列尾的,由于引擎正在处理t1时的任务,这个鼠标点击事件正在等待处理。
定时触发线程:
这里的浏览器模型定时计数器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,如果处于阻塞线程状态就计不了时,它必须依赖外部来计时并触发定时,所以队列中的定时事件是异步事件。
在这t1的时间段内,继鼠标点击事件触发后,先前已设置的setTimeout定时也到达了,此刻对JavaScript引擎来说,定时触发线程产生了一个异步定时事件并放到任务队列中,该事件被排到点击事件回调之后,等待处理。同理,还是在t1时间段内,接下来某个setInterval定时器也被添加了,由于是间隔定时,在t1段内连续被触发了两次,这两个事件被排到队尾等待处理。
ajax异步请求:
浏览器新开一个http线程请求,当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到JavaScript引擎的处理队列中等待处理。
二、任务的执行顺序不同,显示结果也不同
1)未使用setTimeout函数
在网上找到的一段代码实例,这里用来演示一下。
<a href="#" id="doBtn">do something</a>
<div id="status"></div>
<script type="text/javascript">
var doBtn = document.getElementById('doBtn')
, status = document.getElementById('status'); function sleep(ms) {
var start = new Date();
while (new Date() - start <= ms) {}
} doBtn.onclick = function(e) {
status.innerHTML = 'doing...please wait...';
sleep(3000); // 模拟一个耗时较长的计算过程,3s
status.innerHTML = 'done';
return false;
};
</script>
我在firefox中执行了上面的代码。计划是点击“do something”按钮,然后显示“doing...please wait...”,接着执行sleep,最后显示“done”。
但是结果是点击后,浏览器卡住3秒左右,最后直接显示done。
分析下看出,在做status.innerHTML设置的时候,是需要执行GUI渲染线程的,但是现在还在执行JavaScript引擎线程,而JavaScript引擎线程与GUI渲染线程是互斥的,所以就最后显示了done。
2)使用了setTimeout函数
<a href="#" id="doBtn2">do something timer</a>
<div id="status2"></div>
<script type="text/javascript">
var doBtn2 = document.getElementById('doBtn2')
, status2 = document.getElementById('status2'); function sleep2(ms) {
var start = new Date();
while (new Date() - start <= ms) {}
} doBtn2.onclick = function(e) {
status2.innerHTML = 'doing...please wait...';
setTimeout(function() {
sleep2(3000);
status2.innerHTML = 'done';
}, 100);
return false;
};
</script>
在“doing...please wait...”后面加了个setTimeout,延时执行,给了浏览器渲染的时间,这个时候会显示出“doing...please wait...”的字样,然后执行sleep函数,最后显示“done”。
后面有网友发现在firefox中不起作用,的确有这个问题,后面我修改了一下代码,将局部变量的声明,onclick的绑定放到了window.onload事件中,等页面结构加载完成后,我再做脚本操作。
<script type="text/javascript">
function sleep(ms) {
//...
}
window.onload = function() {
var doBtn = document.getElementById('doBtn'),
status = document.getElementById('status'); var doBtn2 = document.getElementById('doBtn2')
, status2 = document.getElementById('status2'); doBtn.onclick = function(e) {
//...
};
doBtn2.onclick = function(e) {
//...
};
};
</script>
demo下载:
http://download.csdn.net/download/loneleaf1/7956191
http://ejohn.org/blog/how-javascript-timers-work/ How JavaScript Timers Work
http://heroicyang.com/2012/08/28/javascript-event-loop/ JavaScript Event Loop 浅析
http://www.2cto.com/kf/201204/129337.html JavaScript可否多线程?
http://www.nowamagic.net/librarys/veda/detail/787 优化js脚本设计,防止浏览器假死
http://www.ruanyifeng.com/blog/2013/10/event_loop.html 什么是 Event Loop?
Javascript定时器(一)——单线程的更多相关文章
- Javascript定时器(三)——setTimeout(func, 0)
setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...
- Javascript定时器学习笔记
掌握定时器工作原理必知:JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序. 常言道:setTimeout和setInterval是伪线程. ...
- JavaScript到底是不是单线程
JavaScript到底是不是单线程 JavaScript引擎 在了解计时器内部运作前,我们必须清楚一点,触发和执行并不是同一概念,计时器的回调函数一定会在指定delay的时间后被触发,但并不一定立即 ...
- JavaScript之JS单线程|事件循环|事件队列|执行栈
本博文基于知乎"JavaScript作用域问题?"一问,而引起了对JavaScript事件循环和单线程等概念与实践上的研究.深入理解. 一.概念 0.关键词:JavaScript单 ...
- JavaScript定时器的工作原理(翻译)
JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...
- JavaScript定时器与执行机制
JavaScript动画中是必须使用到定时器的,这里做一个总结. var label = 'someLable'; console.time(label); console.timeEnd(label ...
- 关于JavaScript定时器我的一些小理解
因为自己在平时工作中,有些功能需要用到定时器,但是定时器并不像我们表边上看到的那样,所以这周末我看看书查查资料,深入研究了一下JavaScript中的定时器,那么废话不多说,下面进入我们今天的正题. ...
- JavaScript引擎是单线程的
从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的.计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的.我们先来认识一下下面三个函数是如何控制计时 ...
- javascript 定时器 笔记
最近想看下定时器,发现这东西越看越牵连的东西越多,比如js单线程,EVent loop 什么的 看到了几篇比较好的文章 http://ejohn.org/blog/how-javascript-tim ...
随机推荐
- C语言采用文本方式和二进制方式打开文件的区别分析
稍微了解C程序设计的人都知道,文本文件和二进制文件在计算机上面都是以0,1存储的,那么两者怎么还存在差别呢?对于编程人员来说,文本文件和二进制文件就是一个声明,指明了你应该以什么方式(文本方式/二进制 ...
- IO-04. 混合类型数据格式化输入(5)
本题要求编写程序,顺序读入浮点数1.整数.字符.浮点数2,再按照字符.整数.浮点数1.浮点数2的顺序输出. 输入格式: 输入在一行中顺序给出浮点数1.整数.字符.浮点数2,其间以1个空格分隔. 输出格 ...
- Hibernate component mapping
A Component is a containted object that is be persisted value type and not an entity.But you can emb ...
- 添加Labels的两种方法
private void AddLabel(IFeatureLayer pLayer,string fieldname,ITextSymbol Symbol) { container.DeleteAl ...
- Ubuntu iptables配置
sudo su sudo apt-get install iptables-persistent modprobe ip_tables #启动iptable #删除原有iptables规则 ipt ...
- JDBC学习1:详解JDBC使用
什么是JDBC JDBC(Java Database Connectivity),即Java数据库连接,是一种用于执行SQL语句的Java API,可以为多种关系数据库提供同一访问,它由一组用Java ...
- Metro风格的Android界面应用
最近项目中需要一个选择月份查询客户余额的功能,原先的android只能满足查询当月,不可以查询任意月份.当然改起来还是很简单的,服务端增加一个月份参数,客户端传入这个参数即可.闲来无事,月份的选择风格 ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(十五):消息加密
前不久,微信的企业号使用了强制的消息加密方式,随后公众号也加入了可选的消息加密选项.目前企业号和公众号的加密方式是一致的(格式会有少许差别). 加密设置 进入公众号后台的“开发者中心”,我们可以看到U ...
- java内部类技术提炼
创作时间:2016.07.28,2016.07.29 本人qq:992591601,欢迎交流. 参考书籍:<Thinking in Java>.<Effective Java> ...
- C-Lodop 非典型应用
Lodop是什么? 有人说她是报表打印工具,因为那个add_print_table语句把报表统计的那点事弄了个明明白白: 有人说她是条码打印工具,因为用了她再也不用后台生成条码图片了,前端一行指令就动 ...