最有效解法是改用transform和opacity替代left、top、width等触发重排的属性，因其仅触复合成不重排不重绘；配合content-visibility: auto与contain-intrinsic-size可进一步优化长列表渲染性能。
直接改 transform 和 opacity，别碰 left、top、width 这类触发重排的属性——这是最立竿见影的优化动作。
用 transform/opacity 替代布局属性动画
浏览器对 transform 和 opacity 的处理走的是合成层（compositing layer），不触发布局计算（reflow），只重绘（repaint）甚至仅合成（composite）。而 left、top、margin、height 等会强制浏览器反复计算几何位置，卡顿明显。
- ❌ 错误写法：
.box { left: 0; transition: left 0.3s; }—— 滚动或动画时帧率常掉到 20fps 以下 - ✅ 正确写法：
.box { transform: translateX(0); transition: transform 0.3s; } - ⚠️ 注意：
will-change: transform不要全局加，只在真正要动画的元素上动态添加（比如mouseenter时设，animationend后清空），否则内存占用飙升
长列表必须加 content-visibility: auto
渲染 1000 个卡片？不加 content-visibility，首屏可能卡顿 1 秒以上。它让浏览器跳过视口外元素的样式计算、布局和绘制，只保留占位空间。
- 必须配
contain-intrinsic-size，否则滚动条会跳动（因为未渲染元素高度为 0）：.card { content-visibility: auto; contain-intrinsic-size: 200px; } - Firefox 和 Safari（截至 2026 年中）仍不支持该属性，需用 JS fallback 或降级方案（如虚拟滚动）
- 不要给所有子元素都加——只加在外层容器或分组块上，避免滚动条因频繁重算尺寸而抖动
选择器越简单越好，别嵌套超过三层
CSS 引擎从右往左匹配，div ul li a 这种写法会让浏览器先找所有 a，再逐层向上验证父级，性能开销指数级增长。
- ❌ 避免：
.sidebar > .nav > ul > li > a:hover、* { box-sizing: border-box; } - ✅ 推荐：
.nav-link:hover、.nav-link用 class 直接控制，ID 更快但不易复用 - 工具可查：Chrome DevTools → Elements → 右键元素 → “Force element state” + “Show user agent shadow DOM”，再看 Styles 面板里哪些规则被标记为“slow”
非关键 CSS 必须异步加载
link[rel=stylesheet] 默认阻塞 HTML 解析和渲染，哪怕这个 CSS 只用于弹窗或后台页——用户白屏时间就在这儿浪费了。
- ✅ 最简方案：
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">—— 利用media="print"触发异步加载，加载完再切回all - ✅ 构建时提取关键 CSS（Critical CSS）并内联到
，其余延迟加载 - ⚠️ 注意：
@import在 CSS 文件里也阻塞，一律改用<link>或构建时合并
真正卡顿的点往往不在代码量，而在一个没加 transform 的 hover 动画、一个没设 contain-intrinsic-size 的 content-visibility、或者一段藏在深嵌套里的 :nth-child 选择器——这些细节不盯住，压再小的文件体积也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
