HTML中link标签的as属性值设置为style和script的区别-html教程-PHP中文网

as="style"根本不存在，浏览器会忽略并降级为普通fetch请求；正确写法是as="stylesheet"，且仅在rel="preload"中有效并需配合rel="stylesheet"引入才能触发css解析阻塞。

html中link标签的as属性值设置为style和script的区别

as="style"根本不存在，浏览器会忽略

HTML规范里压根没有 as="style" 这个取值。如果你在 <link rel="preload"> 里写了 as="style"，浏览器不会报错，但会把它当做一个未知类型，降级为普通 fetch 请求——这意味着它失去预加载优先级、不参与 CSS 解析阻塞逻辑、也不会触发正确的 MIME 类型校验。实际效果等同于没写 as。

常见错误场景：

复制粘贴时把 rel="stylesheet" 和 as="style" 混淆，误以为“style”是合法的资源类型缩写
用 AI 工具生成代码，输出了不符合规范的 as 值
看到某些文档里写“as 表示资源用途”，就自行类比出 as="style" 这种臆造值

as="script"适用于所有 JS 资源，但必须匹配加载方式

as="script" 是合法且广泛支持的取值，用于 <link rel="preload"> 预加载普通脚本或模块脚本。但它不是万能的——是否生效取决于后续如何使用该资源：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

预加载后用 <script src="..."></script> 引入：完全匹配，浏览器能复用已缓存的响应体
预加载后用 import('./mod.js') 动态导入：也匹配，现代浏览器（Chrome 89+、Firefox 90+）支持模块预加载复用
预加载后用 eval() 或 new Function() 执行字符串：不匹配，因为没走标准脚本加载流程，无法复用
漏写 crossorigin 但脚本来自跨域 CDN：触发 CORS 错误，即使写了 as="script" 也白搭

真正该用的 as 值只有有限几个

目前被主流浏览器稳定支持的 as 值就那么几个，别自己发挥：

as="script"：JS 文件（含 type="module"）
as="style"：❌ 不存在，正确写法是 as="stylesheet" —— 但注意：as="stylesheet" 仅在 rel="preload" 中有效，且必须配合 rel="stylesheet" 的实际引入方式才能触发 CSS 解析阻塞
as="font"：WOFF/WOFF2/TTF 字体，必须带 crossorigin 属性，否则字体加载失败且无 fallback
as="image"：PNG/JPEG/WebP 等图片，可用于 rel="preload" 或 rel="prefetch"
as="fetch"：通用 fetch 资源，优先级最低，适合 API 接口预连接