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

摘要:虽然理论上应当先运行Promise,再运行setTimeout。但是由于历史版本或使用polyfill,使得Promise未必优先运行。setImmediate未必比setTimeout早运行

结论如下

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

以下是实测情况

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

浏览器运行顺序
chrome18onload,nextScript,setTimeout
chrome33onload,nextScript,setTimeout,Promise
chrome35onload,nextScript,setTimeout,Promise
chrome36Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome39Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome41Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome43Promise,Object.observe,Promise,onload,nextScript,setTimeout
chrome63Promise,onload,nextScript,setTimeout
ie6complete,nextScript,setTimeout
ie7complete,nextScript,setTimeout
ie8nextScript,complete,setTimeout
ie9complete,nextScript,onload,setTimeout
ie10onload,nextScript,complete,setTimeout,setTimeout,setImmediate
ie11onload,nextScript,setTimeout,setTimeout,setImmediate
edge18onload,Promise,nextScript,setTimeout,setTimeout,setImmediate
firefox3.6onload,nextScript,setTimeout
firefox4onafterscriptexecute,onload,setTimeout,nextScript
firefox7onafterscriptexecute,onload,setTimeout,nextScript
firefox10onafterscriptexecute,onload,nextScript,setTimeout
firefox31onload,nextScript,setTimeout,Promise
firefox55onload,Promise,nextScript,setTimeout,setTimeout,setImmediate
firefox57onload,Promise,nextScript,setTimeout,setTimeout,setImmediate
firefox71Promise,onload,nextScript,setTimeout

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

浏览器运行顺序
chrome18btn.onclick,body.onclick,document.onclick,setTimeout
chrome33btn.onclick,body.onclick,document.onclick,Promise,setTimeout
chrome35btn.onclick,body.onclick,document.onclick,Promise,setTimeout
chrome36btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome39btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome41btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome43btn.onclick,Promise,Object.observe,Promise,body.onclick,document.onclick,setTimeout
chrome63btn.onclick,Promise,body.onclick,document.onclick,setTimeout
ie6btn.onclick,body.onclick,document.onclick,setTimeout
ie7btn.onclick,body.onclick,document.onclick,setTimeout
ie8btn.onclick,body.onclick,document.onclick,setTimeout
ie9btn.onclick,body.onclick,document.onclick,setTimeout
ie10btn.onclick,body.onclick,document.onclick,setImmediate,setTimeout,setTimeout
ie11btn.onclick,body.onclick,document.onclick,setImmediate,setTimeout,setTimeout
edge18btn.onclick,Promise,body.onclick,document.onclick,setImmediate,setTimeout,setTimeout
firefox3.6btn.onclick,body.onclick,document.onclick,setTimeout
firefox4btn.onclick,body.onclick,document.onclick,setTimeout
firefox7btn.onclick,body.onclick,document.onclick,setTimeout
firefox10btn.onclick,body.onclick,document.onclick,setTimeout
firefox31btn.onclick,body.onclick,document.onclick,Promise,setTimeout
firefox55btn.onclick,body.onclick,document.onclick,Promise,setTimeout
firefox57btn.onclick,body.onclick,document.onclick,Promise,setTimeout
firefox71btn.onclick,Promise,body.onclick,document.onclick,setTimeout

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_7261