接下来是一段JS：//让我们掌握那些elementsvarouter=document.querySelector('.outer');varinner=document.querySelector('.inner');//让我们监听//外部元素的属性变化newMutationObserver(function(){console.log('mutate');}).observe(outer,{attributes:true});//这是一个点击监听器...functiononClick(){console.log('click');setTimeout(function(){console.log('timeout');},0);Promise.resolve().then(function(){console.log('promise');});outer.setAttribute('data-random',Math.random());}//...我们将附加到两个元素inner.addEventListener('click',onClick);outer.addEventListener('click',点击）；/**click*promise*mutate*click*promise*mutate*timeout*timeout*/在不同浏览器中的表现：Chrome:clickpromisemutateclickpromisemutatetimeouttimeoutFireFox:clickmutateclickmutatetimeoutpromisepromisetimeoutSafari:clickmutateclickmutatepromisepromisetimeouttimeoutEdge:clickclickmutatetimeoutpromisetimeoutpromise哪个是正确的将'click'事件作为宏任务抛出，Mutationobserver和promise的回调函数被安排为微任务，setTimeout的回调被视为宏任务。因此，Chrome的运行结果是正确的。这里有点奇怪的是，微任务是在回调函数之后执行的（直到没有其他代码被执行），我认为这限制了marcotask的完成。这条限制回调函数的规则来自于HTML：如果脚本设置对象的栈现在为空，执行一个microtaskcheckpoint—HTML:Cleaningupafteracallbackstep3同时，一个microtaskcheckpoint遍历整个microtask队列，除非我们已经在执行微任务队列。类似地，ECMAScript描述了作业：ExecutionofaJobcanbeinitiatedonlywhenthereisnorunningexecutioncontextandtheexecutioncontextstackisempty...isinitialized）——ECMAScript:JobsandJobQueues虽然这里的“可以”变成了“必须”是”在HTML环境中。浏览器是怎么出错的？Firefox和Safari在点击之间运行所有微任务，如变异回调所示，但承诺似乎有不同的排序算法。这是可以理解的，因为jobs和microtasks之间的关系比较模糊，但我仍然可以肯定它们会在两次点击回调操作之间运行到完成。Firefox门票。Safari门票。对于Edge我们已经可以确认它的promise队列类型是错误的，但是它仍然运行了两次点击回调动作之间的所有微任务，而是调用了完成的所有监听器回调之后，两次点击只触发了一次mutate。Bugticket尝试更复杂的东西现在我们只需在代码末尾添加一行新代码来替换点击：//让我们抓住那些元素varouter=document.querySelector('.outer');varinner=document.querySelector('.inner');//让我们监听//外部元素的属性变化newMutationObserver(function(){console.log('mutate');}).observe(outer,{attributes:true});//这是一个点击监听器...functiononClick(){console.log('click');setTimeout(function(){console.log('timeout');},0);Promise.resolve().then(function(){console.log('promise');});outer.setAttribute('data-random',Math.random());}//...我们将附加到两个元素inner.addEventListener('click',onClick);outer.addEventListener('click',点击）；inner.click();这将像前面的示例一样抛出点击事件，但我们使用代码而不是实际的点击交互。试一试Chrome:clickclickpromisemutatepromisetimeouttimeoutFireFox:clickclickmutatetimeoutpromisepromisetimeoutSafari:clickclickmutatepromisepromisetimeouttimeoutEdge:clickclickmutatetimeoutpromisetimeoutpromise为什么会这样在所有的监听回调触发完成后…Ifthestackofscriptsettingsobjectsisnowempty,performamicrotaskcheckpoint—HTML:Cleaningupafteracallbackstep3在在前面的例子中，microtasks会运行在两次点击回调之间，但是.click()使得两个事件序列同步执行，所以两次点击回调之间仍然有js代码在运行。上述规则确保微任务不会中断正在执行的代码片段。这意味着我们不能在两个点击监听器之间执行微任务队列，它们将在监听器回调执行完成后开始运行。总结Macrotask会顺序执行，浏览器可能会在它的执行间隔内进行渲染操作。Microtask会顺序执行：在所有回调完成后，没有其他js代码在执行。每个宏任务完成后，我希望你现在清楚我已经了解了事件循环，或者至少我可以休息一下。