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

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

基础知识：脚本如何加载

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

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

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

异步和延迟：一把双刃剑

异步

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

推迟

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

比较行为

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

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

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

2. 异步脚本：

3. 推迟脚本：

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

执行顺序示例：

<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. 对于关键脚本，请考虑在 中使用内联脚本。

浏览器支持

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