浏览器中重绘以及回流的概念解析-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于浏览器中重绘以及回流的概念解析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.渲染树(render tree)
1.浏览器把获取到的HTML代码解析成一棵DOM树，HTML中的每个标签（tag）都是DOM树中的一个节点，根节点就是我们常用的document对象。DOM树里包含了HTML所有标签，包括display：none隐藏，还有用JS动态添加的元素等；

2.浏览器把所有样式（用户定义的css和用户代理）解析成样式结构体，在解析过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而Firefox会去掉_开头的样式；

3.DOM树和样式结构体组合后构建render tree（渲染树），render tree类似于DOM树，但区别很大，render tree 能识别样式，render tree的每一个节点都有自己的样式，而且render tree中不包含隐藏的节点（比如display：none的节点，还有head节点），因为这些节点不会用于呈现，而且不会影响呈现。

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

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

回流：是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。
因为回流可能导致整个dom树的重新构造，所以是性能的一大杀手
一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流.

3.触发回流的操作
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定位的元素,在拖动滚动条的时候会一直回流

如何避免回流
1. 一起变化：如果要改变一个元素的样式，可以将所有样式集中在一个class上面一次变化，而不是变化几次
2. 具有动画效果请使用absolute
3. 避免使用表格布局
4. 不要使用CSS表达式
5. 在最末改变元素
6. 动画移动时候，要控制
比如我们拖动元素时候，我是在他x或者y坐标改变5px才操作，这样虽说降低了平滑度，但是对性能有提高
7. 如果你想让复杂的表现发生改变，例如动画效果，那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它。
8. 既然计算offsetWidth也会引起回流,那么就拿一个变量保存它
9. 当我们需要向文档中添加节点时，可以用文档碎片的方式去解决这个问题的，当我们需要给DOM中添加新的元素的时候，先将其放在一个容器中，然后统一添加，这样就只产生了一次回流