深入探究 defer 和 async：网页加载速度优化利器
2023-12-19 22:14:07
引言
在当今快节奏的网络世界中，网站的加载速度已成为用户体验的关键因素。为应对日益复杂的网页和不断增长的用户期望，Web 开发人员不断寻求方法来优化加载时间，并为用户提供流畅、无缝的体验。defer 和 async 这两个用于异步加载脚本的脚本标签属性，在这个领域发挥着至关重要的作用。
理解 DOM 阻塞和脚本加载
为了理解 defer 和 async 的作用，首先需要了解 DOM 阻塞和脚本加载过程。当浏览器解析 HTML 文档时，它会逐行读取并构建 DOM（文档对象模型）树。在此过程中，如果遇到脚本标签，浏览器会暂停 DOM 解析并执行脚本。这称为 DOM 阻塞。
同步脚本加载会造成严重的性能问题，尤其是当脚本文件较大或需要大量处理时。在此期间，浏览器无法继续构建 DOM，从而导致页面渲染延迟。
defer 和 async：异步脚本加载
defer 和 async 属性通过允许脚本在 DOM 解析期间异步加载和执行，为这个问题提供了解决方案。这两个属性使浏览器能够在继续解析 DOM 的同时并行加载脚本，从而消除了 DOM 阻塞。
defer 属性
defer 属性告诉浏览器在文档解析完成，但页面渲染开始之前执行脚本。这确保了脚本在 DOM 准备就绪且可以安全与之交互时才运行。defer 属性适用于不依赖于其他脚本或 DOM 的脚本。
async 属性
与 defer 不同，async 属性允许脚本在解析和渲染过程的任何时间异步执行。浏览器在下载脚本后立即执行脚本，无需等待 DOM 解析或页面渲染。async 属性适用于不需要等待 DOM 就可运行的脚本，例如分析脚本或广告代码。
比较 defer 和 async
虽然 defer 和 async 都用于异步加载脚本，但它们在执行时间和对其他脚本的依赖性方面存在差异：
| 特性 | defer | async |
|---|---|---|
| 执行时间 | 文档解析完成后 | 下载后立即 |
| 依赖性 | 不依赖于其他脚本或 DOM | 不依赖于其他脚本或 DOM |
最佳实践
在选择 defer 或 async 属性时，请考虑以下最佳实践：
- 将关键脚本标记为 defer，以确保在 DOM 准备就绪时执行。
- 将分析脚本和广告代码标记为 async，以避免阻塞页面加载。
- 避免在脚本中使用 document.write() 函数，因为它会阻止并行加载。
- 使用 performance.getEntries() API 来监控脚本加载时间和页面性能。
示例
以下示例展示了如何使用 defer 和 async 属性：
<script defer src="script1.js"></script>
<script async src="script2.js"></script>
结论
defer 和 async 属性是强大的工具，可帮助开发者优化网页性能并提供出色的用户体验。通过深入理解这些属性的工作原理，以及在不同场景中的最佳实践，开发者可以有效地利用异步脚本加载，创建更快速、更流畅的 Web 应用程序。
