网页的渲染机制

流程

• 解析 HTML 标签, 构建 DOM 树
• 解析 CSS 标签, 构建 CSSOM 树
• 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
• 在渲染树的基础上进行布局, 计算每个节点的几何结构
• 把每个节点绘制到屏幕上 (painting)

• DOM：（Document Object Model），浏览器将HTML解析成树形的数据结构，简称DOM。DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树的根节点是Document对象。
• CSSOM：（CSS Object Model），浏览器将CSS代码解析成树形的数据结构。
• 渲染引擎 ：获取标记式内容（HTML、XML及图像文件等等）、整理信息及XSL，最终在浏览器的屏幕上显示请求的内容。