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

42次阅读

共计 751 个字符，预计需要花费 2 分钟才能阅读完成。

本文地址: 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