同时含preload与stylesheet的link标签加载行为及异步有效性确认

核心结论 #

这种同时在rel中指定preload和stylesheet的写法无效，无法实现CSS异步加载，反而会像普通样式表请求一样阻塞页面渲染。

具体分析 #

1. rel属性的逻辑冲突
   preload是用于预加载资源但不自动解析/应用的指令，而stylesheet是告诉浏览器这是需要加载并立即应用的样式表。当两者在同一个rel属性中并存时，浏览器会优先识别stylesheet的标识，将该请求视为普通样式表加载——这意味着浏览器会同步下载该CSS文件，并且在下载完成前阻塞页面渲染，完全失去了异步加载的意义。

2. 违背preload的规范设计
   根据规范，preload的正确用法是单独作为rel的值，配合as指定资源类型，预加载完成后需要通过脚本或后续的资源引用（比如单独的link rel="stylesheet"标签）来使用该资源。拆分写法才是符合规范的异步预加载实现：

   <link rel="preload" href="style.css" as="style">
   <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
   

   这种写法中，preload负责提前异步下载资源，而第二个link标签通过media技巧实现样式表的异步应用，两者配合才是有效的异步加载方案。

3. 实际浏览器行为验证
   在主流浏览器（Chrome、Firefox、Safari）中测试该合并写法，会发现浏览器会立即发起CSS请求，并且在请求完成前阻塞页面渲染，和直接写<link rel="stylesheet" href="style.css">的行为完全一致，没有任何异步加载的效果。

关于你提到的大型网站写法 #

这种写法大概率是错误的，可能是开发者对preload的用法存在误解。如果想要通过preload优化CSS加载性能，必须采用拆分的写法，将预加载和样式表应用的逻辑分开。

内容的提问来源于stack exchange，提问作者Horizon