如何正确预加载CSS样式表？多种实现方案的差异与最优选择

四种写法并不完全等效，各有兼容和效果差异 #

• 写法1：<link rel="preload stylesheet" href="style.css" as="style">
  这种写法最简洁但兼容性最差，目前只有Chromium内核浏览器完整支持同时识别两个rel属性，Firefox、Safari旧版本会直接忽略preload属性，相当于普通的stylesheet引入，完全没有预加载优化效果，不建议生产环境使用。
• 写法2：分开写preload和stylesheet两个标签
  这种写法逻辑存在冗余，浏览器解析到第二个stylesheet标签时会立刻发起CSS请求，前面的preload优先级提示完全无效，极端情况下还可能出现同资源重复请求的问题，没有使用价值。
• 写法3：onload动态修改rel+noscript降级
  基本实现了预加载逻辑，预加载完成后才应用样式，不会阻塞HTML解析，但是存在兼容隐患：部分浏览器修改rel为stylesheet后会再次触发onload事件，导致回调重复执行，出现不必要的性能损耗。
• 写法4：onload先清空事件再修改rel+noscript降级
  是目前兼容性最好、逻辑最严谨的标准写法，this.onload=null 避免了事件重复触发的问题，noscript标签保证了禁用JS的用户也能正常加载样式，所有主流浏览器都能正常识别预加载逻辑，达到不阻塞渲染的优化效果。

更优的实现方案 #

如果是首屏核心CSS，最优方案是把首屏渲染必须用到的核心样式直接内联到页面<head>的<style>标签里，完全省去网络请求时间，避免首屏闪烁；非首屏的次要CSS再用上面的第四种写法异步预加载，进一步提升首屏加载速度。

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