元素的隐藏 ​

对后代 img 的影响 ​

设置了 display: none 的元素，其背景和后代 img 元素都会产生请求，后代元素的背景不会产生请求，这些图片都不会被渲染。

<!-- 1、3 发起请求 2 不请求 -->
<div style="display: none;background-image: url(1.png)">
  <div style="background-image: url(2.png)">
    <img src="3.png" />
  </div>
</div>

合成层 ​

页面的绘制并不一定为在内存中的单层画面绘制，有时浏览器会将一帧画面绘制为多层画面，然后将若干层画面合并成一张图片显示到屏幕上。 将页面分层可以更好的区分开页面中静态部分和动态部分的绘制。

在 Blink 和 WebKit 内核的浏览器中，具有 transition 或 animation 的 opacity 元素，渲染层被提升为合成层。 translateZ(0) 或 translate3d(0,0,0)可以人为强制创建合成层。

而元素提升为合成层后，transform 和 opacity 不会触发 重绘制。如果不是合成层，则会触发重绘。

因为透明度改变后，GPU 在绘制页面时可以改变之前画好的页面的透明值，而无需整体的重绘。 但是这个被修改的 opacity 必须为一个单独的图层，否则图层中的其他节点也会被重绘。

参考 ​

• https://blog.csdn.net/xx_yan/article/details/105182572