重绘和重排(回流)

简介: 重绘和重排(回流)

重绘:当元素的一部分属性发生改变,


如背景、颜色等不会引起布局变化,


只需要浏览器根据元素的新属性重新绘制,


使元素呈现新的外观叫做重绘。  


重排(回流):当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程


所以简单的来说就是。不会引起布局的变化,叫做重绘。


会引起布局的变化,叫做重排(回流)


所以在我们平时写css的时候,还是要按照html中类的顺序来写。


否者可能会造成重排,重拍是需要消耗浏览器性能的哈。


引起重排的地方


1.添加、删除可见的dom


2.元素的位置改变


3.元素的尺寸改变(外边距、内边距、边框厚度、宽高)


4.页面渲染初始化


5.浏览器窗口大小改变


6.设置style属性


7.改变文字大小


8.添加/删除样式表


9.激活伪类,如:hover


10.操作class属性


11.内容的改变,(用户在输入框中写入内容也会)


#### 如何减少重绘(Repaint)和重排(reflow)


(1)不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class,然后修改 DOM 的 className。


(2)不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。


(3)为动画的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他们的 CSS 是不会 reflow 的。


(4)千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。


(5)不要在布局信息改变的时候做查询(会导致渲染队列强制刷新)


(6)用translate替代top改变


(7)用opacity替代visibility(在独立图层下优化重绘)

目录
打赏
0
0
0
0
1
分享
相关文章
理解回流跟重绘
【10月更文挑战第24天】回流和重绘是网页渲染过程中的重要概念,它们相互关联又各自具有不同的特点和影响。通过深入了解它们,我们可以更好地掌握页面性能优化的关键,为用户提供更加优质的浏览体验。
减少回流和重绘的发生
【10月更文挑战第24天】通过综合运用这些方法,可以有效地减少回流和重绘的发生,提高页面的性能和响应速度,为用户带来更好的体验。
利用缓存布局信息来减少回流和重绘的发生
【10月更文挑战第24天】通过合理利用缓存布局信息,我们可以在一定程度上降低回流和重绘的发生频率,提高页面的性能和用户体验。这是前端性能优化中的一个重要环节,需要我们在实践中不断探索和总结经验,以找到最适合的解决方案。
掌握重排和重绘,让你的网页飞得更高!
掌握重排和重绘,让你的网页飞得更高!
< 性能提升 Get √ :如何理解 “ 回流 ” 与 “ 重绘 ” ?如何合理的减少其出现呢 ? >
`回流` 和 `重绘` 可以说是每一个web前端开发者经常听到的两个名词,虽然听的多,但是我们真的都理解它们的意思了嘛? 很显然都迷迷糊糊,当然在之前没有去了解的时候,小温也不例外! 之前是介于之前公司要分享,所以当时有做了解,所以这次打算和大伙分享一下! > 🧐 预先剧透一下: " **`回流`** " 和 “ **`重绘`** ” 是阻碍浏览器渲染 及 服务性能的关键因素中 比较重要的两点, 合理的规避它们,能够有效的提高项目的性能!
107 2
< 性能提升 Get √ :如何理解 “ 回流 ” 与 “ 重绘 ” ?如何合理的减少其出现呢 ? >
重排和重绘
重排和重绘
51 0