CSS前端页面渲染优化属性will-change的具体使用_html-js-css

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 是合适的。

这会使浏览器提前准备好过渡动画，当键盘按下的时候就能立即看到灵活轻快的动画。