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 lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
JavaScript常用工具函数大全
May 06 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
html读出文本文件内容
2007/01/22 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
Django中处理出错页面的方法
2015/07/15 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
python hashlib加密实现代码
2019/10/17 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
服务员自我评价
2014/01/25 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
项目合作协议书范本
2014/04/16 职场文书
二年级学生评语大全
2014/04/23 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
党课心得体会范文
2014/09/09 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
Java 多态分析
2022/04/26 Java/Android