as属性漏写会导致浏览器完全忽略preload指令，不发请求、不报错、不警告；必须严格匹配资源类型（如script/style/font），且字体预加载还需配合crossorigin属性才能生效。
as属性漏写会让浏览器完全忽略preload指令
浏览器看到 rel="preload" 但没带 as，就当它不存在——不发请求、不报错、也不警告。这不是兼容性问题，是 Chrome/Firefox/Safari 全部强制执行的规范行为。没有 as，浏览器无法判断这个资源该进 script 缓存池、CSSOM 构建队列，还是字体加载器，干脆跳过整个预加载逻辑。
漏as导致CSS或JS重复下载的典型链路
假设你写了这样两行：
<link rel="preload" href="main.css"> <link rel="stylesheet" href="main.css">
因为第一行缺 as，浏览器根本不把它当 preload 处理，只当普通 fetch；第二行则按标准流程发起独立请求。结果就是：同一份 CSS 被下载两次，Network 面板里能看到两个 main.css 请求，Initiator 分别是 other 和 parser。
-
as="style"缺失 → 浏览器不把 preload 当作 CSS 资源，不参与 CSSOM 构建，也不与后续rel="stylesheet"匹配缓存 key -
as="script"缺失 → JS 不进 script 缓存池，<script src="app.js">仍会重新 fetch，哪怕路径完全一致 - 路径里多一个查询参数（比如
app.js?v=1vsapp.js）也会复用失败，但漏as是更底层的失效原因
字体漏as+crossorigin的双重静默失败
字体最典型：只写 <link rel="preload" href="font.woff2" as="font"> 但漏 crossorigin，Chrome 会成功下载完，然后直接丢弃——Network 显示 200，但控制台静默无日志，文字继续 FOIT。这是因为 as="font" 自动触发 CORS 请求流程，而服务端没返回 Access-Control-Allow-Origin，浏览器拒绝把响应体交给字体加载器。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须同时满足三项：
as="font"+crossorigin（无值即可） +@font-face中src与 preload 的href完全一致（协议、域名、路径、查询参数） - 少任一环，DevTools 里都看不到错误，只看到文字没换字体
-
crossorigin="anonymous"和crossorigin=""效果一样，但写成crossorigin="use-credentials"反而容易被 CDN 拒绝
怎么确认as有没有起作用
别信“没报错=生效”。打开 Chrome DevTools → Network 面板 → 刷新页面 → 筛选 Initiator 列为 preload 的请求：
- 看到
Priority是Highest或High→as正确且被识别 - 看到
Initiator是other或parser→ 标签位置错了（比如在<body>里），或被注释/条件编译干掉 - 根本搜不到任何
preload请求 →as漏了，或者标签没被 HTML 解析器读到（比如动态插入）
真正起效的 preload，不是加了就完事，而是每一处 as 值、路径、属性组合，都得和浏览器调度机制对齐。差一个字符，就回到原始加载节奏。
