Q：浏览器渲染网页的过程

浏览器是如何渲染网页的？

（1）浏览器将从服务器获取的HTML文档构建成 文档对象模型（DOM）（Document Object Model）

（2）样式将被载入和解析，构成  层叠样式表模型CSSOM（CSS Object Model）

（3）在DOM和CSSOM之上，渲染树（rendering tree）将会被创建，代表一系列将被渲染的对象（在Webkit内核中称之为renderer或者 渲染对象 render object，在Gecko内核中称之为 框架frame）。

        渲染树映射除了不可见元素（例如：或者含有display:none的标签）外的所有DOM结构。每一段文本字符串都将划分在不同的渲染对象中，每一个渲染对象都包含了它对应的DOM对象及计算后的样式。换句话说，渲染树是DOM的直观表示。

（4）渲染树的每个元素包含的内容都是计算过的，它被称之为布局（layout）。浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素（tables需要多次pass绘制，pass表示像素处理和顶点处理）

（5）最后布局完成，渲染树将转化为屏幕上的实际内容，这一步称之为绘制painting。

 

重绘Repaint
当页面元素样式的改变不影响元素在文档流中的位置时（例如background-color, border-color,visibility）,浏览器只会将新样式赋予元素并进行重绘操作。

回流Reflow
当改变影响文档内容或者结构，或者元素位置时，回流操作就会被触发，一般有以下几种情况：
（1）DOM操作（对元素的增删改，顺序变化等）；
（2）内容变化，包括表单区域内的文本改变；
（3）CSS属性的更改或重新计算；
（4）增删样式表内容；
（5）修改class属性；
（6）浏览器窗口变化（滚动或缩放）；
（7）伪类样式激活（:hover等）。

https://blog.csdn.net/osdfhv/article/details/52159341