网页资源提示生成器
从资源的纯列表生成正确的 <link rel> 资源提示标签（preload、prefetch、preconnect、dns-prefetch、modulepreload）和等效的 HTTP Link 标头，并自动提供 as= 和 crossorigin 指导。
输入
每行一个资源：url | hint type | resource type (as=) | crossorigin | media。仅需要 url 和 hint type，其他字段可以省略。Hint types：preload、prefetch、preconnect、dns-prefetch、modulepreload。以 # 开头的行将被忽略。
输出
自动应用的修复（如为字体添加 crossorigin）以及任何值得再次检查的内容。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/web-resource-hints-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"resources": "https://fonts.gstatic.com | preconnect | | anony…"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `web-resource-hints-generator` tool (Web Resource Hints Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/web-resource-hints-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="网页资源提示生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
网页资源提示生成器将资源的纯列表转换为正确格式的 HTML <link rel> 标签和等效的 HTTP Link: 标头，用于 preload、prefetch、preconnect、dns-prefetch 和 modulepreload。它自动应用浏览器实际使用的属性规则 — preload 的 as=、字体的 crossorigin — 并告诉您所做的更改。
如何使用此工具
按以下格式每行输入一个资源：
url | hint type | resource type | crossorigin | media仅需要 URL 和 hint type — 尾随字段可以省略。例如：
https://fonts.gstatic.com | preconnect | | anonymous
/styles/critical.css | preload | style
/fonts/inter.woff2 | preload | font该工具生成 HTML <link> 标签（用于您的 <head>）和等效的 HTTP Link: 标头行（用于服务器级配置，因为标头提示在浏览器甚至开始解析 HTML 之前就被应用）。复制您的设置使用的任何格式。
提示类型
preload— 获取此页面肯定需要的资源，优先级高，不阻止渲染。需要as=。prefetch— 获取未来导航可能需要的资源，优先级低，在空闲时进行。preconnect— 提前打开跨域主机的连接（DNS + TCP + TLS），但不获取任何内容。dns-prefetch— 提前解析主机的 DNS；对不支持preconnect的浏览器来说是更便宜的备选方案。modulepreload— 预加载 JavaScript 模块及其依赖关系图。
为什么 as= 和 crossorigin 很重要
没有对应 as= 值（script、style、image、font、fetch、document、audio、video、track、worker、embed、object、manifest）的 preload 会以错误的优先级获取或被完全忽略，因为浏览器无法确定如何将其与最终请求相匹配。尤其是字体必须以 CORS 模式获取，即使是同源的 — 该工具会自动为任何 as=font 行添加 crossorigin 并在"指导"面板中解释原因。
工具为什么有时添加 crossorigin 而不带值？
不带值的 crossorigin 属性（无 ="anonymous"）是匿名模式 CORS 的标准简写 — 浏览器本身在其自己的预加载示例中使用的形式。仅当资源需要 Cookie 或 HTTP 身份验证时才显式使用 crossorigin="use-credentials"。
HTML 标签还是 HTTP 标头 — 应该使用哪个？
HTTP Link: 标头在浏览器甚至开始解析 HTML 之前就被发现，因此它可以比放在 <head> 中的相同 <link> 标签更早地提示 — 对于可以注入标头的 CDN 或反向代理，或对于您想要在整个站点应用的 preconnect/dns-prefetch 提示很有用。否则，HTML 标签更容易维护，因为它就在它支持的标记旁边。
要检查实时网站已经在发送哪些标头，请使用 HTTP 标头分析器。对于相关的 HSTS 安全标头，请参阅 HSTS 预加载标头生成器。要重定向旧 URL 而不是提示新 URL，请参阅 重定向规则生成器。