掌握脚本标签：使用 Async 和 Defer 进行精确的脚本控制

在 web 开发领域，优化页面加载时间至关重要。 <script> 标签的两个强大属性 - async 和 defer - 可以显着影响网站的性能。在没有彻底理解这些属性的情况下使用它们可能会影响性能并导致错误。让我们从基础开始，了解这些属性的作用以及何时使用它们。</script>

基础知识：脚本如何加载

默认情况下，当浏览器遇到 <script> 标签时，它：</script>

1. 暂停 html 解析
2. 下载脚本
3. 执行脚本
4. 恢复 html 解析

此过程会减慢页面渲染速度，尤其是对于大型脚本或缓慢的连接。此外，如果脚本在某些 html 元素完全加载之前运行，则可能会导致错误，如果脚本未正确放置在文档中，这种情况通常会发生。

异步和延迟：一把双刃剑

异步

<script async src="script.js"></script>

• 它的作用： 在 html 解析继续的同时异步下载脚本。
• 执行时：下载完成后，暂停 html 解析。
• 使用时：不依赖于其他脚本或dom内容的独立脚本。
• 警告： 可能会乱序执行，可能会破坏依赖关系。

推迟

<script defer src="script.js"></script>

• 它的作用： 在 html 解析继续的同时下载脚本。
• 执行时： html 解析完成后，domcontentloaded 事件之前。
• 使用时：依赖 dom 内容或需要按特定顺序执行的脚本。
• 警告：可能会延迟关键功能的执行。

比较行为

执行顺序：异步、延迟和两者

了解具有不同属性的脚本的执行顺序对于管理依赖关系和确保正确的功能至关重要。其工作原理如下：

1. 常规脚本（无异步或延迟）：

   • 按照它们在文档中出现的顺序执行。
   • 阻止 html 解析，直到下载并执行它们。

2. 异步脚本：

   • 并行下载并在可用时立即执行。
   • 不保证执行顺序；它们一下载就运行。
   • 可能在 dom 完全加载之前执行。

3. 推迟脚本：

   • 并行下载，但仅在 html 解析完成后执行。
   • 按照它们在文档中出现的顺序执行。
   • 在 domcontentloaded 事件之前运行。

4. 同时具有异步和延迟的脚本：

   • async 属性在现代浏览器中优先。
   • 在不支持异步的旧版浏览器中，它们会回退到延迟行为。

执行顺序示例：

<script src="1.js"></script><script async src="2.js"></script><script async src="3.js"></script><script defer src="4.js"></script><script defer src="5.js"></script>

可能的执行顺序：

1. 1.js（块解析）
2. 3.js 或 2.js（以先下载者为准）
3. 2.js 或 3.js（以第二个下载者为准）
4. 4.js
5. 5.js

请注意，如果 1.js 下载时间较长，2 和 3 可以按任何顺序执行，甚至可以在 1 之前执行。

最佳实践

1. 将异步用于分析等独立脚本。
2. 对依赖 dom 或其他脚本的脚本使用 defer。
3. 将脚本放置在 中，并使用异步方式或推迟提前开始下载。
4. 对于关键脚本，请考虑在 中使用内联脚本。

浏览器支持

现代浏览器广泛支持异步和延迟。对于较旧的浏览器，请考虑使用脚本加载器或将脚本放置在

的末尾。