JS微任务 宏任务,Promise、setTimeout、setImmediate运行顺序实测
结论如下
- 虽然理论上应当先运行Promise，再运行setTimeout。但是由于历史版本或使用polyfill，使得Promise未必优先运行。
- setImmediate未必比setTimeout早运行
- 在最新浏览器中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 |
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！