浏览器未启用gpu加速并非自动降级，而是因不满足合成层创建条件或创建后被强制回退；transform和opacity仅为必要非充分条件，常见断点包括will-change未触发、overflow:hidden剪裁、filter/blur强制cpu绘制、图层超限回收、js同步布局读取、动态修改几何属性、强制重排重建合成树等。
不是“自动降级”，而是浏览器根本没把动画交给GPU——它一开始就没满足合成层创建条件，或者刚创建就被强制回退了。
GPU合成层根本没建起来
浏览器只对满足特定条件的元素启用GPU加速，transform和opacity只是必要条件，不是充分条件。常见断点包括：
-
will-change: transform写在CSS里静态声明，但元素尚未进入视口或未触发渲染，浏览器直接忽略 - 父容器设置了
overflow: hidden且子元素transform超出边界，触发“层剪裁”，合成层被合并或丢弃 - 元素有
filter: blur(2px)或backdrop-filter，强制降级到CPU绘制（iOS Safari尤其敏感） - 使用
translate3d(0, 0, 0)强行升层，但页面已有超50个独立图层，Chrome主动回收部分图层
已建好的合成层被动态踢出GPU
合成层不是一劳永逸的。以下操作会立刻让元素从GPU图层掉回主线程：
- JS频繁读取
getBoundingClientRect()或offsetTop，触发同步布局，浏览器为保一致性强制降级该元素 - 动画过程中动态修改
width、height或font-size，哪怕只改一次，也会破坏图层缓存假设 - 页面触发强制重排（如
document.body.style.fontSize = '14px'），整个合成树重建，部分图层丢失
GPU负载高 ≠ 动画降级，而是合成失败后被迫走完整渲染流水线
所谓“GPU过载”在实际中极少直接导致降级；更常见的是GPU忙于处理其他任务（如WebGL、视频解码、Canvas多层合成），导致合成帧排队超时。此时浏览器行为是：
- 合成器线程延迟提交帧，表现为动画卡顿、掉帧，但仍在GPU上跑
- 若连续3帧合成耗时 > 32ms，Chrome可能将该动画标记为“低优先级”，暂停其
@keyframes执行（不触发animationcancel事件） - 真正切到CPU软件渲染，只发生在元素失去合成资格后——比如你用
animation-fill-mode: forwards，但动画结束帧的transform被JS覆盖成left: 100px，那一瞬间就回退了
最易被忽略的一点：iOS Safari对合成层数量极其保守，一个position: fixed导航栏 + 两个轮播图 + 一个弹窗，就可能让第四个动效元素完全无法升层——它不是“降级”，是压根没资格上车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
