父元素与100个子div分别应用transform的差异及性能对比

呈现效果区别 #

• 对父元素应用transform: scale(1.5)：浏览器会将父元素及其内部所有子元素视为一个整体做缩放，子元素间的相对位置、间距、父元素自身的背景/边框/内边距都会同步缩放，所有内容的相对关系完全不变，缩放原点默认取父元素的中心点。由于transform不改变元素在文档流中的占位，父元素的布局占位尺寸和未缩放时一致。
• 对每个子元素单独应用transform: scale(1.5)：每个子元素会以自身中心点为原点独立缩放，子元素之间的间距、父元素的内边距不会跟随缩放；同时因为transform不影响元素的布局占位，每个子元素在文档流中占据的位置还是未缩放时的尺寸，缩放后的内容会溢出原有占位，和相邻子元素出现重叠，最终视觉效果和父元素整体缩放完全不同。

渲染逻辑区别 #

• 父元素应用transform时：浏览器会为父元素创建独立的合成层，父元素和所有子元素的内容都会被统一绘制到这一个合成层中，变换逻辑直接在合成线程对该层做整体矩阵运算，不需要单独处理每个子元素的变换。
• 子元素单独应用transform时：浏览器会为每个触发合成条件的子元素创建独立合成层，每个子元素的变换都需要单独做矩阵计算，浏览器还需要额外处理100个合成层之间的堆叠顺序、遮挡关系，最后再统一合成到页面上。

性能差距 #

二者存在非常显著的性能差异，在子元素数量达到100个的场景下差距尤为明显：

• 父元素整体变换的场景：仅生成1个合成层，只需要1次矩阵变换计算，GPU纹理上传、显存占用都只有1份，哪怕是做连续动画，也能稳定保持高帧率，几乎不会出现卡顿。
• 子元素单独变换的场景：最坏情况下会生成100个独立合成层，需要做100次独立的矩阵计算，纹理上传开销、显存占用会翻几十倍，在动画、快速滚动等连续渲染场景下，很容易出现掉帧、GPU负载过高的问题，低端设备上卡顿感知会极强。

注：如果是静态渲染无动画，首次加载时的性能差距用户感知不强，但只要涉及连续变换交互，性能差距会被立刻放大。

对应示例代码 #

<style>
  .parent {
    transform: scale(1.5)
  }
  .child {
    transform: scale(1.5)
  }
</style>
<body>
<div class="parent">
   <div class="child"></div>
   …… <!--98 more divs-->
   <div class="child"></div>
</div>
</body>

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