19°

JS微任务 宏任务,Promise、setTimeout、setImmediate运行顺序实测

结论如下

  1. 虽然理论上应当先运行Promise,再运行setTimeout。但是由于历史版本或使用polyfill,使得Promise未必优先运行。
  2. setImmediate未必比setTimeout早运行
  3. 在最新浏览器中Promise会早于事件冒泡运行,在设计框架时应考虑这一情况

以下是实测情况

--------------------------------------------------------------------------------

脚本加载时运行,运行顺序如下:

浏览器 运行顺序
chrome18 onload,nextScript,setTimeout
chrome33 onload,nextScript,setTimeout,Promise
chrome35 onload,nextScript,setTimeout,Promise
chrome36 Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome39 Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome41 Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome43 Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome63 Promise,onload,nextScript,setTimeout
ie6 complete,nextScript,setTimeout
ie7 complete,nextScript,setTimeout
ie8 nextScript,complete,setTimeout
ie9 complete,nextScript,onload,setTimeout
ie10 onload,nextScript,complete,setTimeout,setTimeout,setImmediate
ie11 onload,nextScript,setTimeout,setTimeout,setImmediate
edge18 onload,Promise,nextScript,setTimeout,setTimeout,setImmediate
firefox3.6 onload,nextScript,setTimeout
firefox4 onafterscriptexecute,onload,setTimeout,nextScript
firefox7 onafterscriptexecute,onload,setTimeout,nextScript
firefox10 onafterscriptexecute,onload,nextScript,setTimeout
firefox31 onload,nextScript,setTimeout,Promise
firefox55 onload,Promise,nextScript,setTimeout,setTimeout,setImmediate
firefox57 onload,Promise,nextScript,setTimeout,setTimeout,setImmediate
firefox71 Promise,onload,nextScript,setTimeout

 点击事件时运行,运行顺序如下:

浏览器 运行顺序
chrome18 btn.onclick,body.onclick,document.onclick,setTimeout
chrome33 btn.onclick,body.onclick,document.onclick,Promise,setTimeout
chrome35 btn.onclick,body.onclick,document.onclick,Promise,setTimeout
chrome36 btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome39 btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome41 btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome43 btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome63 btn.onclick,Promise,body.onclick,document.onclick,setTimeout
ie6 btn.onclick,body.onclick,document.onclick,setTimeout
ie7 btn.onclick,body.onclick,document.onclick,setTimeout
ie8 btn.onclick,body.onclick,document.onclick,setTimeout
ie9 btn.onclick,body.onclick,document.onclick,setTimeout
ie10 btn.onclick,body.onclick,document.onclick,setImmediate,setTimeout,setTimeout
ie11 btn.onclick,body.onclick,document.onclick,setImmediate,setTimeout,setTimeout
edge18 btn.onclick,Promise,body.onclick,document.onclick,setImmediate,setTimeout,setTimeout
firefox3.6 btn.onclick,body.onclick,document.onclick,setTimeout
firefox4 btn.onclick,body.onclick,document.onclick,setTimeout
firefox7 btn.onclick,body.onclick,document.onclick,setTimeout
firefox10 btn.onclick,body.onclick,document.onclick,setTimeout
firefox31 btn.onclick,body.onclick,document.onclick,Promise,setTimeout
firefox55 btn.onclick,body.onclick,document.onclick,Promise,setTimeout
firefox57 btn.onclick,body.onclick,document.onclick,Promise,setTimeout
firefox71 btn.onclick,Promise,body.onclick,document.onclick,setTimeout

本文由【linsk1998】发布于开源中国,原文链接:https://my.oschina.net/linsk1998/blog/3159828

全部评论: 0

    我有话说: