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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
vue 组件简介
Jul 31 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中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python实现浪漫的烟花秀
2019/01/30 Python
python socket 聊天室实例代码详解
2019/11/14 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
运动会解说词200字
2014/02/06 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
员工加薪申请报告
2015/05/15 职场文书
安全生产标语口号
2015/12/26 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL