卡顿并非CSS-in-JS固有缺陷，而是高频渲染、动态样式未缓存、静态样式未提取三者叠加导致运行时开销爆炸；需用useInsertionEffect+哈希缓存+sheet.insertRule，并提取padding等静态样式至构建时。
卡顿不是 CSS-in-JS 本身必然导致的，而是高频渲染 + 动态样式 + 缺乏缓存/提取策略共同触发的运行时开销爆炸。它在大型项目中暴露得更早、更剧烈，但根因不在“用了 CSS-in-JS”，而在“怎么用”。
高频渲染时样式重复注入引发重排
当列表滚动、实时图表更新或拖拽反馈频繁触发 re-render 时，像 styled.div 或 css 函数若直接写在组件内部，每次都会生成新样式规则并插入 <style></style> 标签——浏览器被迫反复解析 CSS、计算样式、重排布局。
- 错误现象：
useEffect或useLayoutEffect中动态插入样式，滚动中元素跳动、:hover延迟响应 - 根本限制：React 18 的并发渲染下，样式注入时机与 DOM 更新不同步，
useInsertionEffect是唯一能卡在 diff 后、DOM 修改前的安全钩子 - 关键补救：必须配合哈希缓存 + 复用
<style></style>标签 +sheet.insertRule()追加规则，而非每次都document.head.appendChild(style)
构建时未提取静态样式，全压 runtime
padding、border-radius、font-size 这类不随 props 变化的样式，完全没必要等 JS 执行完再注入。它们占了样式表大头，却在每次首屏加载时被重复计算、序列化、插入 DOM。
- Emotion：必须启用
babel-plugin-emotion，配合import { css } from '@emotion/react'写法，才能把静态部分抽成 .css 文件 - styled-components：需配置
babel-plugin-styled-components，开启ssr: true和displayName: false，否则服务端渲染时无法提取 - Linaria：零 runtime，但代价是放弃纯动态逻辑（如
${props => props.active && 'color: red'}），适合基础组件库
内存泄漏：卸载后样式规则未清理
组件频繁挂载/卸载（比如路由切换、弹窗打开关闭）时，styled-components 或 @emotion/styled 若未做实例复用，会不断创建新 <style></style> 节点，且旧节点未移除——DOM 节点和 JS 缓存对象双双滞留。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
立即学习“前端免费学习笔记（深入）”；
- 典型表现：页面长时间运行后内存占用持续上升，DevTools 中
document.styleSheets数量不断增长 - 规避方式：避免在 render 函数内调用
styled.xxx工厂函数；改用预定义组件（const Button = styled.button``）或useMemo缓存结果 - 更稳妥做法：对高度动态场景（如主题色实时编辑器），改用
CSSStyleSheet.replaceSync()替换规则，而非追加
替代方案不是“换库”，而是分层承担复杂度
Tailwind 不是 CSS-in-JS 的替代品，而是把样式决策从 JS 层移到 HTML 层；CSS Modules 也不是退化，而是把作用域隔离提前到构建期。真正要替换的，是“所有样式都塞进 JS”的惯性思维。
- 原子化 CSS（Tailwind）适合：已有明确设计系统、类名组合稳定、响应式断点收敛；但要警惕
class="p-4 bg-blue-500 text-white md:p-6 lg:bg-blue-600"这类长串——说明该抽组件了，不是 Tailwind 的错 - CSS Modules 适合：需要局部作用域 + 静态样式为主 + 团队熟悉传统 CSS；配合
composes可复用基础样式，无 runtime 开销 - 混合策略最常用：用 Tailwind 写布局和原子样式，用
styled-components封装带复杂交互逻辑的组件（如可折叠表格、带拖拽状态的卡片），两者共存无冲突
最容易被忽略的一点：很多卡顿问题根本不是样式注入慢，而是组件没加 React.memo，或者传入的 onClick 没用 useCallback 缓存——父组件一更新，整个子树重新计算样式，连带把 CSS-in-JS 的开销放大了好几倍。优化永远要从渲染链最上游开始切。
