如何结合media="print"异步CSS与Early hint？解决预加载警告问题

问题原因分析 #

1. 凭证模式不匹配：Early Hint里的crossorigin未指定值时默认是anonymous（不携带凭证），但同源CSS请求默认会携带Cookie等凭证，导致预加载资源与实际请求的凭证模式不一致，浏览器无法复用预加载资源。
2. 预加载资源未被关联复用：原代码用media="print"实现异步加载的方式，浏览器无法识别该link标签与预加载的XXX.css是同一资源，且切换media的时机较晚，导致window load事件后资源仍未被标记为“已使用”。

修复方案 #

1. 统一凭证模式 #

调整Early Hint响应头，明确指定crossorigin=use-credentials，匹配同源CSS请求的默认凭证模式：

Link: </XXX.css>; rel=preload; as=style; crossorigin=use-credentials, </YYY.js>; rel=modulepreload; as=script

2. 修改HTML的CSS加载逻辑 #

将原media="print"的异步方式，改为用rel="preload"配合onload切换为stylesheet的方式，让浏览器明确关联预加载资源：

<link rel="preload" href="/XXX.css" as="style" id="main-css" crossorigin="use-credentials">
<script>
  const cssLink = document.getElementById('main-css');
  cssLink.onload = function() {
    cssLink.rel = 'stylesheet';
  };
</script>

额外注意事项 #

• 确保XXX.css的路径（包括大小写、绝对/相对路径）在Early Hint和HTML中完全一致，避免浏览器判定为不同资源。
• 如果站点不需要携带凭证即可访问CSS，也可以将Early Hint和HTML中的crossorigin都设为anonymous，同样能解决凭证模式不匹配问题。

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