更快的异步执行(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实现用户信息修改验证输入方法汇总
Jul 18 Javascript
Javascript中replace()小结
Sep 30 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
vue 中filter的多种用法
Apr 26 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
vue 取出v-for循环中的index值实例
Nov 09 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
PHP新手上路(六)
2006/10/09 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
js字符编码函数区别分析
2008/06/05 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Python数据类型之List列表实例详解
2019/05/08 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
使用Python函数进行模块化的实现
2019/11/15 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
优秀的计算机专业求职信范文
2013/12/27 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
质量负责人岗位职责
2015/02/15 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
可可西里观后感
2015/06/08 职场文书
小学安全教育主题班会
2015/08/12 职场文书