这篇文章给大家分享的是有关CSS前端页面渲染优化属性将会改变的使用方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>前言
当触发滚动,调整这类的滚动事件时,被触发的频率非常高,间隔也特别近。如果事件中涉及到大量的位置计算,DOM操作,元素重绘等工作,并且这些工作无法在下一个滚动事件出发前完成,就会造成浏览器掉帧(掉帧就是例如图像一闪一闪的,运动不流畅的情况)。加之用户鼠标滚动往往是连续的,就会持续触发滚动事件导致掉帧扩大,浏览器CPU使用率增加,用户体验收到影响。
而CSS属性将会改变为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器就可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏。
<强>准备知识
<强> CPU
CPU即中央处理器,它的功能主要是解释计算机指令以及处理计算机软件中的数据,也被称为主板。
<强> GPU
GPU是图形处理器,专门处理和绘制图形相关的硬件.GPU是专为执行复杂的数学和几何计算而设计的,使得CPU从图形处理的任务中解放出来,可以执行其他更多的系统任务。
<强>硬件加速
硬件加速意味着图形处理单元(GPU)会通过代替中央处理单元(CPU)做一些负荷比较大的事情,来协助浏览器快速渲染页面,当CSS操作使用硬件加速的时候,通常会使页面渲染速度加快。
浏览器渲染页面的过程:
1。解析HTML (HTML解析器)
2。构建DOM树(DOM树)
3。渲染树构建(渲染树)
4。绘制渲染树(绘画)
简单的解释就是:浏览器通过请求得到服务器返回的html,因为html是树状结构,通过浏览器解析生成DOM树。在CSS解析完毕后,将得到的模拟树CSSOM树和DOM树结合构建渲染树,最终用来进行绘图(画)
CSS的动画,变形,渐变并不会自动触发GPU加速,而是使用浏览器稍慢的软件渲染引擎。在过渡,变换和动画的世界里,应该卸载进程到GPU以加速速度。只有3 d变形会有自己的层,而二维变形则不会。
<强>将改变
<强> 1。将改变是什么?
将改变的功能是:提前通知浏览器元素将要做什么动画,让浏览器提前准备合适的优化设置
官方文档说:这是一个仍处于试验阶段的功能,所以在未来版本的浏览器中该语法的功能和行为养犬随之变化。
CSS3会改变属于web标准属性,兼容性这块Chrome/FireFox/歌剧都是支持的。
注意:将改变真正的行为触发之前会告诉浏览器:“我要触发啦”。这意味着不是通过一个3 d变换迫使我们转换到GPU,而是我们现在可以使用一个专用的属性来通知浏览器留意接下来的变化,从而优化和分配内存。提前预约从容不迫。
<强> 2。语法
<强>汽车
表示没有特别指定哪些属性会变化,需要浏览器自己去猜,然后使用浏览器经常使用的一些常规方法进行优化。
可以是以下值:
<强>滚动坐标
表示开发者希望在不久后改变滚动条的位置或者使之产生动画
<强>内容
表示开发者希望在不久后改变元素内容中的某些东西,或者使它们产生动画
表示开发者希望在不久后改变指定的属性名或者使之产生动画。如果属性名是简写,则代表所有与之对应的简写或者全写的属性
<强>将改变的使用
<强>徘徊使用
不要直接写在默认状态中,因为将改变会一直挂载
