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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 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
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
python正则分析nginx的访问日志
2017/01/17 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
pandas实现导出数据的四种方式
2020/12/13 Python
python空元组在all中返回结果详解
2020/12/15 Python
用python读取xlsx文件
2020/12/17 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
坚定理想信念心得体会
2014/03/11 职场文书
会计工作岗位职责
2015/02/03 职场文书
教师岗位职责范本
2015/04/02 职场文书
2015年司法所工作总结
2015/04/27 职场文书
红高粱观后感
2015/06/10 职场文书
大学运动会加油稿
2015/07/22 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android