关于javascript:Script-async-与-defer-有什么区别

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

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

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

JS 的脚本分为 加载、解析、执行 几个步骤，简略对应到图中就是 fetch (加载) 和 execution (解析并执行)
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，内含大厂内推机会、面经大全及若干面试题，每天学习五分钟，一年进入大厂中。

大厂面经大全

大厂内推

拓展