本文地址: https://q.shanyue.tech/fe/js/...

以下图片取自 whatwg 的标准，能够说是最权威的图文解释了，具体参考原文

在失常状况下，即 <script> 没有任何额定属性标记的状况下，有几点共识

  1. JS 的脚本分为加载、解析、执行几个步骤，简略对应到图中就是 fetch (加载) 和 execution (解析并执行)
  2. JS 的脚本加载(fetch)且执行(execution)会阻塞 DOM 的渲染，因而 JS 个别放到最初头

而 defer 与 async 的区别如下:

  • 相同点: 异步加载 (fetch)

  • 不同点:

    • async 加载(fetch)实现后立刻执行 (execution)；
    • defer 加载(fetch)实现后提早到 DOM 解析实现后才会执行(execution)**，但会在事件 DomContentLoaded 之前

拓展

当以下 index.js 加载时，属性是 async 与 defer 时，输入有何不同？

index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title></head><body>  <script src="index.js" defer></script>  <script>    console.log('Start')    document.addEventListener('DOMContentLoaded', () => {      console.log('DCL')    })  </script></body></html>

index.js

console.log('Async Script')

本文收录于 GitHub 日问: DailyQuestion，内含大厂内推机会、面经大全及若干面试题，每天学习五分钟，一年进入大厂中。

  • 大厂面经大全
  • 大厂内推