流程
- 解析 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，最终在浏览器的屏幕上显示请求的内容。
网友评论