iframe CSS动画卡顿主因在父页面：主线程占用、合成层混乱、同步布局读取。应隔离父容器（contain: layout paint style）、禁用全局硬件加速、替换同步读取为ResizeObserver、清理残留rAF。
iframe 里的 CSS 动画卡顿，基本不是 iframe 自身写法的问题，而是父页面在拖后腿——它占着主线程、乱建合成层、瞎读布局，导致 iframe 的合成线程收不到调度指令。解决方向很明确：不优化 iframe，而是让父页面「闭嘴、退场、别动」。
给父页面容器加 contain: layout paint style
这是最直接有效的隔离手段。浏览器看到这个声明，就会把该容器及其子树从父页面的渲染流程中切出来，避免样式污染、布局传染和重绘扩散。
-
contain: strict看似更狠，但它会禁用 iframe 内部的position: fixed，很多弹窗、浮层会失效，慎用 - 必须加在 iframe 的**直接外层容器**上，而不是
html或body；加在 body 上等于没加 - 如果父页面用了 Vue/React，检查根组件是否绑了
v-show或频繁切换display: none，这类操作会保留 DOM 节点但触发强制重排，比删节点还伤
禁用父页面全局硬件加速属性
transform、opacity、filter 这类属性一旦作用在 html 或 body 上，整个页面会被压进单个合成层，iframe 就彻底失去独立合成能力。
- 检查父页面 CSS 是否写了类似
body { transform: translateZ(0); }或html { will-change: opacity; }，全部删掉 - 避免使用
will-change: all，它会让浏览器提前为所有可能变化的属性分配资源，实际却用不上，纯属浪费 GPU 内存 - 如果确实需要局部加速，只对具体动画元素加
will-change: transform，且动画结束后用 JS 移除，例如：el.style.willChange = ''
替换同步布局读取为 ResizeObserver
父页面里任何在 scroll / resize 回调中读取 offsetHeight、getBoundingClientRect() 的代码，都是 iframe 动画掉帧的元凶——它会强制触发同步重排，卡住整个渲染流水线。
立即学习“前端免费学习笔记（深入）”；
- 把所有
window.addEventListener('resize', () => { el.offsetHeight })类逻辑，换成ResizeObserver异步监听 - 不要监听
window，而是监听具体尺寸变化的容器元素，减少干扰面 - 如果父页面用了第三方 UI 库（如 Ant Design、Element Plus），检查其内部是否偷偷执行了同步布局读取；可临时加
console.timeLog('layout')配合 Performance 面板定位
清理未卸载的 requestAnimationFrame 循环
一个没被 cancel 的 requestAnimationFrame 就像后台常驻进程，持续抢占 16ms 帧预算。即使 iframe 没动，父页面的 rAF 也在拖慢它的合成调度节奏。
- 检查父页面是否在组件销毁时漏掉了
cancelAnimationFrame(id) - 特别注意轮播图、实时图表、自定义滚动监听等模块，它们最容易遗留 rAF
- 可在 DevTools 的 Performance 面板录制动画过程，过滤出
Animation Frame Fired事件，看主线程是否被无关 rAF 占满
真正难处理的，是那些「看起来没动，其实一直在动」的父页面——比如隐藏 tab 里仍运行着定时器、历史弹窗 DOM 节点还在 document 中挂着、或者某个库在背后默默监听 resize。这些不会报错，也不会告警，但会让 iframe 动画永远差那么几帧。优化时得带着怀疑去 inspect，而不是只盯着 iframe 本身。
