CSS3 will-change提高页面动画等渲染性能

古城微笑少年丶 2021-09-14 16:18 240阅读 0赞

今天突然看到这个will-change 觉得好新鲜，就百度一看，才知道人家早就出来（我out了），只是现在各个浏览器还不怎么兼容，为了满足我的好奇心，就来了解下呗。

如果你已经试验和利用过这些CSS3的属性，你可能碰到类似CPU、GPU和硬件加速等术语。让我们快速的掌握这些术语：  
   ①CPU即中央处理器，它的功能主要是解释计算机指令以及处理计算机软件中的数据,也被称为主板。  
   ②GPU即图形处理器，是与处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算而设计的，有了它，CPU就从图形处理的任务中解放出来，可以执行其他更多的系统任务。  
   ③硬件加速是指在计算机中透过把计算量非常大的工作分配给专门的硬件来处理来减轻CPU的工作量的技术。在CSS transition, transform和animation的世界里，他暗示我们应该卸载进程到GPU，因此加快速度。这种情况通过向它自己的层叠加元素，当加载动画的时候可以加速渲染。  
怎样改善动画的性能和质量？首先，在基于webkit的浏览器，我们在执行一些CSS的操作经常会看见闪烁和动画。在过去，我们通过欺骗浏览器一点点解决实现。我们会使浏览器执行3D变换，因此减轻了工作量到GPU上。这是因为3D转换是自动移到那里的。这导致我们的做一些挂羊头卖狗肉的事就像这样：  
.accelerate \{  
  -webkit-transform: translate3d(0, 0, 0);  
\}  
还有一些类似的技巧，但是在大部分情况下，有很多相同的技巧，但对于此类问题的大部分，这种方式就可以解决。然而， 这是一种非正常的实现方式，当我们正确使用的时候，will-change属性将极大的帮助我们。让我们一起探讨一下吧。

一.will-change

1.是什么？

CSS3 will-change属于web标准属性，兼容性这块Chrome/FireFox/Opera都是支持的。

![SouthEast][]注意：will-change真正的行为触发之前会告诉浏览器：“我要触发啦”。这意味着不是通过一个3D变换迫使我们转换到GPU，而是我们现在可以使用一个专用的属性来通知浏览器留意接下来的变化，从而优化和分配内存。提前预约从容不迫。

2.语法

/* 关键字值 */
    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;
    
    1.<animateable-feature> 可以是以下值：
    scroll-position 告诉浏览器,要不久后动画啦（改变滚动条的位置或者使之产生动画）
    contents:告诉浏览器 不久后改变元素内容中的某些东西，或者使它们产生动画。
    <custom-ident>：不久后改变指定的属性名或者使之产生动画。如果属性名是简写，则代表所有与之对应的简写或者全写的属性。

3.使用

不要这样直接写在默认状态中，因为will-change会一直挂着

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

可以让父元素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时候打声招呼, 动画结束自带回调，于是（示意，不要在意细节）：

var el = document.getElementById('element');
    // 当鼠标移动到该元素上时给该元素设置 will-change 属性
    el.addEventListener('mouseenter', hintBrowser);
    // animationend 事件在 CSS 动画完成后触发。当 CSS 动画结束后清除 will-change 属性
    el.addEventListener('animationend', removeHint);
    function hintBrowser() {
      this.style.willChange = 'transform, opacity';
    }
    function removeHint() {
      this.style.willChange = 'auto';
    }

[SouthEast]: /images/20210813/e68528807e134c4c8319536b5c99c76e.png