css --- GPU 硬件加速

硬件加速（GPU加速）依赖于浏览器渲染页面使用的 layering model，当特定的操作（例如：CSS 3D变形）作用于页面上的一个元素，元素移动到它自己的layer，在这个layer中元素合一，不受页面其它元素的干扰独立渲染，然后复合到页面中去。在这种隔离内容渲染的工作方式下，如果页面的变化仅仅是该元素的变形，其余部分不必被重新渲染，这会带来显著的速度优势。值得注意的是：只有3D变形会有自己的layer，2D不会。

CSS的动画、变形、渐变并不会自动的触发GPU加速，【opacity】属性是几个能够加速的属性之一，因为GPU可以方便的处理。基本上任何层的透明度渐变，浏览器都会交给GPU来加速。除了opacity能够使用GPU处理的，就是CSS 3D变形了。

translateZ( ) 或 translate3d( )，可以用来骗取浏览器触发硬件加速，具体做法就是为元素添加没有变化的3D变形。所谓硬件加速就是创建了一个被传递到GPU处理的层的操作，然后创建layer 的技术可以使页面加速，但也有代价（占用RAM和GPU存储空间），所以得确保这么做真的对页面渲染有帮助。

这样浏览器可以优化处理元素渲染的方式，为元素提前准备昂贵的动画处理操作，这就是 will-change 属性。用法：will-change: transform;

变化完成后移除will-change

el.addEventListener('animationEnd', removeHint);
function removeHint() {
    this.style.willChange = 'auto';
}

display:none 的节点不会加入 Render Tree，而visibility: hidden 则会被加入 Render Tree。display: none 会触发 reflow，但 visibility: hidden 只会触发repaint，因为没有发生位置变化。

Chrome 使用 Texture 来从GPU上获取大块的页面内容。通过将纹理应用到一个非常简单的矩形网格，就能很容易匹配不同的位置和变形，这也就是3D CSS 的工作原理。

一般一个元素开启硬件加速后会变成合成层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能。

性能优化点：

1）提升动画效果的元素 合成层的好处是不会影响到其他元素的绘制，因此，为了减少动画元素对其他元素的影响，从而减少paint，我们需要把动画效果中的元素提升为合成层。
2）使用 transform 或者 opacity 来实现动画效果, 这样只需要做合成层的合并就好了。
3）对于固定不变的区域，我们期望其并不会被重绘，因此可以通过之前的方法，将其提升为独立的合成层。减少绘制区域，需要仔细分析页面，区分绘制区域，减少重绘区域甚至避免重绘。

个人统计【2】：2019-05-26、2019-05-27