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实现的动态文字变换
Jul 28 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
js控制frameSet示例
Sep 10 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
js实现简单的打印表格
Jan 15 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 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 程序员的调试技术小结
2009/11/15 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
一名老师的自我评价
2014/02/07 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
教师求职自荐信范文
2015/03/04 职场文书
青年志愿者活动感想
2015/08/07 职场文书
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers