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的更新过程,减少不必要的重排和重绘。

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

相关推荐
桂月二二37 分钟前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062062 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb2 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角2 小时前
CSS 颜色
前端·css
浪浪山小白兔3 小时前
HTML5 新表单属性详解
前端·html·html5
lee5763 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579653 小时前
AI赋能Flutter开发:ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me4 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者4 小时前
如何构建一个简单的React应用?
前端·react.js·前端框架
qq_392794484 小时前
前端缓存策略:强缓存与协商缓存深度剖析
前端·缓存