更快的异步执行(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 相关文章推荐
大家未必知道的Js技巧收藏
Apr 07 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
js实现文字截断功能
Sep 14 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
JavaScript 截取字符串代码实例
Sep 05 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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
详解Vue源码中一些util函数
2019/04/24 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
Python安装第三方库的3种方法
2015/06/21 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
区域销售经理职责
2013/12/22 职场文书
给小学生的新年寄语
2014/04/04 职场文书
公司委托书范本
2014/04/04 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
邓小平理论心得体会
2014/09/09 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript