网络请求到页面渲染：async/defer和prefetch/preload作用详解

从网络请求到页面渲染：async/defer、prefetch/preload 的作用详解

引言

网络请求是网页加载过程中至关重要的环节，它影响着用户体验和网站性能。在复杂的网页环境中，为了优化网络请求流程，出现了各种优化技术，如 async/defer 和 prefetch/preload。这些技术通过不同的机制，提升了网页加载速度和交互流畅度。本文将深入探究 async/defer 和 prefetch/preload 的作用，帮助您理解它们在网页优化中的重要性。

async/defer

async 和 defer 是 HTML 中的两个属性，用于控制外部脚本的加载和执行顺序。它们可以通过以下方式提升网页性能：

• 异步加载： async 属性允许脚本在 HTML 解析过程中异步加载，无需等待解析完成。这对于非关键脚本非常有用，因为它可以避免阻塞后续内容的加载。
• 延迟执行： defer 属性将脚本推迟到 HTML 解析完成后再执行。与 async 不同，defer 加载的脚本会在文档的 DOMContentLoaded 事件触发后立即执行，从而确保在文档结构构建完成后执行脚本。

示例：

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

prefetch/preload

prefetch 和 preload 是 HTTP 规范中定义的两个请求头，用于预取资源：

• 预取： prefetch 请求头会异步预取指定资源，但不影响当前页面渲染。预取的资源将存储在浏览器缓存中，以便后续请求时快速访问。
• 预加载： preload 请求头与 prefetch 类似，但会阻塞当前页面渲染，直到预加载的资源加载完成。预加载适用于关键资源，因为它可以减少后续加载这些资源时产生的延迟。

示例：

<link rel="prefetch" href="prefetch-resource.js">
<link rel="preload" href="preload-resource.css" as="style">

比较和选择

async/defer 和 prefetch/preload 都可以提升网页性能，但它们的作用有所不同：

• 使用场景： async/defer 用于优化外部脚本加载，而 prefetch/preload 用于预取资源（如图像、脚本、样式表）。
• 影响页面渲染： async 异步加载脚本，不会阻塞渲染；defer 延迟执行脚本，直到 DOMContentLoaded 事件触发后；prefetch 不影响渲染，preload 会阻塞渲染。
• 缓存机制： prefetch 预取的资源会存储在浏览器缓存中，preload 预加载的资源会进入浏览器进程空间，可立即使用。

在选择使用哪种技术时，需要考虑以下因素：

• 资源类型： 对于脚本，使用 async 或 defer；对于非关键资源，使用 prefetch；对于关键资源，使用 preload。
• 优先级： 如果资源非常关键，需要尽快加载，则使用 preload；否则，使用 prefetch 或 async/defer。
• 浏览器支持： prefetch 和 preload 得到现代浏览器广泛支持，而 async/defer 的支持较老。

最佳实践

使用 async/defer 和 prefetch/preload 优化网页性能时，请遵循以下最佳实践：

• 仅对非关键脚本使用 async 或 defer。
• 仅对关键资源使用 preload。
• 使用媒体查询或特性检测来针对不同浏览器。
• 监控网站性能以跟踪优化效果。

结语

async/defer 和 prefetch/preload 是网页优化中的强大工具，它们可以显著提升网页加载速度和交互流畅度。通过理解它们的作用和差异，您可以根据特定的场景和需求选择合适的技术，优化您的网站性能，为用户提供更好的体验。