更快的异步执行(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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
js查错流程归纳
May 04 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
谈一谈javascript闭包
Jan 28 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
p5.js临摹动态图形的方法
Oct 23 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对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
python 布尔操作实现代码
2013/03/23 Python
Fabric 应用案例
2016/08/28 Python
python常见的格式化输出小结
2016/12/15 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
如何用Python绘制3D柱形图
2020/09/16 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
个人售房合同协议书
2016/03/21 职场文书