《更快的异步执行(setTimeout多扫瞄器)__1.docx》由会员分享,可在线阅读,更多相关《更快的异步执行(setTimeout多扫瞄器)__1.docx(5页珍藏版)》请在三一文库上搜索。
1、更快的异步执行(setTimeout多扫瞄器)_ 假如要异步执行一个函数,我们最先想到的方法确定会是setTimeout 例如:setTimeout(function( /* 1s后做点什么 */),1000 那假如说要最快速地异步执行一个函数呢? 是否会是: view sourceprint?1 setTimeout(function( /* 尽快做点什么 */),0 可惜的是,扫瞄器为了避开setTimeout嵌套可能消失卡死ui线程的状况,为setTimeout设置了最小的执行时间间隔,不同扫瞄器的最小执行时间间隔都不一样。chrome下测试 setTimeout 0 的实际执行时间间隔
2、也许在12ms左右。 那么假如想最快地异步执行一个函数,有没有什么可以提速的方法呢? 先来看看扫瞄器端,有哪些常用的异步执行方法 setImmediate:该方法去实现比setTimeout 0 更快的异步执行,执行时间更接近0ms,但是只有IE/node支持。 requestAnimationFrame:做动画循环的时候常常会用到这个方法,该方法只会在扫瞄器刷新ui的时候执行,刷新ui的频率最大一般为60fps,所以requestAnimationFrame一般状况下比setTimeout 0 更慢一些。 除了用法异步函数外,还有一些方法可以实现异步调用 利用onmessage: 和ifra
3、me通信时经常会用法到onmessage方法,但是假如同一个window postMessage给自身,会怎样呢?其实也相当于异步执行了一个function 例如: view sourceprint?1 var doSth = function() 2 window.addEventListener(message, doSth, true); 3 window.postMessage(, *); 另外,还可以利用script标签,实现函数异步执行,例如: view sourceprint?1 var newScript = document.createElement(script); 2
4、newScript.onreadystatechange = doSth; 3 document.documentElement.appendChild(newScript); 把script添加到文档也会执行onreadystatechange 但是该方法只能在IE下扫瞄器里用法。 那么 这几种方法,谁最快? 测试了一下, chrome下: setImmediate:不行用。 setTimeout 0:12ms onmessage:6ms onreadystatechange:不支持 chrome下,onmessage比setTimeout 0 更快。 firefox下: setImmedi
5、ate:不行用。 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 requestAnimationFram
6、e 因此我们可以简洁封装一个快速执行异步function的方法: view sourceprint?01 var setZeroTimeout = (function() 02 if(window.setImmediate) 03 /IE10+版本,用法原生setImmediate 04 return window.setImmediate; 05 06 else if(onreadystatechange in document.createElement(script) 07 return function()/* 用法onreadystatechange的版本 */ 08 09 else if(window.postMessage) 10 return function()/* 用法onmessage的异步执行版本 */ 11 12 else 13 return window.setTimeout; 14 15 16 )(); 更多信息请查看IT技术专栏 .