更快的异步执行(setTimeout多浏览器)


Posted in Javascript onAugust 12, 2014

如果要异步执行一个函数,我们最先想到的方法肯定会是setTimeout
例如:setTimeout(function( /* 1s后做点什么 */){},1000}

那如果说要最快速地异步执行一个函数呢?
是否会是:

setTimeout(function( /* 尽快做点什么 */){},0}

可惜的是,浏览器为了避免setTimeout嵌套可能出现卡死ui线程的情况,为setTimeout设置了最小的执行时间间隔,不同浏览器的最小执行时间间隔都不一样。chrome下测试 setTimeout 0 的实际执行时间间隔大概在12ms左右。

那么如果想最快地异步执行一个函数,有没有什么可以提速的方法呢?

先来看看浏览器端,有哪些常用的异步执行方法

setImmediate:该方法去实现比setTimeout 0 更快的异步执行,执行时间更接近0ms,但是只有IE/node支持。

requestAnimationFrame:做动画循环的时候经常会用到这个方法,该方法只会在浏览器刷新ui的时候执行,刷新ui的频率最大一般为60fps,所以requestAnimationFrame一般情况下比setTimeout 0 更慢一些。

除了使用异步函数外,还有一些方法可以实现异步调用

利用onmessage:
和iframe通信时常常会使用到onmessage方法,但是如果同一个window postMessage给自身,会怎样呢?其实也相当于异步执行了一个function
例如:

var doSth = function(){}
window.addEventListener("message", doSth, true);
window.postMessage("", "*");


另外,还可以利用script标签,实现函数异步执行,例如:

var newScript = document.createElement("script");
newScript.onreadystatechange = doSth;
document.documentElement.appendChild(newScript);



把script添加到文档也会执行onreadystatechange 但是该方法只能在IE下浏览器里使用。

那么 这几种方法,谁最快?

测试了一下,

chrome下:

setImmediate:不可用。
setTimeout 0:12ms
onmessage:6ms
onreadystatechange:不支持

chrome下,onmessage比setTimeout 0 更快。

firefox下:

setImmediate:不可用。
setTimeout 0:7ms
onmessage:7ms
onreadystatechange:不支持

firefox下,onmessage和setTimeout 0 速度相当。

IE9:

setImmediate:不可用。
setTimeout 0:11ms
onmessage:7ms 10ms
onreadystatechange:2ms

IE9下,onreadystatechange的时间比另外两者要快得多。

总体情况下,setImmediate < readystatechange < onmessage < setTimeout 0 < requestAnimationFrame
因此我们可以简单封装一个快速执行异步function的方法:

var setZeroTimeout = (function(){
if(window.setImmediate){
//IE10+版本,使用原生setImmediate
return window.setImmediate;
}
else if("onreadystatechange" in document.createElement("script")){
return function(){/* 使用onreadystatechange的版本 */}
}
else if(window.postMessage){
return function(){/* 使用onmessage的异步执行版本 */}
}
else {
return window.setTimeout;
}

})();
Javascript 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
JQuery中的ready函数冲突的解决方法
May 17 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
JavaScript Promise启示录
Aug 12 #Javascript
深入理解Javascript中this的作用域
Aug 12 #Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 #Javascript
JavaScript弹出窗口方法汇总
Aug 12 #Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 #Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 #Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 #Javascript
You might like
打造计数器DIY三步曲(中)
2006/10/09 PHP
php实现encode64编码类实例
2015/03/24 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
常用js脚本
2006/12/03 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
为什么要使用servlet
2016/01/17 面试题
学校文明单位申报材料
2014/05/06 职场文书
春节联欢会策划方案
2014/05/16 职场文书
项目安全员岗位职责
2015/02/15 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript