为何简单的进度条width transition会占用大量GPU资源？

为什么width过渡会导致高GPU占用？ #

核心原因是CSS属性对应的渲染阶段差异：

• 修改width属于修改布局属性，浏览器每帧都要重新计算元素的几何尺寸（重排/Reflow），接着重新绘制元素及周边区域（重绘/Repaint），最后合成画面。对于你设置的60秒长时长过渡来说，相当于连续3600多帧重复这个高开销流程——哪怕是RX Vega 56这类高端显卡，也会因为持续的计算任务拉高GPU占用和功耗。
• 你觉得“简单的过渡”，在浏览器渲染流水线里其实是持续的布局更新，这和GPU加速的合成操作完全不是一个量级的开销。

优化方案：用transform替代width过渡 #

把过渡从布局属性切换到合成属性（比如transform: scaleX()），这类属性只会触发渲染流水线的最后一步（合成/Composite），完全由GPU处理，不会触发重排重绘，性能开销极低。

修改后的代码示例：

HTML #

<div class="progress-wrap">
  <div class="progress-bar"></div>
</div>

CSS #

.progress-wrap {
  width: 100%;
  height: 10px;
  overflow: hidden;
  background: #f0f0f0; /* 进度条背景 */
}
.progress-bar {
  height: 100%;
  width: 100%;
  background: black;
  transform: scaleX(0);
  transform-origin: left center; /* 从左侧开始缩放 */
  transition: transform 60s linear;
}

JS #

const progressBar = document.querySelector('.progress-bar');
setTimeout(() => progressBar.style.transform = 'scaleX(1)', 1000);

补充说明 #

这不是你的CSS写法“错误”，而是忽略了浏览器渲染引擎的特性：不同CSS属性触发的渲染阶段不同，布局属性的持续修改必然带来高开销。换成transform后，GPU只需要对已绘制的纹理做简单缩放变换，占用率会降到你预期的低水平，功耗也会大幅降低。

内容的提问来源于stack exchange，提问作者Selbi