如何排查CSS transition导致的高CPU占用-css教程-PHP中文网

transition拖垮cpu是因为width、height、top、left等属性触发layout/paint，压在cpu主线程；而transform和opacity走gpu合成层，几乎不占cpu，应显式声明仅对这两类属性过渡并避免transition:all。

如何排查css transition导致的高cpu占用

为什么transition会拖垮CPU

不是所有 transition 都安全。浏览器对不同 CSS 属性的处理成本差异极大：涉及 width、height、top、left、background-color 的过渡，每次变化都会触发 Layout（重排）或 Paint（重绘），全部压在主线程上跑；而 transform 和 opacity 走的是合成层（compositing layer），由 GPU 加速，几乎不占 CPU。

常见错误现象包括：

多个图标同时 hover 时页面明显“发沉”，滚动卡顿
DevTools Performance 面板里看到密集的 Layout / Paint 块，且主线程长时间红色阻塞
CPU 占用率在动画期间飙升（尤其低端设备或复杂 DOM）

如何定位是哪个 transition 在作祟

打开 Chrome DevTools → Performance 面板 → 点击录制（●），触发疑似高开销的交互（比如批量 hover、滚动、切换 tab），停止后查看火焰图。

重点关注以下信号：

帧时间超过 16ms（即掉帧），且底部出现大量 Layout 或 Paint 事件
某个元素的 style 更新频繁，对应 CSS 规则中用了高开销属性
hover 或 class 切换后，Recalculate Style 时间异常长

右键该元素 → Inspect → 在 Styles 面板中查找含 transition 的规则，特别注意是否写了 transition: all 或未限定属性。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

怎么改写 transition 才不烧 CPU

核心原则：只对能硬件加速的属性做过渡，并显式声明 transition-property。

把 width/height 改成 transform: scale()
把 top/left 改成 transform: translate()
避免 background-image + transition 组合（它会强制重绘整块区域）
给过渡容器加 transform: translateZ(0) 或 will-change: transform，提前创建合成层（但别滥用，will-change 本身有内存开销）

示例对比：

.bad { transition: width 0.3s, background-color 0.3s; }
.good { transition: transform 0.3s, opacity 0.3s; }
.good:hover { transform: scale(1.1); opacity: 0.9; }