as属性是link rel="preload"的强制要求，决定浏览器如何预加载及复用资源；必须与实际类型严格匹配，如js用as="script"、字体用as="font"（需加crossorigin），否则静默失效或加载失败。

as 属性决定浏览器如何预加载资源

as 不是可选装饰，而是强制要求的属性（Chrome、Firefox、Safari 均校验）。没有它，link rel="preload" 会被忽略——不是报错，而是静默失效。浏览器靠 as 判断该资源后续是否能复用：比如预加载一个 as="script" 的 JS，之后 <script src="..."></script> 才可能命中缓存并跳过重复 fetch；若写成 as="fetch" 或漏掉，就白忙一场。

• 必须与实际资源类型严格匹配：JS 文件必须用 as="script"，CSS 用 as="style"，字体用 as="font"（且需配合 crossorigin）
• 常见误配：as="font" 却没加 crossorigin → 字体加载失败（控制台报 CORS 错误）
• 图片类型较细：SVG 用 as="image"，WebP/AVIF 也走 as="image"，但 as="video" 仅适用于 .mp4、.webm 等真正被 <video></video> 消费的资源

as="font" 是唯一必须带 crossorigin 的场景

字体文件（WOFF2、WOFF）跨域预加载时，as="font" 本身会触发 CORS 请求，但若没显式声明 crossorigin，浏览器会以匿名模式发起请求，而多数 CDN 或字体服务返回的响应头不含 Access-Control-Allow-Origin，导致预加载中断。

• 正确写法：<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
• type 属性非必需，但加上能帮浏览器跳过 MIME 类型探测，略微提速
• 不要写 crossorigin="" 或 crossorigin="anonymous" —— 只要存在 crossorigin 属性（无值）即生效

as 值不匹配 script/style 会导致执行时机异常

预加载 JS 时若错误写成 as="fetch"，浏览器仍会下载，但不会进入 JS 执行队列，也不会触发 onload，更无法被 import() 或 document.createElement('script') 复用。

Massive.com CLI

一款AI数据处理工具，主要用于用于查询 Massive 市场数据端点的 Bash CLI 封装和 OpenClaw 技能，适用于 Codex 或 OpenClaw 代理从 shell 调用，适合需要提升相关任务效率的用户。

下载

• as="script"：资源下载后立即进入 JS 解析准备队列，可被后续同步/动态脚本复用
• as="fetch"：仅进 HTTP 缓存，不进 JS 执行上下文，等同于普通 fetch() 预热
• as="style"：支持 CSSOM 构建提前介入，对 FOIT/FOUT 优化关键；写成 as="fetch" 就失去该能力

第三方资源预加载必须核对 as 值和域名策略

CDN 上的 JS/CSS（如 unpkg、jsDelivr）能预加载，但要注意：

• 域名是否与当前站点同源？不同源时，as="script" + crossorigin 是底线配置
• 某些 CDN 对 preload 返回 404 或 403（如早期 Cloudflare Workers 路由未放行 rel=preload 请求），建议先 curl 测试响应头和状态码
• 不要预加载未在当前 HTML 中明确使用的资源——预加载队列占用主线程带宽，反而拖慢首屏

as 看似简单，但它直接绑定浏览器内部资源分类器。写错一个值，预加载就从“加速”变成“干扰”。尤其注意字体和跨域脚本这两类，出问题时往往没报错，只表现为“怎么预加载了却没变快”。