浏览器是如何渲染网页的?
(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