卡顿主因是transition属性触发重排，应改用transform/opacity等合成属性，并验证绿色图层边框、慎用will-change、避免动画中同步读取布局或修改非合成属性。
transition 触发重排时卡顿
用 transition 动画但页面一动就掉帧，大概率是正在过渡的属性触发了重排（Reflow）。比如写 transition: margin-left 0.3s 或 transition: height 0.3s，浏览器每次计算都要重新布局整个块级上下文，尤其在中低端设备上极易卡顿。
可过渡但不安全的属性包括：width、height、margin、padding、left、top —— 它们改的是几何尺寸或定位，强制触发 Layout。
- 优先替换为
transform：例如把margin-left: 100px改成transform: translateX(100px) - 确保目标元素已启用硬件加速：加
will-change: transform（仅对即将动画的元素设置，避免滥用） - 检查父容器是否含
overflow: hidden或contain: layout，这类样式可能抑制合成层提升，导致 transform 也退化为 CPU 渲染
scroll 事件里调用 transition 直接失效
滚动中动态修改元素样式并期望 transition 生效？常见错误是：在 scroll 回调里直接改 element.style.left = x + 'px'，然后发现没有过渡动画——因为浏览器会合并多次 style 写入，跳过中间状态，只渲染最终值。
根本原因不是 transition 写错了，而是 DOM 修改和样式计算被压进单次渲染帧，没留给浏览器插值机会。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 改用
transform+requestAnimationFrame手动驱动：先设element.style.transition = 'none'，再在raf中批量更新transform，最后延后一帧再恢复transition - 更稳妥的做法：滚动中只更新数据（如
scrollTop值），用 CSS 自带的scroll-driven animations（需 Chrome 115+）或@property配合transition实现声明式联动 - 避免在 scroll 回调里读取
offsetTop、getBoundingClientRect()等会强制同步布局的 API
opacity 和 transform 看似流畅，实际仍掉帧
opacity 和 transform 确实不会触发重排重绘，但卡顿可能来自别的地方：合成层过多、纹理上传耗时、内存带宽瓶颈。尤其在移动端，连续创建多个 transform 元素却没控制图层数量，GPU 很快吃紧。
- 用 Chrome DevTools 的
Layers面板检查：是否存在大量小而分散的合成层（每个都占显存和绘制开销） - 合并动画元素：把多个平移/缩放的子元素包裹进一个
transform: preserve-3d容器，让它们共用同一合成层 - 慎用
will-change: transform：它会提前创建合成层，但如果元素长期不动，反而浪费内存；建议只在动画开始前 1–2 帧设置，动画结束立即清除 - 图片类元素记得加
image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges（Firefox），避免缩放时反复采样拖慢绘制
transition 在 Safari 上表现异常
Safari 对 transition 的实现更保守：比如 transition: all 0.3s 在某些版本里会静默降级为无动画；又或者 transform: scale() 在 flex 容器内突然跳变，不走缓动。
这不是 bug，是 Safari 渲染管线对“可动画属性”的判定更严格，尤其涉及 flex/grid 布局时。
- 永远避免
transition: all，明确列出要过渡的属性，例如transition: transform 0.3s, opacity 0.3s - 在 Safari 中测试
transform动画时，给元素加backface-visibility: hidden可稳定触发 GPU 加速 - 如果用
transform: translateY()做视差滚动，确保父容器有contain: paint，否则 Safari 可能因无法裁剪而放弃合成优化
过渡效果是否真正“顺滑”，不取决于你写了多少 ease-out，而在于浏览器有没有把动画交到合成线程执行。很多卡顿问题表面是 CSS 写法，根子在 DOM 结构、层叠上下文或设备适配策略上——这些地方改一行，比调十次缓动函数更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
