结论如下
- 虽然理论上应当先运行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
上表onload指的是script标签的onload事件, nextScript指的是下一个script标签运行
点击事件时运行,运行顺序如下:
浏览器
运行顺序
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