CSS 前端页面渲染优化 属性 will-change

前言

• 当触发scroll、resize这类的滚动事件时，被触发的频率很是高，间隔也特别近。若是事件中涉及到大量的位置计算、DOM操做、元素重绘等工做，而且这些工做没法在下一个scroll事件出发前完成，就会形成浏览器掉帧（掉帧就是例如图像一闪一闪的,运动不流畅的状况）。加之用户鼠标滚动每每是连续的，就会持续触发scroll事件致使掉帧扩大、浏览器CPU使用率增长，用户体验收到影响。

• 而CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器就能够在元素属性真正发生变化以前提早作好对应的优化准备工做。这种优化能够将一部分复杂的计算工做提早准备好，使页面的反应更为快速灵敏。

准备知识

CPU

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

GPU

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

硬件加速

• 硬件加速意味着Graphics Processing Unit（GPU）会经过代替Central Processing Unit (CPU)作一些负荷比较大的事情，来协助浏览器快速渲染页面，当CSS操做使用硬件加速的时候，一般会使页面渲染速度加快。

• 浏览器渲染页面的过程：

  1.解析HTML(HTML Parser)

  2.构建DOM树(DOM Tree)

  3.渲染树构建(Render Tree)

  4.绘制渲染树(Painting)

  简单的解释就是：浏览器经过请求获得服务器返回的html，由于html是树状结构，经过浏览器解析生成DOM Tree。在CSS解析完毕后，将获得的模拟树CSSOM Tree和DOM Tree结合构建Render Tree，最终用来进行绘图(Painting)

CSS的动画、变形、渐变并不会自动触发GPU加速，而是使用浏览器稍慢的软件渲染引擎。在transition、transform和animation的世界里，应该卸载进程到GPU以加速速度。只有3D变形会有本身的layer，而2D变形则不会。

will-change

1.will-change 是什么？

will-change的功能是：提早通知浏览器元素将要作什么动画，让浏览器提早准备合适的优化设置

官方文档说：这是一个仍处于试验阶段的功能，因此在将来版本的浏览器中该语法的功能和行为kennel随之变化。

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

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

2.语法

will-change: auto
will-change: scroll-position
will-change: contents
will-change: transform        // Example of <custom-ident> 
will-change: opacity          // Example of <custom-ident>
will-change: left, top        // Example of two <animateable-feature>

will-change: unset
will-change: initial
will-change: inherit
复制代码

auto

表示没有特别指定哪些属性会变化，须要浏览器本身去猜，而后使用浏览器常用的一些常规方法进行优化。

能够是如下值：

scroll-position

表示开发者但愿在不久后改变滚动条的位置或者使之产生动画

contents

表示开发者但愿在不久后改变元素内容中的某些东西，或者使它们产生动画

表示开发者但愿在不久后改变指定的属性名或者使之产生动画。若是属性名是简写，则表明全部与之对应的简写或者全写的属性

will-change的使用

hover使用

不要直接写在默认状态中，由于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使用

var el = document.getElementById('element');

// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
  this.style.willChange = 'transform, opacity';
}

function removeHint() {
  this.style.willChange = 'auto';
}
复制代码

若是某个应用在按下键盘的时候会翻页，好比相册或者幻灯片一类的，它的页面很大很复杂，此时在样式表中写上 will-change 是合适的。这会使浏览器提早准备好过渡动画，当键盘按下的时候就能当即看到灵活轻快的动画。

.slide {
  will-change: transform;
}
复制代码

使用will-change的注意事项

不要将 will-change应用到太多元素上：

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

有节制地使用：

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

不要过早应用 will-change优化：

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

给它足够的工做时间：

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