CSS异步加载样式不生效的核心原因是浏览器未将其作为关键样式表处理或加载过晚；preload仅下载不应用，需手动设rel="stylesheet"；动态插入须早于首屏渲染；跨域需CORS支持；还需排查媒体查询与层叠冲突。
CSS 异步加载（比如用 rel="preload" 或动态创建 link 标签）后样式不生效，核心原因只有一个：浏览器没把它当“关键样式表”处理，或加载完成时文档已渲染完毕，导致样式未参与首次绘制。
preload 的 CSS 不会自动应用
rel="preload" 只是提前下载资源，不会解析、不会生效。它本质是个“下载指令”，和 rel="stylesheet" 完全不同。
- 写法错误示例：
→ 下载了但页面完全没变 - 正确做法：preload 后必须手动挂载为 stylesheet，例如：
或者用 JS 控制：
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = 'style.css';
link.onload = () => { link.rel = 'stylesheet'; };
document.head.appendChild(link);
动态插入 link 时机太晚
如果 JS 在 DOMContentLoaded 甚至 load 之后才插入 link[rel="stylesheet"]，浏览器可能已结束首屏渲染，新样式只影响后续重绘（比如滚动、交互），看起来“不生效”。
立即学习“前端免费学习笔记（深入）”；
- 确保在
中尽早执行插入逻辑（如放在底部或使用defer脚本） - 避免在
window.onload或点击事件里才加载非关键 CSS - 可加个简单检测：插入后立即读取
getComputedStyle(document.body).color，看是否已更新
跨域 CSS 没配 CORS，onload 不触发
当 CSS 文件跨域（比如 CDN）且服务端没返回 Access-Control-Allow-Origin，浏览器会静默失败：文件能下载，但 onload 事件不触发，rel 永远不会改成 stylesheet。
- 检查控制台是否有 “CORS policy” 报错
-
解决方法：服务端加响应头
Access-Control-Allow-Origin: *（或指定域名） - 或改用
rel="stylesheet"+media="print"+ onload 切换 media（兼容性更好，无需 CORS）
媒体查询或层叠冲突掩盖了效果
样式“加载了但看不到”，也可能是：
- CSS 里写了
media="screen and (min-width: 1200px)"，而当前视口不匹配 - 同名选择器被更早加载的 CSS 覆盖（权重相同则后加载者胜，但 preload+onload 的顺序可能不如预期）
- 用了
!important却被更高优先级规则压制（比如内联样式）
建议打开开发者工具的 Elements 面板，选中元素，右侧 Styles 标签页确认该 CSS 文件是否出现在“Computed”或“Styles”列表中，并展开查看是否被 strike-through（划掉）。
基本上就这些。关键是分清 preload 是“下”，stylesheet 才是“用”；时机、跨域、层叠三者最容易踩坑。
