当涉及到某些操作时,例如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;
}
}
最佳答案
根据您的代码,如果存在 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-
的值。
关于html - 从 HTML/CSS 触发 Chrome 中的 GPU 光栅化以实现背景图像动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31228754/