css3中不需要回流和重绘的属性

最新推荐文章于 2023-02-17 08:53:34 发布

原创最新推荐文章于 2023-02-17 08:53:34 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

6 篇文章

订阅专栏

4 篇文章

订阅专栏

本文探讨CSS3的硬件加速属性，如transform、opacity、filter和will-change，这些属性能有效减少页面回流和重绘，提升用户体验。通过具体实例说明如何使用这些属性优化网页性能。

众所周知，页面的回流和重绘会造成额外的计算消耗，降低用户体验，而css3自带的硬件加速则根本不需要回流和重绘

css3不需要回流和重绘的属性：

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

opacity属性设置元素的不透明级别。如 opacity: 0.5

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。语法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

例如：

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}


// 修改所有图片的颜色为黑白 (100% 灰度):

will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变，渲染的也更快，这样页面可以快速更新，表现的更加流畅。

举个例子，当对于素使用 CSS 3D变形时，元素及其内容可以在合成到页面之前被创建到我们之前说的layer。然而把元素放到layer中是个昂贵的操作，这将会导致变形动画延迟一个课件的瞬间，也就是flicker

为了避免这种延时，我们可以在发生之前通知浏览器，这样浏览器会有一定的时间去准备这些变化，当发生的时候layer已经准备好了，这样动画酒会很流畅，不会闪屏

使用will-change提示浏览器关于即将发生的变形十分简单，添加个CSS属性就行

will-change: transform;

也可以告诉浏览器要改变元素的滚动条位置，或者多个要变化的属性，写下属性的名字就行，也可以写多个，逗号隔开

will-change: transform, opacity;

声明了元素即将进行的变化会让浏览器在渲染页面时做更好的决定，这明显比之前说的3D hacks要好。

关于will-change的具体介绍和好处见另一篇介绍：https://www.cnblogs.com/yuzhongwusan/p/4186405.html