首页 > 其他分享 >CSS的重绘和重排是什么?

CSS的重绘和重排是什么?

时间:2024-08-12 22:27:04浏览次数:8  
标签:DOM 元素 重排 重绘 CSS 属性

你好同学,我是沐爸,欢迎点赞、收藏和关注。个人知乎

在CSS中,元素的某些属性的变化会触发浏览器的重绘(Repaint)或重排(Reflow,也称为重渲染或回流)。了解这些差异可以帮助开发同学优化页面性能,避免不必要的性能开销。

一、重排(Reflow)

重排,简单理解就是重新排列。重排是浏览器中最昂贵的操作之一,因为它涉及到重新计算页面上所有受影响的元素的位置和几何尺寸。以下CSS属性的改变通常会触发重排:

1.布局相关属性

widthheightpaddingmarginborderdisplay(当值从none变为其他时)、positiontoprightbottomleftfloatclearoverflow(当值从visible变为hiddenscrollauto时,且内容溢出时)等。

2.内容相关属性

虽然内容(如文本或图片)的更改通常不会导致重排,但如果内容增加导致元素尺寸改变,或者元素的可见性改变(如display: none变为display: block),则可能触发重排。

3.添加或删除DOM元素
这通常会导致相关元素的重排。

二、重绘(Repaint)

重绘,简单理解就是重新绘制。比重排开销小,它只涉及到改变元素的外观,而不改变其在文档流中的位置或几何尺寸。以下CSS属性的改变通常只触发重绘:

视觉相关属性

colorbackgroundborder-style(不影响尺寸)、visibility(当元素从visible变为hidden时,不涉及位置变化)、text-decorationbox-shadowoutline等。

三、两者的关系

1.重排一定会导致重绘,但重绘不一定导致重排

举例来说,以渐变背景色为例,宽度的改变引起重排,那么渐变背景色就要根据新的宽度进行重新生成背景色。而改变背景色,只需要重新绘制,但页面布局不变,不会发生重排。

2.重绘和重排可能同时发生。

重绘和重排同时触发的典型场景:修改元素的尺寸和位置、添加和删除DOM元素、浏览器窗口大小改变、修改元素的显示属性(display属性从none变为其他值、visibility属性从hidden变为visible)

四、优化策略

  • 减少DOM操作:尽量减少直接操作DOM,尤其是大量DOM元素时。
  • 合并DOM操作:将多个DOM操作合并成一个,以减少重排和重绘的次数。
  • 使用CSS类:通过修改CSS类来改变元素的样式,而不是直接操作DOM元素的样式属性。
  • 利用CSS3硬件加速:使用CSS3的transform、opacity等属性可以通过GPU加速来提高渲染速度,减少重绘的开销。
  • 使用新技术:批量修改DOM元素,使用DocumentFragmentrequestAnimationFrame等技术来优化性能。
  • 操作延迟:尽量避免在布局未稳定时(如调整窗口大小)读取或修改布局属性,因为这可能导致额外的重排。
  • 使用虚拟DOM:在JavaScript框架中,可以使用虚拟DOM来优化DOM的更新过程,减少不必要的重排和重绘。

希望对你有所帮助,下期再见!

标签:DOM,元素,重排,重绘,CSS,属性
From: https://blog.csdn.net/m0_37943716/article/details/141143308

相关文章

  • 矿泉水在线批发商城系统解决方案毕设毕业设计.web期末作业设计网页.css网页成品参考
     博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、P......
  • CSS 绘制扇面
    参考资料:https://juejin.cn/post/7266641059282927650 效果:源码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1......
  • 前端必知必会-CSS边框属性border
    文章目录CSS边框CSS边框样式border-styleCSS边框宽度border-widthCSS边框颜色border-colorCSS指定每条边的属性CSS简写边框属性CSS圆角边框border-radius总结CSS边框CSS边框属性允许您指定元素边框的样式、宽度和颜色。CSS边框样式border-styleborder-......
  • 前端必知必会-CSS边距Margin
    文章目录CSS边距Margin边距-各个侧面边距-简写属性CSS边距折叠总结CSS边距Margin边距Margin用于在元素周围、任何定义的边框之外创建空间。有一些属性可用于设置元素每侧的边距(顶部、右侧、底部和左侧)。边距-各个侧面CSS具有用于指定元素每侧边距的属......
  • 横向滚动条 css js html
    目的:1.练习手写滚动条2.市面上多是竖向滚动条,横向滚动条较少3.横向滚动条,需要滑动到容器底部才能使用,不方便,因此想自己写一个横向滚动条放置在容器内部的视口高度的最低处3.问题复现:如果容器的内容超过了容器的宽度,就会出现横向滚动条(暂不考虑换行),但是如果该容器的高......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript学校网站(学生信息管理系统)
    HTML+CSS+JS【学校网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 前端:CSS选择器(级联/层叠样式单)--用作装饰
    1.选择器:给谁加样式三种样式如果对于不同的方面,效果叠加,如果是相同的方面,行内样式的优先级最高,外部样式和内部样式的优先级相等,谁在上面先用谁2.css的语法规则:selector{property:value;property:value;}/*基本选择器*//*1.元素选择器根据元素名称做......
  • CSS3 边框(包含border-radius、border-image与box-shadow)
    CSS3边框样式border-radius作用:设置圆角值的个数及其效果简记:左上开始顺时针,值不够的对角来凑。值的个数效果1四个角一致2左上角和右下角一致,右上角和左下角一致3左上角、右上角和左下角一致、右下角4左上角、右上角、右下角、左下角圆角与椭圆角语法:border-radi......
  • css子元素、兄弟元素、直接子元素如何表示
    在CSS中,选择器用于指定你想要样式化的HTML元素。关于子元素、兄弟元素和直接子元素的表示,我们可以使用不同类型的选择器。以下是一些基本的概念和示例:子元素(DescendantSelector)子元素选择器,或者更准确地说是后代选择器,使用空格来指定一个元素内部的另一个元素,无论它们之间隔了......
  • 425.响应式的境外旅游私人订制网站 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有Web前端网页制作的各行各业的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......