谈谈CSS3 硬件加速(GPU 加速)

迈不过友情╰ 2023-10-10 20:09 51阅读 0赞

### 前言 ###

CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。页面css做图片滑动，滚动，特别是手机端，可能出现卡顿，闪白等情况，解决这些动画卡顿的情况，我们通常可以采用GPU加速的方式。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能。![e1faa4447f0b4acf8cf9a3dfd06810be.png][]

### 如何开启 GPU 加速 ###

CSS 中的以下几个属性能触发硬件加速：

transform
    
    opacity
    
    filter
    
    will-change

如果有一些元素不需要用到上述属性，但是需要触发硬件加速效果，可以使用一些小技巧来诱导浏览器开启硬件加速

.haorooms_element {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0); 
        /**或者**/
        transform: rotateZ(360deg);
        transform: translate3d(0, 0, 0);
    }

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：

-webkit-backface-visibility:hidden;
    -webkit-perspective:1000;

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围：

> 1、使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。
> 
> 2、页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。
> 
> 3、使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。
> 
> 4、编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)。
> 
> 5、使用很多PNG图片拼接成CSS Sprite时。

#### will-change ####

这个属性作用很单纯，就是“增强页面渲染性能”。那它是如何增强的呢？

我们可能听听说过，3D transform会启用GPU加速，例如translate3D, scaleZ之类，但是呢，这些属性业界往往称之为hack加速法。我们实际上不需要z轴的变化，但是还是假模假样地声明了，欺骗浏览器，这其实是一种不人道的做法。 而will-change则天生为此设计，顾名思意“我要变形了”，礼貌而友好。

语法

/* 关键字值 */
    will-change: auto;
    will-change: scroll-position;
    will-change: contents;
    will-change: transform;        /* <custom-ident>示例 */
    will-change: opacity;          /* <custom-ident>示例 */
    will-change: left, top;        /* 两个<animateable-feature>示例 */
    
    /* 全局值 */
    will-change: inherit;
    will-change: initial;
    will-change: unset;

will-change虽然可以加速，但是，一定一定要适度使用。遵循最小化影响原则。

可以让父元素hover的时候，声明will-change，这样，移出的时候就会自动remove，触发的范围基本上是有效元素范围。

.will-change-parent:hover .will-change {
      will-change: transform;
    }
    .will-change {
      transition: transform 0.3s;
    }
    .will-change:hover {
      transform: scale(1.5);
    }

如果使用JS添加will-change, 事件或动画完毕，一定要及时remove. 比方说点击某个按钮，其他某个元素进行动画。点击按钮(click)，要先按下(mousedown)再抬起才出发。因此，可以mousedown时候提示浏览器准备GPU加速, 动画结束自带回调，移除GPU加速：

dom.onmousedown = function() {
        target.style.willChange = 'transform';
    };
    dom.onclick = function() {
        // target动画哔哩哔哩...
    };
    target.onanimationend = function() {
        // 动画结束回调，移除will-change
        this.style.willChange = 'auto';
    };

#### 使用硬件加速的注意事项 ####

内存。如果GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤为明显，所以，一定要牢记不要让页面的每个元素都使用硬件加速。

使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。

[e1faa4447f0b4acf8cf9a3dfd06810be.png]: https://img-blog.csdnimg.cn/e1faa4447f0b4acf8cf9a3dfd06810be.png