CSS Transform应作用于picture元素还是子img元素？性能影响问询

问题描述 #

当给图片元素应用translate或translate3d这类CSS变换时，从性能角度出发，以下两种方案哪种更优？

方案1：将变换应用于父级<picture>元素 #

const imageEl = document.querySelector('#image');

setTimeout(() => (imageEl.style.transform = "translateX(200px)"), 1000);

#image {
  transition: transform 2s ease;
  position: absolute;
  left: 0;
  top: 0;
}

<picture id="image">
<img src="https://picsum.photos/536/354"/>
</picture>

方案2：将变换应用于子级<img>元素 #

const imageEl = document.querySelector('#image');

setTimeout(() => (imageEl.style.transform = "translateX(200px)"), 1000);

#image {
  transition: transform 2s ease;
  position: absolute;
  left: 0;
  top: 0;
}

<picture>
<img src="https://picsum.photos/536/354" id="image"/>
</picture>

已知<picture>本质是类似<span>的行内元素，直觉上两种方式性能差异不大，需要明确：将高负载CSS变换应用于<picture>或其子<img>元素时，是否存在性能影响？若有，哪种方式性能更优？

性能分析结论 #

这两种方案的性能差异在绝大多数场景下可以忽略不计，核心原因如下：

• transform（尤其是translate3d这类能触发GPU加速的变换）属于浏览器渲染流水线的合成层操作，不会触发重排或重绘，只在合成阶段处理。不管是作用在<picture>还是<img>上，最终都是GPU对整个元素及其子元素的像素层做位移操作，计算成本几乎一致。
• <picture>是无布局语义的容器元素，不会额外增加渲染层级或布局计算量。浏览器处理它的变换时，本质上会把它和内部的<img>视为一个整体渲染单元，不会有额外开销。
• 两种方案都给目标元素设置了position: absolute，让元素脱离文档流，进一步减少了布局层面的额外消耗。

如果要在极端场景下挑细微差异，作用于<img>的方案可能有极其微弱的优势：因为<picture>理论上可能包含多个<source>子元素，但实际渲染时浏览器只会加载匹配的<img>，直接作用于<img>能让GPU更直接定位到需要变换的像素内容——不过这种差异在普通业务场景下完全感知不到，不用特意纠结。

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