当前位置:首页 > 前端技术 > CSS页面渲染优化属性will-change

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

2022年11月09日 19:06:41前端技术6

前面的话

  当我们通过某些行为(点击、移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用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属性

作者:小火柴的蓝色理想
来源链接:https://www.cnblogs.com/xiaohuochai/p/6321790.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/69214.html

标签: css
分享给朋友:

“CSS页面渲染优化属性will-change” 的相关文章

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

  【实验题目】HTML&CSS实验(5) 【实验目的】学习颜色、字体、文本格式化和盒模型的样式定义。                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

如何使用JS来改变CSS样式

如何使用JS来改变CSS样式 方法: document.getElementById("xx").style.xxx中的所有属性是什么 盒子标签和属性对照 CSS语法(不区分大小写)...

html常用标签以及css基本属性和选择器

html常用标签 一般格式为: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5...

Css图文排布

Css图文排布

图文排布看似简单其实需要花大量的精力去修改,其中图文排布是最常见到的,下面分享下,我对此的一些经验吧 ————————————————– 1.最简单的图文排列——一个图片+一段文字形式 img为行级标签,所以在不进行任何修饰情况下,图片与文字是不整齐的,这时我...

html中怎样给svg文件改变颜色,通过CSS改变svg image引入的图片颜色?

在html元素中通过background设置图片icon,然后通过css3的filter滤镜的drop-shadow 设置阴影来呈现这种改变图片颜色的效果。很不错的方法。 但是我现在的元素是在svg中,即图片的引入是通过image元素xlink:href来引入图...

html链接外部css代码,html如何调用外部css?

html链接外部css代码,html如何调用外部css?

CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。 方法1:使用来引入外部的css文件 在网页的...

css实现li标签不可点击

css实现li标签不可点击,代码如下: style="pointer-events: none;" 作者:不平凡中的平凡 来源链接:https://blog.csdn.net/weixin_40667880/article...

【正视CSS 02】inline与line-height、float、absolute的故事

【正视CSS 02】inline与line-height、float、absolute的故事

前言 那是一个很久之前的故事了。。。之前我一直认为CSS最重要的是布局,将一个图片很好的以网页显示出来就是王道。 但是,经过后来慢慢入门后,才发现其实布局感觉不是很难了,倒是行内元素这个家伙深藏不露。 行内元素属于那种很仁慈的主,你了解他你能做得更好,你不了解他,你的...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。