CSS transform过渡：px比百分比更流畅？性能差异探究

最近在优化移动端网站的导航下拉动画时，挖到了一个关于CSS过渡性能的实用细节——用transform: translate3d()做下拉动画时，px单位的表现居然比%单位流畅太多，浏览器的计算量也小了不少。

实测性能对比 #

我做了两组对比测试，结果差异很明显：

• px值过渡：从transform: translate3d(0, 500px, 0)过渡到transform: translate3d(0,0,0)，浏览器几乎没有额外的渲染压力，帧率稳定在近60fps（接近屏幕原生刷新率），动画丝滑无卡顿。
• %值过渡：从transform: translate3d(0, 100%, 0)过渡到目标状态时，浏览器触发了大量的渲染与绘制操作，帧率仅能达到约40fps，肉眼可见动画有拖沓感。

折中优化方案：用100vh/100vw平衡性能与响应式 #

后来我尝试用视口单位替代百分比，发现100vh（对应垂直方向100%视口高度）能完美缓解百分比的性能问题——在Chrome浏览器中，它的表现几乎和px值一致，既保留了响应式适配不同屏幕的特性，又能维持动画的流畅度。

复现代码示例 #

低性能的%版本 #

.nav-dropdown {
  transform: translate3d(0, 100%, 0);
  transition: transform 0.3s ease;
}
.nav-dropdown.active {
  transform: translate3d(0, 0, 0);
}

高性能的px版本 #

.nav-dropdown {
  transform: translate3d(0, 500px, 0);
  transition: transform 0.3s ease;
}
.nav-dropdown.active {
  transform: translate3d(0, 0, 0);
}

平衡响应式与性能的vh版本 #

.nav-dropdown {
  transform: translate3d(0, 100vh, 0);
  transition: transform 0.3s ease;
}
.nav-dropdown.active {
  transform: translate3d(0, 0, 0);
}

性能Timeline截图说明 #

• %单位过渡：Timeline中能看到大量**绘制（Paint）和布局（Layout）**操作占用主线程资源，这是帧率下降的核心原因。
• px/vh单位过渡：Timeline里只有少量的合成（Composite）操作，动画完全在GPU合成层运行，主线程几乎被解放，流畅度拉满。

性能差异的核心原因推测 #

1. 单位计算逻辑不同：%是基于父元素尺寸计算的，浏览器在动画每一帧都可能触发父元素尺寸的重检查（哪怕父元素尺寸没变化）；而px是固定值，vh基于视口尺寸（动画过程中视口一般不会改变），不需要重复计算。
2. 合成层处理差异：固定值（px/vh）的translate3d能稳定触发GPU合成，动画全程在合成层处理，不会触发重排重绘；而%值因为依赖父元素，浏览器无法确定是否会影响其他元素，可能会触发额外的布局检查，导致部分操作回到主线程执行，拖慢帧率。

内容的提问来源于stack exchange，提问作者Chri.s