更快的异步执行(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 相关文章推荐
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
vue+iview+less 实现换肤功能
Aug 17 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 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
Zerg建筑一览
2020/03/14 星际争霸
杏林同学录(一)
2006/10/09 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
js里面的变量范围分享
2020/07/18 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
中软国际Java程序员机试题
2012/08/19 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
大二学期个人自我评价
2014/01/13 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
会计入职心得体会
2016/01/22 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Node实现搜索框进行模糊查询
2021/06/28 Javascript