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与C# Windows应用程序交互方法
Jun 29 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
vue之nextTick全面解析
May 17 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 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
phpmyadmin操作流程
2006/10/09 PHP
php SQL防注入代码集合
2008/04/25 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
BootStrap selectpicker
2016/06/20 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python生成器与迭代器详解
2019/01/01 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
简单了解Python生成器是什么
2019/07/02 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
String和StringBuffer的区别
2015/08/13 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
大跃进口号
2014/06/16 职场文书
2014年管理工作总结
2014/11/22 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python
Python 图片添加美颜效果
2022/04/28 Python