setTimeout的延时为0时多个浏览器的区别


Posted in Javascript onMay 23, 2012

由于不是很了解浏览器的内部执行策略,本文只能是通过前端一些测试依稀猜测些结论:
1)测试举例
做了两个例子:
1-1)脚本在页面中直接执行,通过刷新看结果

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<script type="text/javascript"> 
var t=new Date; 
setTimeout(function(){ 
alert('cost time:'+(new Date-t)) 
},0); 
</script> 
</HEAD> 
<BODY> 
</BODY> 
</HTML>

测试结果: 
 

在ie各个版本浏览器下,得到的alert结果大体为:14左后,区间为8~21毫秒之间;

chrome19,基本为1,区间为1~5之间,但是偶尔会是15左右

firefox12,基本为3,区间为2~7之间,但是偶尔也有15左右的值

safari5.1,基本为4,区间为1~7之间,但是偶尔也有15左右的值

opera11.5,基本为5,区间为2~8之间,但是偶尔有很大值

1-2)通过点击div看结果

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<script type="text/javascript"> 
function test(){ 
var t=new Date; 
setTimeout(function(){ 
alert('cost time:'+(new Date-t)) 
},0); 
} 
</script> 
</HEAD> 
<BODY> 
<div onclick='test()' id="div1" style="position:relative;width:200px;height:200px;background-color:green;left:100px;top:100px;"> 
</div> 
</BODY> 
</HTML>

测试结果:


在ie各个版本浏览器下,得到的alert结果大体为:5左后,偶尔有大值;

chrome19,基本为2,偶尔为3

firefox12,基本为1,0,2,但是偶尔也有13左右的值

safari5.1,基本为1,偶尔为2和3

opera11.5,基本为4,3,,但是偶尔有12左右的值。
 

以上测试,均在打开多个干扰复杂页面的标签、单个标签中测试。结果差不多。
2)说明什么? 

其实也得不到什么结论,但是测试结果基本反映了当前流行浏览器js脚本的效率排名。

究其原因,可能得出一些印证:

2-1)由于js的主执行线程为单线程,所以此值肯定一般大于0,setTimeout的执行时间点只是加入js主执行队列中的时间点,至于什么时候执行,是由js引擎线程按顺序执行的队列来决定。此结论在很多处说到。可自行查阅( 如:JavaScript可否多线程? 深入理解JavaScript定时机制);

此结论也印证很火时候用setTimeout做动画不流畅的原因等。

顺便在此贴出背光的一副图很能说明问题:

setTimeout的延时为0时多个浏览器的区别

3-2)测试偶尔的很大值,也有可能是js主执行线程中做了其他事情,如GC等。因为大值重复出现几率很少。
 
总结:其实我是没有得出结论,只是好奇,然后猜测,看看可能是情况和结果,希望大家批评指正。或者有结论的答复我。
另外:setTimout函数中第二个参数如果为负数,则和0具有一样的效果,如果setTimeout(function(){console.log('test')},-100);等同于setTimeout(function(){console.log('test')},0)。
我以为会报错,结果所有浏览器都没有报错。
Javascript 相关文章推荐
jQuery给元素添加样式的方法详解
Dec 30 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 #Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 #Javascript
Javascript 面向对象(三)接口代码
May 23 #Javascript
Javascript 面向对象(二)封装代码
May 23 #Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 #Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 #Javascript
基于jQuery的图片左右无缝滚动插件
May 23 #Javascript
You might like
我整理的PHP 7.0主要新特性
2016/01/07 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
Angular实现响应式表单
2017/08/04 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
python 产生token及token验证的方法
2018/12/26 Python
Python魔法方法详解
2019/02/13 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
python实现AdaBoost算法的示例
2020/10/03 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
小班评语大全
2014/05/04 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
2015年体育部工作总结
2015/04/02 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
步步惊心观后感
2015/06/12 职场文书
六五普法学习心得体会
2016/01/21 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
pandas数值排序的实现实例
2021/07/25 Python
Python各协议下socket黏包问题原理
2022/04/12 Python