22-深入理解 async 和 defer：优化你的 JavaScript 加载策略

笔记+分享

在现代网页开发中，优化页面加载速度和性能是至关重要的。JavaScript 文件的加载和执行可以显著影响页面的加载时间和用户体验。HTML5 引入了两个重要的属性：async 和 defer，它们可以帮助我们更好地控制脚本的加载和执行行为。那么，async 和 defer 到底是什么，它们之间有什么区别，又该如何选择呢？让我们一起来深入探讨。

async 和 defer 的基本概念

在默认情况下，当浏览器遇到一个 <script> 标签时，会停止解析 HTML，开始下载和执行该脚本。这个过程会阻塞页面的渲染，导致页面加载速度变慢。为了优化这一点，HTML5 引入了 async 和 defer 属性，它们允许脚本异步加载，从而避免阻塞 HTML 的解析。

async 属性

async 属性表示脚本是异步加载和执行的。具体来说：

• 当浏览器遇到带有 async 属性的 <script> 标签时，会开始下载该脚本，同时继续解析 HTML 文档。
• 脚本下载完成后，会立即执行脚本，无论此时 HTML 是否解析完毕。

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

使用 async 的脚本不会保证执行顺序。因此，如果有多个带有 async 属性的脚本