静思田园

Appearance

任务管理 ​

任务包括 script(整体代码)、 setTimeout、setInterval、DOM 渲染、DOM 事件、Promise、XMLHTTPREQUEST 等

原理分析 ​

下面通过一个例子来详细分析宏任务与微任务

js
console.log("后盾人")
setTimeout(function () {
    console.log("定时器")
}, 0)
new Promise((re) => {
    console.log("promise")
    re()
})
    .then(function () {
        console.log("promise1")
    })
    .then(function () {
        console.log("promise2")
    })
console.log("houdunren.com");


// 输出结果为

// 后盾人
// promise
// houdunren.com
// promise1
// promise2
// 定时器

脚本加载 ​

引擎在执行任务时不会进行 DOM 渲染，所以如果把script 定义在前面，要先执行完任务后再渲染 DOM，建议将script 放在 BODY 结束标签前。

定时器 ​

定时器会放入异步任务队列，也需要等待同步任务执行完成后执行。

HTML 标准规定最小时间不能低于 4 毫秒，有些异步操作如 DOM 操作最低是 16 毫秒，总之把时间设置大些对性能更好。

微任务 ​

微任务一般由用户代码产生，微任务较宏任务执行优先级更高，Promise.then 是典型的微任务，实例化 Promise 时执行的代码是同步的，便 then 注册的回调函数是异步微任务的。

下面是一个进度条的示例，将每个数字放在一个任务中执行

javascript
<body>
  <style>
    body {
      padding: 30px;
    }
    #hd {
      height: 30px;
      background: yellowgreen;
      width: 0;
      text-align: center;
      font-weight: bold;
    }
  </style>
  <div id="hd"></div>
</body>

<script>
  let i = 0;
  (function handle() {
    hd.innerHTML = i + "%";
    hd.style.width = i + "%";
    if (i++ < 100) {
      setTimeout(handle, 20);
    }
  })();
  console.log("定时器开始了...");
</script>