HTML link标签的as属性预加载？指定preload资源类型-html教程-PHP中文网

as属性是rel="preload"的强制开关，漏写或错写会导致浏览器静默忽略，不发起请求；as="font"必须搭配crossorigin，否则cors失败且无回退。

html link标签的as属性预加载？指定preload资源类型

as 属性不是“可选补充”，而是 rel="preload" 的强制开关——漏写、错写、或与资源实际用途不匹配，浏览器直接静默忽略整条 <link>，连请求都不会发。

为什么没加 `as` 就等于没写 preload

浏览器看到 rel="preload" 但没带 as，不会报错、不发警告、也不发起网络请求。它退化成一个普通 fetch，Priority 被压到 Low，和没写几乎一样。

as 是浏览器调度资源的唯一依据：决定是否启用 CORS、走哪个缓存池（script cache / CSSOM / font loader）、用什么优先级排队
没有 as，浏览器无法判断这个 href 后续会不会被 <script src></script> 或 @font-face 复用，干脆不进关键路径
Chrome、Firefox、Safari 全部强制校验，不是兼容性差异，是规范行为

`as="font"` 必须配 `crossorigin`，否则字体白加载

WOFF2/WOFF 字体预加载时，as="font" 会自动触发匿名 CORS 请求；但若 HTML 里没显式写 crossorigin，服务端响应头缺失 Access-Control-Allow-Origin，预加载就中断，且不会 fallback 到非 CORS 模式。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

✅ 正确写法：<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>（crossorigin 无值即可）
❌ 错误写法：<link rel="preload" href="/fonts/inter.woff2" as="font">（漏 crossorigin）
❌ 错误写法：<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin="use-credentials">（CDN 几乎都不支持带凭证的字体请求）
字体加载失败时，控制台报 CORS error，但页面可能只表现为 FOIT（空白字体），容易被忽略

`as="style"` 和 `as="script"` 不是“下载完就生效”

预加载 CSS 或 JS 不等于它们会自动执行或解析——as="style" 只进 CSS 缓存，as="script" 只进 script 缓存，后续必须有对应的真实使用节点，才能复用。

as="style" 需配合 onload="this.onload=null;this.rel='stylesheet'" 手动切换，否则 CSS 下载完也不会构建 CSSOM
as="script" 不会立即执行；只有当真实 <script src></script> 或 import() 触发时，才从缓存取并进入执行队列
路径必须完全一致（含查询参数）：预加载 main.js?v=1，但脚本引用的是 main.js，就不会复用
写成 as="fetch" 加载 JS，它只进 HTTP 缓存，不进 script cache，后续 <script></script> 仍会重新 fetch