无需登录 数据私有 本地保存

资源提示构建器 - 预连接/预加载/预提取标签生成

开发工具 性能 生成器 资源提示 预加载
8
0
0
0

资源提示构建器

快速生成 Resource Hints 标签 — 预连接 · 预加载 · 预提取 · DNS预解析

Preconnect 配置
输入完整的 origin，例如 https://fonts.gstatic.com
如果目标资源需要 CORS，请选择 anonymous
最佳实践：Preconnect 包含 DNS 解析 + TCP 握手 + TLS 协商，适合确定会使用的关键第三方源。对于仅可能使用的域名，优先使用 DNS-Prefetch。
实时预览
<!-- 在此生成标签 -->
DNS-Prefetch 配置
只需输入 origin，例如 https://cdn.example.com
提示：DNS-Prefetch 仅提前解析 DNS，开销最小。对于可能跳转到的第三方站点或可能使用的 CDN，这是轻量级优化。可与 Preconnect 同时使用作为降级方案。
实时预览
<!-- 在此生成标签 -->
Preload 配置
可选，帮助浏览器判断是否支持该资源
可选，仅在匹配媒体查询时预加载
实时预览
<!-- 在此生成标签 -->
Prefetch 配置
指定 as 可让浏览器更智能地处理预提取的资源
使用场景：Prefetch 用于提前获取未来页面可能需要的资源。浏览器在空闲时间以最低优先级下载，不会影响当前页面的加载性能。
实时预览
<!-- 在此生成标签 -->
已生成的资源提示列表

尚未添加任何资源提示。请在上方生成标签后点击 添加到列表 按钮。

常见问题与知识点

Preconnect 和 DNS-Prefetch 有什么区别？

DNS-Prefetch 仅提前解析 DNS；Preconnect 则进一步完成 TCP 握手和 TLS 协商。Preconnect 开销更大但效果更好。对于确定会使用的关键第三方源使用 Preconnect，对可能使用的域名使用 DNS-Prefetch。可同时使用两者作为渐进增强。

Preload 和 Prefetch 的区别是什么？

Preload 用于当前页面必需的资源，浏览器以高优先级立即下载；Prefetch 用于未来导航可能需要的资源，在空闲时以最低优先级下载。Preload 的资源如果3秒内未使用，浏览器会发出警告。

为什么预加载字体必须设置 crossorigin？

CSS 的 @font-face 在加载字体时会发起 CORS 请求。如果 preload 标签没有设置 crossorigin="anonymous"，浏览器会发起非 CORS 请求，导致两次下载。设置后请求匹配，浏览器能正确使用缓存。

Preload 的 as 属性为什么必须指定？

as 属性告诉浏览器资源的类型，这影响优先级、缓存策略和安全策略。没有 as 属性，浏览器无法正确设置请求的 Accept 头，也无法应用正确的内容安全策略（CSP）。

应该把资源提示标签放在哪里？

所有资源提示标签都应放在 <head> 中，且尽可能靠前。Preconnect 和 DNS-Prefetch 应放在最前面，接着是 Preload（关键资源），最后是 Prefetch。这样浏览器能尽早开始优化工作。

Preload 的 fetchpriority 有什么用？

fetchpriority 属性（high/low/auto）允许微调资源的加载优先级。对于 LCP（最大内容绘制）元素（如首屏大图），设置 fetchpriority="high" 可显著提升性能。该属性在 Chrome 101+ 和 Firefox 113+ 中受支持。

Preconnect 需要设置 crossorigin 吗？

如果后续请求需要 CORS（如使用 crossorigin="anonymous" 的字体或脚本），则 Preconnect 也应设置相同的 crossorigin 属性，确保连接可被复用。否则浏览器可能会建立两条连接。

如何验证资源提示是否生效？

打开浏览器开发者工具 → Network 面板 → 查看资源请求的 Initiator 列。也可以使用 Lighthouse 或 PageSpeed Insights 审核。在 Chrome 中，生效的 Preload 资源会在 Network 面板中显示 "Highest" 优先级。

同时使用 Preconnect 和 DNS-Prefetch 有必要吗？

对于支持 Preconnect 的现代浏览器，DNS-Prefetch 是冗余的。但作为渐进增强策略，可以同时设置，让不支持 Preconnect 的旧浏览器退而使用 DNS-Prefetch。两者并存不会产生负面影响。

在 HTML 中的推荐放置位置
<!-- 1️⃣ 最前面：Preconnect & DNS-Prefetch（尽早建立连接）--> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="dns-prefetch" href="https://cdn.example.com"> <!-- 2️⃣ 其次：Preload（关键资源优先加载）--> <link rel="preload" href="/fonts/main.woff2" as="font" crossorigin> <link rel="preload" href="/css/critical.css" as="style"> <!-- 3️⃣ 最后：Prefetch（未来页面资源，空闲时加载）--> <link rel="prefetch" href="/next-page.html" as="document">
🔧 相关工具