html - 从 HTML/CSS 触发 Chrome 中的 GPU 光栅化以实现背景图像动画

Question

当涉及到某些操作时，例如animating CSS backgrounds with keyframes, Chrome is horribly CPU-intensive ，与 Firefox 或 IE 相比(40% CPU 和 60% GPU 对比 5% 和 15%)。

This Chromium page声称要强制 GPU 光栅化，您可以将此标记添加到 HTML:

<meta name="viewport" content="width=device-width, minimum-scale=1.0">

但是，这应该只适用于某些 Android 设备。

桌面版 Chrome 是否有类似的触发器？ null-transform hack不适用于 Chrome 43 ( full demo )。

body {
  margin: 0;
  width: 100%;
  height: 100vh;
  background: url('http://subtlepatterns.com/patterns/perforated_white_leather.png') repeat;
  background-size: 300px auto;
  -webkit-animation: animatedBackground 5s linear infinite;
  
  /* doesn't actually force GPU rasterization */
  -webkit-transform: translateZ(0);
  transform: translate3d(0, 0, 0);
}

/* for Opera, Safari */
@-webkit-keyframes animatedBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -300px 0;
  }
}

Answer 1

根据您的代码，如果存在 GPU，您可以专门针对您的 css 选择器选择的元素启用 GPU 加速渲染。

最快的方法之一是对元素应用 3D 转换，这将强制大多数浏览器(包括桌面 Chrome)具有包含该元素的 GPU 加速合成层。

例如:

.element {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

或

.element {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   transform: translateZ(0);
}

如果您只希望它用于 webkit 浏览器，请仅使用 -webkit- 的值。