更快的异步执行(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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
javascript模拟命名空间
Apr 17 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
hammer.js实现图片手势放大效果
Aug 29 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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
jQuery的学习步骤
2011/02/23 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python开启多个子进程并行运行的方法
2015/04/18 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
如何用Django处理gzip数据流
2021/01/29 Python
怎样写好自我鉴定
2013/12/04 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
妇女干部培训方案
2014/05/12 职场文书
经典演讲稿开场白
2014/08/25 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python