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 相关文章推荐
大家未必知道的Js技巧收藏
Apr 07 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
PHP编写简单的App接口
2016/08/28 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
Python制作数据导入导出工具
2015/07/31 Python
Python 探针的实现原理
2016/04/23 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
超级实用的8个Python列表技巧
2020/08/24 Python
django中ImageField的使用详解
2020/12/21 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
什么是聚集索引和非聚集索引
2012/01/17 面试题
食堂个人先进事迹
2014/01/22 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
市场策划求职信
2014/08/07 职场文书
影视后期实训报告
2014/11/05 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
上学路上观后感
2015/06/16 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android