语义冗余、嵌套过深、无意义容器会拖慢全屏动画帧率，因过多dom节点增加主线程压力；应精简结构、使用contain属性、语义标签优化，并避免raf中布局抖动及不当css动画混用。
全屏动画中哪些HTML结构会悄悄拖慢帧率
语义冗余、嵌套过深、无意义容器是全屏动画卡顿的隐性推手。浏览器要为每个元素构建渲染对象、计算层叠上下文、管理图层合成，DOM节点越多，主线程压力越大，尤其在60fps动画下，每帧只有约16ms，多几个没用的 div 就可能挤占关键时间。
常见问题包括：
— 用5层 div 包裹一个 canvas 或 video 元素，只为实现一个位移效果
— 在动画容器里塞满未加 contain: layout paint 的静态内容（比如隐藏的菜单、文案区块）
— 使用 table 布局做全屏背景网格，触发强制同步布局
— 动画区域混入未设 display: none 的调试用 div（即使 opacity=0，仍参与布局）
- 删掉所有仅用于“撑开空间”或“占位”的空
div，改用 CSS 的padding或伪元素 - 把动画主容器设为
contain: strict（或至少contain: layout paint），限制重排重绘影响范围 - 用
<section></section>或<article></article>替代纯div，不为语义而为性能：现代浏览器对语义标签有更激进的渲染优化策略 - 检查 DevTools → Layers 面板，确认动画元素是否真的升到了独立合成层——如果它被父级的
overflow: hidden或transform截断，就白加了will-change
requestAnimationFrame 回调里最常误写的三件事
写错位置比写错逻辑更容易导致掉帧。RAF 回调不是“随便放点代码的地方”，它是浏览器渲染流水线中唯一可控的入口点，任何偏离“读→算→写”顺序的操作都会引发布局抖动（layout thrashing）。
典型错误现象：
— 动画越跑越慢，帧时间从12ms涨到40ms以上
— 滚动时动画突然卡住一帧，松手后又跟上
— 移动端发热明显，但 FPS 数值看起来正常
- 别在 RAF 回调开头读
getBoundingClientRect()或offsetTop，它们强制触发回流；应提前缓存，或改用IntersectionObserver/ResizeObserver - 别在回调里查
document.querySelectorAll('.anim-item')—— DOM 查询成本高且不可控；改用document.getElementById或提前存好引用 - 别一边修改
element.style.transform，一边又读window.scrollY—— 这属于跨源读写，浏览器无法优化；滚动值应由scroll事件节流后单独缓存
CSS 动画与 JS 驱动动画的边界在哪
不是“能用 CSS 就一定该用”，而是看控制粒度和响应条件。CSS 动画适合可预测、状态明确、无需运行时干预的动效；JS 驱动适合需要根据用户输入、数据流、Canvas 绘图节奏实时调整的场景。
容易踩的坑：
— 用 @keyframes 实现视差滚动，结果发现滚动速度变化时动画跟不上
— 用 JS 控制 opacity 变化，却忘了加 will-change: opacity，导致每次更新都走 CPU 绘制
— 把 animation-play-state 和 requestAnimationFrame 混用，造成状态冲突
- 入场/出场/循环图标旋转等固定节奏动效，优先用
@keyframes + animation，不占主线程 - 需响应
mousemove、scroll或 Canvas 帧节奏的，必须用 JS 驱动，但只改transform和opacity，且确保元素已提升为合成层 - 混合使用时，用
animation-play-state: paused控制 CSS 动画启停，而非反复操作style.animation属性 - 禁用
filter: blur()、drop-shadow()等属性——它们会让元素退回到 CPU 渲染，再快的 RAF 也救不回来
移动端全屏动画必查的三个兼容性开关
桌面端跑得飞起的动画，在 iOS Safari 或 Android Chrome 上可能直接掉到 20fps，往往不是代码问题，而是被系统级策略静默降频了。
关键信号：
— 页面切后台再切回来，动画彻底卡死（不是暂停）
— 开启“减少动态效果”后，动画没按预期关闭，反而更卡
— iPhone 上动画边缘出现锯齿，但 Canvas 设置了 imageSmoothingEnabled = false 也没用
- 必须监听
prefers-reduced-motion媒体查询，不只是关动画，还要降帧率：if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { frameInterval = 2; } - iOS Safari 对
will-change极其敏感，长期开启会导致内存泄漏；应在动画开始前加element.style.willChange = 'transform'，结束 100ms 后用setTimeout(() => { element.style.willChange = 'auto'; }, 100)清理 - 全屏 Canvas 动画务必设置
canvas.style.width = '100vw'; canvas.style.height = '100vh';，并监听visualViewport事件处理缩放，否则 iOS 键盘弹出时 canvas 会被强制缩放+抗锯齿，性能断崖下跌
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
