主要观点：作者的 M2 MacBook 上的应用程序神秘地使用了 60%的 CPU 和 25%的 GPU，经排查是一个微小的 CSS 动画导致。通过 Chrome 的开发工具，发现是页面底部的“操作栏”的动画引起的，具体是 transition: height 300ms ease-in-out; 这个 CSS 属性导致布局和重绘频繁，耗费大量资源。了解浏览器的渲染流水线后，用 transform 动画替代昂贵的 height 动画，解决了性能问题，使渲染器进程的 CPU 使用率从 15%降至 6%，GPU 使用率从 25%和 20%降至 6%和不到 1%，并在后续文章中会介绍如何使用 Chrome 的 about://tracing 工具查找隐藏的性能成本，还可通过尝试 Granola查看优化后的可视化效果，若对性能优化感兴趣可申请工作。

关键信息：

• 应用程序在 M2 MacBook 上的高 CPU 和 GPU 使用率。
• 排查出是“操作栏”的 CSS 动画导致。
• 浏览器渲染流水线包括布局、绘制和合成。
• height 是布局属性，动画昂贵；transform 和 opacity 是合成属性，较便宜。
• 用两个矩形的 translate 替代 height 动画解决性能问题。

重要细节：

• Activity Monitor 显示高 CPU 和 GPU 使用率。
• 在“Performance”和“Layers”标签中查看渲染和绘画相关信息。
• 浏览器讨厌音频音量可视化器的“跳舞条”导致大量布局计算。
• 性能分析中发现纯 CSS 工作导致每帧都有计算。
• 优化后的可视化效果在性能上有显著提升。