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 相关文章推荐
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
jQuery参数列表集合
Apr 06 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
jQuery基础知识小结
Dec 22 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
Javascript执行上下文顺序的深入讲解
Nov 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
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
js function定义函数使用心得
2010/04/15 Javascript
JQuery小知识
2010/10/15 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
js实现鼠标拖曳效果
2020/12/30 Javascript
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python 项目转化为so文件实例
2019/12/23 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
擅自离岗检讨书
2014/02/11 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
迟到检讨书
2015/01/26 职场文书
总经理岗位职责范本
2015/04/01 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
详解Java实践之建造者模式
2021/06/18 Java/Android