更快的异步执行(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 相关文章推荐
Document对象内容集合(比较全)
Sep 06 Javascript
xml转json的js代码
Aug 28 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 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
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
WordPress网站性能优化指南
2015/11/18 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
Open and Print a Word Document
2007/06/15 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
python操作oracle的完整教程分享
2018/01/30 Python
python线程池threadpool实现篇
2018/04/27 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
database面试题
2013/03/28 面试题
学院领导推荐信
2013/10/30 职场文书
求职自我推荐信
2014/06/25 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
电力工程合作意向书
2015/05/11 职场文书
Redis 异步机制
2022/05/15 Redis