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

摘要:
CSS属性will change为web开发人员提供了一种方法,告诉浏览器元素会发生什么变化,以便浏览器在元素属性发生变化之前提前做好相应的优化准备。本文将介绍CSS属性将发生变化的准备知识。GPU是一种图形处理器,专门用于处理和绘制图形相关硬件。Will change被设计为最终的优化工具,试图解决现有的性能问题。过度使用将导致大量内存消耗,并将导致更复杂的渲染过程,因为浏览器将尝试为可能的更改做好准备。

前面的话

  当我们通过某些行为(点击、移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿。而CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏。本文将介绍CSS属性will-change

准备知识

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

  所谓硬件加速,就是在计算机中把计算量非常大的工作分配给专门的硬件来处理,减轻CPU的工作量

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

【Hack】

  使用translateZ()translate3d()方法为元素添加没有变化的3D变形,骗取浏览器触发硬件加速。但是,代价是这种情况通过向它自己的层叠加元素,占用了RAM和GPU的存储空间,且无法确定空间释放时间

语法

will-change

  功能: 提前通知浏览器元素将要做什么动画,让浏览器提前准备合适的优化设置

  值: auto | <animateable-feature>

  初始值: auto

  应用于: 所有元素

  继承性: 无

  兼容性: IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+

  auto表示没有特别指定哪些属性会变化,浏览器需要自己去猜,然后使用浏览器经常使用的一些常规方法优化

  <animateable-feature>可以是以下值:

  scroll-position表示开发者希望在不久后改变滚动条的位置或者使之产生动画

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

  <custom-ident>表示开发者希望在不久后改变指定的属性名或者使之产生动画。如果属性名是简写,则代表所有与之对应的简写或者全写的属性

使用

【使用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);
}

【使用javascript脚本】

.sidebar {
  will-change: transform;
}    

  以上示例在样式表中直接添加了will-change属性,会导致浏览器将对应的优化工作一直保存在内存中,这其实是不必要的。下面展示如何使用脚本正确地应用will-change属性

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;
}

注意事项

  1、不要将will-change应用到太多元素上:浏览器已经尽力尝试去优化一切可以优化的东西了。有一些更强力的优化,如果与will-change结合在一起的话,有可能会消耗很多机器资源,如果过度使用的话,可能导致页面响应缓慢或者消耗非常多的资源

  2、有节制地使用:通常,当元素恢复到初始状态时,浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了will-change属性,则表示目标元素可能会经常变化,浏览器会将优化工作保存得比之前更久。所以最佳实践是当元素变化之前和之后通过脚本来切换will-change的值

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

  4、给它足够的工作时间:这个属性是用来让页面开发者告知浏览器哪些属性可能会变化的。然后浏览器可以选择在变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化,然后为它加上will-change属性

免责声明:文章转载自《CSS页面渲染优化属性will-change》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇调用微信JS-SDK配置签名多渠道打包工具Walle源码分析下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS布局:水平居中

CSS布局之元素水平居中 本文将依次介绍在不同条件下实现水平居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解。实际应用场景太复杂,生搬硬套容易出错。最重要的是掌握各种方法能够实现居中的原理。只要掌握了原理,那么不管问题怎么变都可以根据自己的理解选择合适的方法。 一、使用 text-align: center 1.原理...

1-4 Sass的基本特性-基础

[Sass]声明变量 定义变量的语法: 在有些编程语言中(如,JavaScript)声明变量都是使用关键词“var”开头,但是在 Sass 不使用这个关键词,而是使用大家都喜欢的美元符号“$”开头。我想用一张图来解释,我一直坚信,一图胜千言万语: 上图非常清楚告诉了大家,Sass 的变量包括三个部分: 声明变量的符号“$” 变量名称 赋予变量的值...

前端-HTML基础+CSS基础

HTML HTML <p></p>段落标签*** <h></h>标题标签H** <div></div>块级标签 白板***** <span></span>行内标签 白板***** <input /> 文本框标签 ***** <form&...

windows下的SASS/Compass的安装与卸载

认识SASS/Compass SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。 SASS与Compass的安装说明 SASS在Windows操作系统内依赖于Ruby环境,因此在安装SASS之前: 1、需要先安装Ruby。Ruby现阶段的安装与一般应用程序安装没有太大区别,环境变量等由安装程序...

Selenium2+python自动化36-判断元素存在【转载】

前言 最近有很多小伙伴在问如何判断一个元素是否存在,这个方法在selenium里面是没有的,需要自己写咯。 元素不存在的话,操作元素会报错,或者元素有多个,不唯一的时候也会报错。本篇介绍两种判断元素存在的方法。 一、find_elements方法判断 1.find_elements方法是查找页面上所有相同属性的方法,这个方法其实非常好用,能熟练掌握技巧的不...

H5网页布局+css代码美化

HTML5的结构化标签,对搜索引擎更友好 li 标签对不利于搜索引擎的收录,尽量少用 banner图片一般拥有版权,不需要搜索引擎收录,因此可以使用ul + li <samp></samp>可用于浅色副标题 display:inline-block; 每个导航块存在水平间隙,解决方法是在父元素上添加font-size:0; sub...