你不知道的《回流与重绘》那些事儿
1.回流(Reflow)
回流是指当网页中的元素的布局发生变化时,浏览器需要重新计算元素的位置和大小。任何影响页面布局的操作,比如改变元素的尺寸、位置、隐藏/显示元素,或者调整字体大小、窗口尺寸等,都会触发回流。
回流的开销比较大,因为它会导致页面的重新布局,影响整个页面甚至是整个文档的渲染。
触发回流的操作包括:
- 改变窗口的大小。
- 修改元素的宽高、边距(margin)、填充(padding)、边框(border)等样式属性。
- 添加或删除 DOM 元素。
- 改变元素的字体大小或文本内容。
- 设置
display: none
(隐藏元素,触发回流)。
2.重绘(Repaint)
重绘是指当元素的外观(比如颜色、背景、边框等)发生变化时,浏览器会重新绘制这些元素。相比回流,重绘的开销相对较小,因为它不涉及元素的布局重新计算,只需更新外观。
触发重绘的操作包括:
- 改变元素的颜色(比如
color
、background-color
)。- 改变元素的透明度(比如
opacity
)。- 改变元素的边框颜色。
3.总结
回流的重点在于“流”,倾向于结构的调整,对于性能影响更大。
重绘的重点在于“绘”,倾向于样式的调整,对于性能影响较小。
回流一定会触发重绘,而重绘不一定会回流。
4.性能优化建议:
- 避免频繁操作 DOM,可以通过批量更新 DOM,或使用
DocumentFragment
进行 DOM 操作。 - 减少回流的触发,例如在改变样式时尽量避免逐一更改每个属性,可以使用
class
一次性改变多个样式属性。 - 使用 CSS3 动画,它们通常不触发回流或重绘,性能会更好。
原文地址:https://blog.csdn.net/weixin_51943308/article/details/142127744
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/299668.html 如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/299668.html 如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!