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表单验证使用插件formValidator
Nov 10 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP写的求多项式导数的函数代码
2012/07/04 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Python json转字典字符方法实例解析
2020/04/13 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
抵押贷款承诺书
2014/05/30 职场文书
北京奥运会口号
2014/06/21 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
入党转正申请书范文
2019/05/20 职场文书