HTML5复杂动效卡顿主因是多动画属性共存触发重排重绘；应通过层级分离、选用transform/opacity/filter属性、合理使用will-change及DOM拆分来优化GPU加速。
复杂动效在 HTML5 中卡顿，往往不是因为效果本身太炫，而是多个动画属性挤在同一个元素上，触发了浏览器频繁重排（reflow）和重绘（repaint）。层级分离的核心思路是：把“会动的”和“不动的”、“需要合成层的”和“纯内容层的”拆开，让浏览器用 GPU 独立处理动画部分，避免牵连整个 DOM 树。
哪些属性适合独立成层
不是所有 CSS 属性都值得提升为合成层。真正能走 GPU 加速、且不触发重排的，主要是以下三类：
- transform（尤其是 translate3d、scale、rotate）—— 浏览器会自动为其创建独立图层
- opacity —— 半透明变化无需重绘像素，只做混合运算
- filter（如 blur、brightness，但慎用高斯模糊，性能开销大）
要避免把 width、height、left、top、background-color 这类会触发 layout 或 paint 的属性和上述属性混在同一元素上。
用 will-change 提前声明动效意图
它不是“魔法开关”，而是给浏览器一个提示：“这个元素接下来可能会动，提前准备好合成层”。用法要克制：
立即学习“前端免费学习笔记（深入）”；
- 只在真正需要动画前设置，动画结束及时清除（比如用 JS 切换 class）
- 不要对大量元素批量设
will-change: transform，否则内存占用飙升 - 常见配合方式：
.animating { will-change: transform; }+ transition 动画
结构上主动拆分 DOM 层级
比如做一个带文字描边+背景粒子+浮动光晕的标题动效，别全堆在 <h1></h1> 上：
- 文字内容层：
<h1 class="title-text">Hello</h1>—— 只负责语义和基础样式，不加动画 - 描边/发光层：
<span class="title-glow"></span>—— 绝对定位覆盖，仅用transform和opacity动画 - 粒子背景层：
<canvas class="bg-particles"></canvas>—— 独立 Canvas，用requestAnimationFrame渲染，完全隔离主文档流
这样即使粒子层帧率掉到 40fps，也不影响文字可读性或点击响应。
检查与验证是否生效
别靠感觉，用 Chrome DevTools 实测：
- 打开 Layers 面板（More Tools → Layers），看动效区域是否出现独立图层（带 GPU 图标）
- 开启 Rendering 面板里的 “Paint flashing”，观察红色闪烁是否只出现在动画区域
- 对比开启/关闭
transform: translateZ(0)后的 FPS 曲线（Performance 面板录制）
