浏览器渲染原理
推荐相关阅读文章
- 浏览器页面渲染机制，你真的弄懂了吗？
- 关键渲染路径
- 深入浅出浏览器渲染原理
- [译] 浏览器工作原理探究 这篇文章真的很长，也很枯燥
- 史上最全！图解浏览器的工作原理
前言
本文主要阐释浏览器是如何使用html、css、javascript渲染页面。浏览器中页面的渲染是由渲染引擎负责的，目前渲染引擎主要分为两种：Firefox 中的 Gecko、Chrome 和 Safari 中的 WebKit 。
浏览器大致的工作流程
- 浏览器首先解析 html ，构建 DOM Tree ，在这一过程中如果遇到 CSS 内容，浏览器会去构建 CSSOM，两者互不干扰 （但是有特殊情况，后面会解释）。等 DOM Tree 和 CSSOM 构建完毕后，浏览器会通过二者构建 Render Tree，最后调用 GUI 将 Render Tree。 上相关内容绘制到屏幕上。
- 流程图如下
- Gecko主要流程：
Gecko主要流程
- WebKit主要流程：
WebKit主要流程
DOM Tree 的建立
-
浏览器会根据一系列的步骤处理 HTML ,将 HTML 构建成 DOM Tree 。大致上会经历以下步骤：
Bytes => Characters => Tokens => Node => DOM
-
第一步（转换）：浏览器从硬盘或者网络服务获取到 HTML 的原始字节，并且根据文件指定的编码格式将字节转换成字符。
-
第二步（Token）：又称令牌化，浏览器会将字符串转换成符合 W3C HTML5 的标准各种 Token，如 "<html>"、"<body>"等等令牌，每个令牌都具有特殊的含义和一组规则。每个 Token 都会标识当前 Token 是“开始标签”还是“结束标签”又或者是“文本内容”等信息。 通过这些标识，Token就可以维护节点与节点之间的关系。此时的生成的 Token 形式如下：
Token
-
第三步 （生成Node并构建DOM）：根据生成的 Token 开始生成节点并构建 DOM，消耗 Token 生成 Node 时并不是等将整个 HTML 转换成 Token 再生成 Node，而是一边生成 Token ，一边消耗 Token 生成Node。直白点就是一个 Token 生成就会被消耗生成 Node。 根据 Token 的“开始标签”和“结束标签”来识别和关联节点，将节点对象链接到一个树状的数据结构内。 当所有的 Token 生成并消耗完毕时，将得到一个完整的 DOM Tree
带有结束标签标识 的 Token 不会生成Node
从 Token 生成 DOM Tree 的过程如下：
Token生成DOM Tree
CSSOM（CSS Object Mode） 的建立
-
CSSOM 是 CSS Object Mode 的简称，是一组允许 Javascript 操纵 CSS 的 API。
-
相关术语介绍： Gecko把格式化好的可视元素成为“帧树”（Frame Tree）,每个元素都是一帧（Frame）。而在 Webkit 中则使用“渲染树”（Render Tree）,"渲染树"由渲染对象组成。
-
正题：CSSOM 的构建与 DOM 的构建是十分相似的，如下：
Bytes => Characters => Tokens => Node => CSSOM
（查阅了很多资料，这一过程的详细情况并不是很清楚）- 在 Webkit 和 Gecko 中， CSSOM 的构建过程是不一样的。
- 在 Gecko 中在解析 CSS 的时候先生成 CSS Rule Tree , 然后对照着 DOM 树生成 Style Context Tree。这个 Style Context Tree 就是我们要的 CSSOM。
- 在 Webkit 中并不需要 CSS Rule Tree 和 DOM Tree 两个树来配合，Webkit 有Style对象，它直接把这个Style对象存在了相应的DOM结点上生成 CSSOM。
-
CSSOM 的格式如图：
CSSOM
注：
1. CSS 匹配 DOM Tree 主要是从右到左解析选择符，这是一个相当复杂和有性能问题的事情。
2. CSSOM 和 DOM Tree 的构建可以同步进行。DOM 的解析是可以逐步完成的，不需要等待所有的 DOM 都构建完，但是要进入下一个阶段必须要等 CSSOM 构建完成。因为每一个 css 属性都可以影响CSSOM，如果不等 CSSOM 构建完毕，那么得到的 CSSOM 是不准确的。
Render Tree 渲染树
-
当我们的 DOM Tree 和 CSSOM 都构建完毕后，此时的 DOM Tree 和 CSSOM 是两棵完全独立的树结构， 开始将两棵树合成 Rnder Tree。
-
Render Tree 和 DOM Tree 还是有些不同的，渲染树上不会出现 “display: none”的元素，渲染树上只会出现需要显示节点和这些节点的样式信息。
-
主要工作
- 从 DOM Tree 根节点开始遍历可见节点
- 对于每个可见节点，为其找到适配的 CSSOM 规则并应用。
布局
渲染树构建完毕后，开始进行布局。在绘制之前浏览器需要计算出每个元素节点的大小和在页面的位置，这一过程也称为重排。
绘制
布局完成后，每个元素节点都有了自己的大小、位置信息，浏览器开始按照这些信息将元素节点绘制到屏幕上。
网友评论