浏览器的重绘和回流

重绘与回流的定义

  重绘:当前元素的样式(背景颜色、字体颜色等)发生改变的时候,我们只需要把改变的元素重新的渲染一下即可,重绘对浏览器的性能影响较小,所以 一般不考虑。

  发生重绘的情形:改变容器的外观风格等,比如background:black等。改变外观,不改变布局,不影响其他的dom。

 

  回流:是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。

  因为回流可能导致整个dom树的重新构造,所以是性能的一大杀手

  一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流.

 

触发回流的操作

1.调整窗口大小(Resizing the window)

2.改变字体(Changing the font)

3.增加或者移除样式表(Adding or removing a stylesheet)

4.内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in an input box)

5.激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)

6.操作 class 属性(Manipulating the class attribute)

7.脚本操作 DOM(A script manipulating the DOM)

8.计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)

9.设置 style 属性的值 (Setting a property of the style attribute)

10.fixed定位的元素,在拖动滚动条的时候会一直回流

猜你喜欢

转载自blog.csdn.net/Kuyin328178972/article/details/72928346