网页渲染流程

---

前端的web页面最终是由浏览器解析展示给用户的，熟悉这个解析渲染过程对我们开发网页是很有好处的，它能使我们更好的做好兼容性处理。它的 步骤大致如下：

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)”。