在现代 Web 开发中，页面加载速度是影响用户体验和搜索引擎优化（SEO）的关键因素之一。为了提高页面加载速度，浏览器提供了一系列资源提示关键词，包括 defer、async、preload、prefetch、prerender 和 preconnect，帮助开发者优化资源加载的优先级和顺序。

一、渲染阻塞回顾

在深入探讨资源提示关键词之前，我们需要回顾一下渲染阻塞的概念。渲染阻塞是指某些资源（如 CSS 和 JavaScript）在加载和解析过程中会阻止页面的渲染，从而延迟页面的首次内容绘制（FCP）和首次可交互时间（TTI）。

（一）DOM 和 CSSOM

浏览器在解析 HTML 时会构建 DOM（文档对象模型），而 CSS 样式会被解析为 CSSOM（CSS 对象模型）。只有当 DOM 和 CSSOM 构建完成后，浏览器才会生成渲染树并开始渲染页面。

（二）JavaScript 的阻塞特性

JavaScript 是一种可以动态修改 DOM 和 CSSOM 的语言。因此，当浏览器遇到 <script> 标签时，必须立即执行脚本，以确保后续内容的正确解析。如果脚本是外部的，浏览器需要暂停解析 HTML，等待脚本下载和执行完成后再继续解析。

（三）CSS 的阻塞特性

CSS 也会阻塞渲染，因为浏览器需要在渲染页面之前解析所有 CSS 样式。如果 CSS 文件过大或加载过慢，会导致页面渲染延迟。

二、资源提示关键词

为了优化页面加载速度，现代浏览器提供了以下资源提示关键词，帮助开发者更好地控制资源加载的顺序和优先级。

（一）defer和async

defer 和 async 是用于优化 JavaScript 加载的两个属性，它们可以减少 JavaScript 对页面渲染的阻塞。

1.async

async 表示脚本的加载和执行是异步的，不会阻塞 DOM 的构建。脚本会在下载完成后立即执行，但不会影响后续 HTML 的解析。

特点：

• 适用于不依赖于 DOM 完全加载的脚本。
• 适合用于加载第三方库（如统计代码）。

2.defer

defer 表示脚本的加载是异步的，但执行会在 DOM 完全解析后、DOMContentLoaded 事件触发前完成。这意味着脚本不会阻塞 DOM 的构建，但会在页面加载完成后执行。

特点：

• 适用于依赖于 DOM 完全加载的脚本。
• 适合用于初始化页面功能的脚本。

（二）preload

preload 是一种预加载机制，用于告诉浏览器提前加载某些资源。这些资源会在页面加载时立即可用，从而减少加载时间。

特点：

• 适用于页面中必须立即加载的资源。
• 可以通过 as 属性指定资源类型，帮助浏览器优化加载策略。

（三）prefetch

prefetch 是一种预加载机制，用于在浏览器空闲时加载页面将来可能用到的资源。这些资源会被缓存，以便在用户访问相关页面时快速加载。

特点：

• 适用于用户可能访问的下一个页面的资源。
• 可以显著提升多页面应用（MPA）的用户体验。

（四）prerender

prerender 是一种更激进的预加载机制，它会在后台渲染整个页面。这意味着当用户点击链接时，页面已经加载完成，用户可以立即看到内容。

特点：

• 适用于用户极有可能访问的页面。
• 可能会增加服务器负载，需要谨慎使用。

（五）preconnect

preconnect 是一种资源提示，用于告诉浏览器提前建立连接。它可以在实际请求资源之前完成 DNS 查找、TCP 握手和 TLS 协商，从而减少请求延迟。

特点：

• 适用于需要频繁请求的外部资源（如 CDN）。
• 可以显著减少首次请求的延迟。

（六）dns-prefetch

dns-prefetch 是一种资源提示，用于告诉浏览器提前进行 DNS 查找。它可以在用户浏览页面时后台进行 DNS 解析，从而减少后续请求的延迟。

特点：

• 适用于外部资源（如字体、CDN）的 DNS 解析。
• 可以显著减少首次请求的延迟。

三、最佳实践

（一）合理使用defer和async

• 使用 async 加载不依赖于 DOM 完全加载的脚本。
• 使用 defer 加载依赖于 DOM 完全加载的脚本。

（二）预加载关键资源

• 使用 preload 预加载页面中必须立即加载的资源。
• 使用 prefetch 预加载用户可能访问的下一个页面的资源。

（三）提前建立连接

• 使用 preconnect 提前建立连接，减少首次请求的延迟。
• 使用 dns-prefetch 提前进行 DNS 查找，减少后续请求的延迟。

（四）避免过度预加载

• 预加载资源会增加服务器负载，需要根据实际需求合理使用。
• 避免预加载过多资源，以免浪费带宽和服务器资源。