JavaScript 中 script 标签的 defer 和 async 属性的差异

script 标签：加载和执行

<script> 标签是 HTML 中用于向网页中引入 JavaScript 代码的元素。当浏览器遇到<script> 标签时，它会暂停 HTML 解析，下载脚本，然后执行它。这种默认行为称为同步加载，因为它会阻塞页面呈现，直到脚本加载和执行完成。

defer 和 async 属性

为了解决同步加载的问题，HTML5 引入了 defer 和 async 属性，允许异步加载脚本，从而提高页面性能。

defer

defer 属性允许浏览器在解析完 HTML 后异步加载脚本。这意味着脚本不会阻塞页面呈现，但它会在文档解析完成后执行。这种方法对于在页面底部放置的脚本很有用，因为它允许页面内容尽快呈现给用户。

async

async 属性允许浏览器在 HTML 解析期间异步加载脚本。这意味着脚本不会阻塞页面呈现，并且它将在可用时立即执行，而无需等待文档解析完成。这对于需要立即执行的脚本（例如分析脚本）很有用。

关键区别

虽然 defer 和 async 属性都支持异步脚本加载，但它们在几个关键方面有所不同：

• 执行顺序： defer 脚本在 HTML 解析完成后按顺序执行，而 async 脚本在可用时立即执行。
• 阻塞渲染： defer 脚本不会阻塞页面呈现，而 async 脚本在某些情况下可能会阻塞渲染（例如在脚本执行期间修改 DOM）。
• 并行加载： async 脚本可以并行加载和执行，而 defer 脚本会按顺序加载。
• 加载优先级： defer 脚本具有较低的加载优先级，而 async 脚本具有较高的加载优先级。

如何选择

选择 defer 还是 async 属性取决于脚本的用途和页面性能目标。以下是选择指南：

• 使用 defer： 对于不依赖于其他脚本或 DOM 就绪的脚本，defer 是一个不错的选择。
• 使用 async： 对于需要立即执行的脚本（例如分析脚本或关键功能），async 是一个更好的选择。

注意事项

使用 defer 和 async 属性时，需要注意以下事项：

• 脚本依赖关系： 确保脚本之间没有依赖关系，否则可能会导致执行错误。
• 脚本错误： 脚本错误会在控制台中抛出，即使它们使用 defer 或 async 加载。
• 浏览器支持： defer 和 async 属性在所有现代浏览器中都得到支持。

结论

defer 和 async 属性是优化 Web 应用程序性能的强大工具。通过理解它们的差异，开发人员可以做出明智的决定，以选择适合其特定需求的加载策略。异步加载脚本不仅可以提高页面呈现速度，还可以提高用户体验和网站的整体性能。