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 相关文章推荐
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
AngularJS内置指令
Feb 04 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
js运动应用实例解析
2015/12/28 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
js实现交通灯效果
2017/01/13 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
Python获取当前时间的方法
2014/01/14 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
超实用的 30 段 Python 案例
2019/10/10 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
想学画画?python满足你!
2020/12/24 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
校领导推荐信
2013/11/01 职场文书
机械系毕业生求职信
2014/05/28 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
党员干部学习心得体会
2016/01/23 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery