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 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
js判断密码强度的方法
Mar 18 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
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
中国收音机工业发展史
2021/03/02 无线电
怎么使 Mysql 数据同步
2006/10/09 PHP
PHP Document 代码注释规范
2009/04/13 PHP
php操作xml
2013/10/27 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
python定时截屏实现
2020/11/02 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
办公室文秘自我评价
2013/09/21 职场文书
高校毕业生自我鉴定
2013/10/27 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
导游词之襄阳古城
2019/09/27 职场文书
小学三年级作文之写景
2019/11/05 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js