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字母大小写转换的4个函数详解
May 09 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
微信小程序canvas动态时钟
Oct 22 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
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
初学python数组的处理代码
2011/01/04 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
使用python3实现操作串口详解
2019/01/01 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
销售主管岗位职责范本
2014/02/14 职场文书
质检部经理岗位职责
2014/02/19 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
公司节能减排方案
2014/05/16 职场文书
学校读书活动总结
2014/06/30 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python