最有效提升帧率的方式是仅用transform和opacity做动画以避开layout计算。需合并transform写法、慎用will-change、严格分离读写操作、用translatez(0)提升图层、批量dom更新使用documentfragment。
直接用 transform 和 opacity 做动画，避开 layout 计算，是提升帧率最有效的方式。大屏掉帧、滚动卡顿、动画不跟手，根源往往不是硬件差，而是每帧都在强制重排。
只用合成层友好的属性做动画
浏览器对某些 CSS 属性的修改可跳过 Layout（重排）和 Paint（重绘），直接交由 GPU 合成层处理。这类属性包括：
-
transform：如
translateX(10px)、scale(1.2)、rotate(45deg)；注意合并写法，比如用translate(10px, 5px)而非两行translateX+translateY - opacity：透明度变化不改变几何信息，纯合成层操作
- 慎用
will-change：它可能提前创建图层，但 Safari 支持弱，且易误触发；更稳妥的是transform: translateZ(0)
严格分离“读”与“写”操作
在 requestAnimationFrame 中混用布局读取（如 offsetTop、getBoundingClientRect()）和样式写入（如 el.style.transform = ...），会迫使浏览器同步 flush 渲染队列，每帧都重排。
- 把所有尺寸/位置读取集中到一帧开头，缓存结果复用（例如边界判断可延用 2–3 帧）
- 把所有样式更新集中到一帧末尾，避免中间穿插读操作
- 禁用循环中反复调用
clientWidth、getComputedStyle()等触发 layout 的 API
让动画容器真正脱离文档流
仅加 transform 不等于隔离——元素仍在文档流中，父容器仍需为它计算行高、预留空间。要实现真正“视觉隔离”，需图层提升：
- 给动画容器统一加
transform: translateZ(0)，比逐个子项提升更省内存 - 静态内容（如图标、标签文字）不要加图层提升，长期占用 GPU 资源
- 若布局错位，检查是否依赖了原本的文档流位置（比如靠
margin-top对齐），改用position: absolute或 flex/grid 重新组织
批量 DOM 更新，避免逐条触发
插入或修改大量节点时，每次操作都可能引发重排。应避免：
- 连续
appendChild50 次 - 反复设置
innerHTML - 用
display: none隐藏→操作→再显示，虽减少重排次数，但隐藏/显示本身各触发一次，不如 DocumentFragment 一次性注入
推荐做法：用 document.createDocumentFragment() 在内存中构建完整结构，最后单次挂载到真实 DOM。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
