csss3属性 — will-change

1. CPU和GPU

• CPU即中央处理器，它的功能主要是解释计算机指令以及处理计算机软件中的数据,也被称为主板。

• GPU即图形处理器，是与处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算而设计的，有了它，CPU就从图形处理的任务中解放出来，能够执行其余更多的系统任务

• 硬件加速（或者说GPU加速）是指在计算机中透过把计算量很是大的工做分配给专门的硬件来处理来减轻CPU的工做量的技术。在CSS transition, transform和animation的世界里，他暗示咱们应该卸载进程到GPU，所以加快速度。这种状况经过向它本身的层叠加元素，当加载动画的时候能够加速渲染。

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

• CSS的动画、变形、渐变并不会自动的触发GPU加速，而是使用浏览器稍慢的软件渲染引擎。然而一些浏览器提供了hardware acceleration by means of certain properties来获取更高的渲染性能。 举个例子，opacity属性是几个可以加速的属性之一，由于GPU能够方便的处理。基本上任何层的透明度渐变浏览器都会交给GPU处理来加速。除了opacity可以使用GPU处理的就是CSS 3D变形了

2. translateZ() (or translate3d()) Hack

咱们都经过translateZ()或者translate3d() hack来骗取浏览器触发硬件加速，具体作法就是为元素添加没有变化的3D变形，好比元素在2维空间能够经过添加如下CSS来硬件加速

transform: translate3d(0, 0, 0);

然而强制使用hack方式建立layer并非长久之计，建立layer的技术可使页面加速，可是也有代价，它们占用RAM和GPU存储空间（考虑到移动设备的存储容量有限），因此必须当心使用，确保这么作真的对页面渲染有所帮助。为了不建立layer的hacks，一个容许咱们提早通知浏览器咱们将对元素作何种变化的CSS属性被引入，这样浏览器能够优化处理元素渲染的方式，为元素提早准备昂贵的动画处理操做，这就是wiil-change属性。

3.wiil-change

• will-change属性能够提早通知浏览器咱们要对元素作什么动画，这样浏览器能够提早准备合适的优化设置。这样能够避免对页面响应速度有重要影响的昂贵成本。元素能够更快的被改变，渲染的也更快，这样页面能够快速更新，表现的更加流畅。

• 当对于素使用 CSS 3D变形时，元素及其内容能够在合成到页面以前被建立到咱们以前说的layer。然而把元素放到layer中是个昂贵的操做，这将会致使变形动画延迟一个课件的瞬间，也就是flicker
  为了不这种延时，咱们能够在发生以前通知浏览器，这样浏览器会有必定的时间去准备这些变化，当发生的时候layer已经准备好了，这样动画酒会很流畅，不会闪屏。

will-change: transform;

能够写多个属性变化，逗号隔开

will-change: transform, opacity;

注意事项：

• 不要将 will-change 应用到太多元素上：浏览器已经尽力尝试去优化一切能够优化的东西了。有一些更强力的优化，若是与 will-change 结合在一块儿的话，有可能会消耗不少机器资源，若是过分使用的话，可能致使页面响应缓慢或者消耗很是多的资源。滥用会使页面崩溃。。。

*,
*::before,
*::after {
    will-change: all;
}

虽然看起来很屌，但其实对页面渲染伤害很大，这样的规则设了和没设没什么区别，浏览器原本就尝试最优的渲染全部元素，就等于你让老师重点照顾班里每一个同窗同样，就是废话！

其实这甚至是有害的，由于一些操做会占用太多的资源，甚至会致使页面奔溃，就等于强制要求老师为每一个学生补课，累死了。。。

• 有节制地使用：一般，当元素恢复到初始状态时，浏览器会丢弃掉以前作的优化工做。可是若是直接在样式表中显式声明了 will-change 属性，则表示目标元素可能会常常变化，浏览器会将优化工做保存得比以前更久。因此最佳实践是当元素变化以前和以后经过脚原本切换 will-change 的值。

• 不要过早应用 will-change 优化：若是你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是做为最后的优化手段，用来尝试解决现有的性能问题。它不该该被用来预防性能问题。过分使用 will-change 会致使大量的内存占用，并会致使更复杂的渲染过程，由于浏览器会试图准备可能存在的变化过程。这会致使更严重的性能问题。

• 给它足够的工做时间：这个属性是用来让页面开发者告知浏览器哪些属性可能会变化的。而后浏览器能够选择在变化发生前提早去作一些优化工做。因此给浏览器一点时间去真正作这些优化工做是很是重要的。使用时须要尝试去找到一些方法提早必定时间获知元素可能发生的变化，而后为它加上 will-change 属性。

在变化前当即为元素添加will-change几乎没有做用，可能还不如不设置，由于会致使新的layer建立,以下：

.element:hover {
    will-change: transform;
    transition: transform 2s;
    transform: rotate(30deg) scale(1.5);
}

须要给浏览器足够的时间，以下：

.element {
    /* style rules */
    transition: transform 1s ease-out;
}
.element:hover {
    will-change: transform;
}
.element:active {
    transform: rotateY(180deg);
}

will-change顾名思义，通知浏览器即将发生的变化，而不是正在发生的变化。使用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;
 
## auto ## 
表示没有特别指定哪些属性会变化，浏览器须要本身去猜，而后使用浏览器常用的一些常规方法优化。
## <animateable-feature> ##
 1) scroll-position 告诉浏览器,要不久后动画啦（改变滚动条的位置或者使之产生动画）
 2) contents:告诉浏览器 不久后改变元素内容中的某些东西，或者使它们产生动画。
## <custom-ident> ## 
不久后改变指定的属性名或者使之产生动画。若是属性名是简写，则表明全部与之对应的简写或者全写的属性。

浏览器兼容性：

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	36	36 (36)[1]	未实现	24	未实现

Mobile

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	37	36.0 (36) [1]	未实现	未实现	未实现

【MARK】 文档以整理记录为主，若有错误，欢迎指出哟，你们一块儿来学习...