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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

  • transform
  • opacity
  • filter
  • Will-change

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

排是CSS渲染过程中的两个要概念。 (Repaint)指的是当元素的样式发生变化,但影响其布局时,浏览器会将新样式应用到元素上,制元素的外观。的开销相对较小,不会引起布局的变化。 而排(Reflow)指的是当页面布局发生变化时,例如修改了元素的尺寸、位置、内容等,浏览器会新计算并更新元素的几何属性(如大小、位置),然后新布局页面。排的开销相对较大,因为它涉及到整个页面或部分页面的新渲染。 排的区别在于是否引起布局的变化。只会制元素的外观,而不会影响其周围元素的布局;而排会导致整个渲染树的新构建布局。 在性能优化方面,我们通常要尽量减少的次数,因为它们会消耗大量的计算资源。一些常见的优化方法包括: 1. 使用 CSS3 动画或过渡代替 JavaScript 实现的动画效果,因为后者可能会导致频繁的; 2. 使用类似 flexbox grid 等布局技术,可以减少页面布局的复杂性,降低的次数; 3. 避免频繁访问会引起属性,例如 offsetTop、offsetLeft、scrollTop、clientWidth 等; 4. 批量更新样式或布局,可以使用 CSS 类名的方式一次性修改多个元素的样式,而是逐个修改; 5. 将需要执行多次排的 DOM 操作尽量合并为一次,使用文档片段(DocumentFragment)进行缓存。 通过合理优化减少的次数,可以提升页面的性能响应速度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值