ab测试中css加载时机不一致导致闪屏，根本原因是css加载与js执行顺序未对齐；应采用loadcss方案结合preload与onload控制激活时机，配合data-variant属性限定作用域，并确保css文件名带哈希以规避缓存失效问题。
AB测试中CSS加载时机不一致导致闪屏
AB测试切样式时页面先渲染旧CSS再替换，用户会看到明显视觉跳变。根本原因是CSS加载和JS执行顺序没对齐，尤其在动态加载方案里更明显。
- 用
link[rel="stylesheet"]动态插入时，浏览器会异步加载并阻塞渲染，但不保证在JS控制样式前完成 -
fetch()+createStyleSheet()或insertRule()可控性高，但需手动处理规则优先级和媒体查询 - 服务端注入
<style></style>标签最稳，但需要后端配合AB分流逻辑，前端无法独立闭环
用 loadCSS 替代原生 link 插入
原生 link 加载不可控，loadCSS（Filament Group方案）能确保CSS加载完成后再激活对应样式块，避免竞态。
- 核心是用
preload提前触发下载，再用onload回调切换media属性启用样式 - 必须给每个实验版本的CSS加唯一
id，比如ab-test-v1-css，方便JS精准控制 - 注意兼容性：IE11 不支持
preload，得降级为link+onload检测（可用sheet.cssRules.length判断是否就绪）
loadCSS('/css/ab-v2.css', { media: 'print' }).onload = () => {
document.getElementById('ab-test-v2-css').media = 'all';
};
通过 data-variant 控制样式作用域
直接覆盖全局CSS容易污染对照组，也难回滚。用属性选择器限定作用范围，比写两套独立class名更轻量、易维护。
- 在
或上动态加data-variant="v2"，所有AB样式都以该属性为前缀 - 避免用
!important，改用提高选择器权重，比如[data-variant="v2"] .btn { background: red; } - 如果用CSS-in-JS（如Emotion），确保
css函数生成的class名带variant标识，否则服务端渲染时SSR/CSR不一致
缓存与CDN导致AB分流失效
CDN或浏览器缓存了旧版CSS，即使后端返回了新 data-variant，样式还是老的——这是线上AB跑偏最常见的原因。
立即学习“前端免费学习笔记（深入）”；
- CSS文件名必须带哈希或版本号，比如
ab-v2.a1b2c3.css，禁止用ab.css?version=2这种查询参数方式（CDN常忽略） - 设置
Cache-Control: public, max-age=31536000, immutable，靠文件名变更强制更新 - 本地开发时用
localhost可能绕过CDN，上线后务必验证CDN节点返回的CSS内容是否匹配当前实验版本
AB测试里最麻烦的从来不是怎么切样式，而是怎么让“切”这件事在每台设备、每个缓存层、每次刷新时都精确发生一次。稍有松动，数据就不可信。
