CSS-in-JS首屏加载慢50–200ms是真实观测值，因需JS执行后动态注入样式，而传统CSS可并行下载、预解析、高效缓存，且运行时开销显著更高。
运行时 CSS-in-JS（如 styled-components、@emotion/react）比静态引入 CSS 多出 50–200ms 首屏加载延迟，这不是理论估算，是真实项目中可测量的开销。
样式注入必须等 JS 执行完才能开始
浏览器对 link rel="stylesheet" 是并行下载 + 预解析的，而 styled.div 这类调用必须等 JS bundle 下载、解析、执行到那一行才触发：字符串模板解析 → 哈希计算 → 选择器重写 → 创建 <style></style> 标签 → 插入 DOM → 浏览器重新解析样式表。这一整套流程是同步阻塞的，无法被浏览器提前优化。
- React 18 并发渲染下，若在
useEffect或useLayoutEffect中插入样式，极易与 DOM 更新错拍，造成视觉跳动或:hover延迟响应 -
useInsertionEffect是唯一能卡在 diff 完成、DOM 修改前的安全时机，但多数业务代码根本没用上 - 未启用 Babel 插件（如
babel-plugin-emotion）时，连静态部分都无法提取，全压 runtime
高频渲染时重复计算和注入导致重排
组件每次 re-render，只要 styled.xxx 或 css 函数写在函数体内，就会生成新规则并调用 sheet.insertRule() —— 浏览器被迫反复解析 CSS、匹配选择器、计算样式、触发布局重排。
- 列表滚动、图表实时更新、拖拽反馈等场景下，样式注入频率和 DOM 变更频率高度耦合
- 错误写法：
const Button = () => { const styledBtn = styled.button`...`; return <styledbtn></styledbtn> }—— 每次渲染都新建实例 - 正确做法：把
styled.button提到模块顶层，或用useMemo缓存结果，避免重复创建样式对象
内存泄漏和样式表节点失控
组件频繁挂载/卸载（如路由切换、弹窗开关），若未做样式清理，旧的 <style></style> 标签不会自动移除，document.styleSheets 数量持续增长，JS 缓存对象也滞留不释放。
立即学习“前端免费学习笔记（深入）”；
- DevTools 里观察
document.styleSheets.length，长时间操作后明显上升，就是典型信号 -
styled-components默认不清理已卸载组件的样式；@emotion/react需要配合CacheProvider和自定义 cache 才可控 - Linaria 等编译时方案完全规避此问题——因为生产环境根本没有 runtime 样式注入逻辑
真正卡住性能的从来不是“用了 CSS-in-JS”，而是把所有样式都交给 runtime 处理，连 padding: 12px 这种静态值都不外提。构建时能确定的东西，就不该留到用户手机上现场算。
