javaScript EventLoop Promise

宏任务

描述	浏览器	Node
I/O	y	y
setTimeout	y	y
setInterval	n	y
requestAnimationFrame	y	n

微任务

描述	浏览器	Node
process.nextTick	n	y
MutationObserver	y	n
Promise.then catch finally	y	y

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #outer {
        padding: 20px;
        background: #616161;
      }

      #inner {
        width: 100px;
        height: 100px;
        background: #757575;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="inner"></div>
    </div>

    <script>
      const $inner = document.querySelector("#inner");
      const $outer = document.querySelector("#outer");

      function handler() {
        console.log("click"); // 直接输出

        Promise.resolve().then((_) => console.log("promise")); // 注册微任务

        setTimeout((_) => console.log("timeout")); // 注册宏任务

        requestAnimationFrame((_) => console.log("animationFrame")); // 注册宏任务

        $outer.setAttribute("data-random", Math.random()); // DOM属性修改，触发微任务
      }

      new MutationObserver((_) => {
        console.log("observer");
      }).observe($outer, {
        attributes: true,
      });

      $inner.addEventListener("click", handler);
      $outer.addEventListener("click", handler);

      $inner.click();
    </script>
  </body>
</html>