JS异步执行机制——事件循环（Event Loop）

先祭出一段代码，你清楚它的输出结果吗

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

 `script start`
  `script end`
  `promise1`
  `promise2`
  `setTimeout`

要想知道为什么输出这样的结果，就得弄明白事件循环(Event loop)是如何处理任务(tasks)和微任务(microtasks)的。「还有种说法叫 宏任务 和 微任务」

科普：js是单线程语言，所有任务只能在一个线程上完成，一次只能做一件事，在前面任务没有完成时，后面的任务只能排队。(Web Worker的作用是为 js 创建)多线程环境。

建议阅读本篇文章了解详情：tasks-microtasks-queues-and-schedules

有时间（虽然你会说没时间，但还是建议抽时间慢慢看看这一篇）建议阅读下:HTML Standard

尝试着翻译了下，无奈英语太渣，翻译出内容自己都看着别扭。读原文自己还能理解其大概意思。

下面的代码，你又知道输出结果是什么吗？

<div class="outer">
  <div class="inner"></div>
</div>

// Let's get hold of those elements
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');

// Let's listen for attribute changes on the
// outer element
new MutationObserver(function() {
  console.log('mutate');
}).observe(outer, {
  attributes: true
});

// Here's a click listener…
function onClick() {
  console.log('click');

  setTimeout(function() {
    console.log('timeout');
  }, 0);

  Promise.resolve().then(function() {
    console.log('promise');
  });

  outer.setAttribute('data-random', Math.random());
}

// …which we'll attach to both elements
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);

有个小视频90秒快速解答上面的答案「视频没有解说！放心观看」:https://www.bilibili.com/video/BV18T4y1G7hx/