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 this 深入理解
Jul 30 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
JavaScript简介
Feb 15 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
js数据类型检测总结
Aug 05 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
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网页后退不再出现过期
2007/03/08 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
深入php self与$this的详解
2013/06/08 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中的字符串查找操作方法总结
2016/06/27 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python中进程和线程的区别详解
2017/10/29 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
学Python 3的理由和必要性
2019/11/19 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
EJB的几种类型
2012/08/15 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
思想政治自我鉴定
2013/10/06 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js