浏览器渲染机制

1. 由从服务器接收到的 HTML 形成 DOM（文档对象模型）。
2. 样式被加载和解析，形成 CSSOM（CSS 对象模型）。

3. 紧接着 DOM 和 CSSOM 创建了一个渲染树，这个渲染树是一些被渲染对象的集合（ Webkit 分别叫它们 ”renderer” 和 ”render object”，而在Gecko 引擎中叫 ”frame”）。除了不可见的元素（比如 head 标签和一些有 display:none 属性的元素），渲染树映射了 DOM 的结构。在渲染树中，每一个文本字符串都被当做一个独立的 renderer。每个渲染对象都包含了与之对应的计算过样式的 DOM 对象（或者一个文本块）。换句话说，渲染树描述了 DOM 的直观的表现形式。

   
   
   
4. 对每个渲染元素来说，它的坐标是经过计算的，这被叫做“布局(layout)”。浏览器使用一种只需要一次处理的“流方法”来布局所有元素（tables 需要多次处理）。
5. 最后，将布局显示在浏览器窗口中，这个过程叫做“绘制(painting)”。

重绘
当在页面上修改了一些不需要改变定位的样式的时候（比如background-color,border-color,visibility)，浏览器只会将新的样式重新绘制给元素（这就叫一次“重绘”或者“重新定义样式”）。

重排
当页面上的改变影响了文档内容、结构或者元素定位时，就会发生重排（或称“重新布局”）。重排通常由以下改变触发：

• DOM 操作（如元素增、删、改或者改变元素顺序）。
• 内容的改变，包括 Form 表单中文字的变化。
• 计算或改变 CSS 属性。
• 增加或删除一个样式表。
• 改变”class”属性。
• 浏览器窗口的操作（改变大小、滚动窗口）。
• 激活伪类（如:hover状态）。

【注】版权归 Lucifer 所有，转载请联系作者。