浏览器工作原理阅读理解
1、DOM：解析器的输出“解析树”是由DOM元素和属性节点构成的树结构。DOM是文档对象模型(Document Object Model)的缩写。它是HTML文档的对象表示，同时也是外部内容（例如javascript）与HTML元素之间的接口。
2、HTML解析器：标记化和构建树
（1）、标记化湿词法解析过程，将输入内容解析成多个标记。HTML标记包含起始标记、结束标记、属性名、属性值。标记生成器识别标记，传递给树构造器，然后接收下一个字符以识别下一个标记，如此反复，直到输入的结束。
标记化算法使用状态机来表示，遇到"<"状态为“标记打开状态”；接收a-z字符会创建起始标记，状态改为“标记名称状态”，这个状态会一直保持接收到">"为止；状态改为“数据状态”，数据状态遇到的每一个字符都是一个标记；遇到"/",且当前是“标记打开状态”
（2）、树构建算法：在创建解析器的同时，也会创建Document对象。也是状态机器模式，具体状态分为：initial mode ==> before html ==> before head ==> in head ==> after head ==> in body ==> after body ==> after after body。
浏览器的容错机制：在浏览网页时从来不会看到“语法无效”的错误，是因为浏览器会纠正任何无效的内容，然后继续工作。
3、CSS解析：也是分为词法语法解析
（1）、样式表层叠顺序（优先级从低到高）：浏览器声明、用户普通声明、作者普通声明、作者重要声明、用户重要声明。
（2）、同样顺序的声明根据“特异性”进行排序。特异性是style计为1000，id计为0100，class、伪类计为0010，元素、伪元素计为0001，important计为“王炸”
4、renderTree
WebKits RenderObject类是所有render construction的基类，其定义如下：
class RenderObject {
virtual void layout();
virtual void paint(PaintInfo);
virtual void rect repaintRect();
Node* node; //the DOM node
RenderStyle* style; // the computed style
RenderLayer* containgLayer; // the containing z-index layer
}
5、布局
renderTree并不包含位置和大小信息， 计算这些值的过程称为布局或重排
所有的render constructor都有一个“layout”或者“reflow”方法，每一个render constructor都会调用其需要布局的子代的layout的方法。
Dirty位系统，为避免对所有细小改动都进行整体布局，浏览器会采用一种dirty位系统，对有变动的renderObject标记为“dirty”或“children are dirty”
布局的分类：
（1）、“全局布局”和“增量布局”
全局布局是指触发了整个renderTree范围的布局；布局也可以采用增量布局，也就是当某个renderObject是dirty时，异步触发增量布局。
（2）、同步布局和异步布局
增量布局是异步的，firfox把增量布局的reflow命令加入队列，而调度程序会触发这些命令的批量执行。webkit也有用于执行增量布局的计时器，对renderTree进行遍历，并对“dirty”renderObject进行布局。
请求样式信息（例如offsetHeight）的脚本可同步触发增量布局
全局布局往往是同步触发的
6、绘制
在绘制阶段，系统会遍历renderTree，并调用renderTree的“pain”方法，将rebderObject的内容显示在屏幕上。
和布局一样，绘制也分为全局（绘制整个renderTree）和增量两种。部分renderObject发生了更改，但是不会影响整个树。更改后的renderObject将其在屏幕上对应的矩形区域设置为无效，这导致OS（操作系统）将其视为一块dirty区域。并生成pain事件。OS会很巧妙地将多个区域合并成一个。在chrome系统中，情况会更加复杂一些，因为chrome的render engine不在主进程中，chrome浏览器会在某种程度上模拟OS的行为，展示层会监听这些事件，并将消息委托给render根节点，然后遍历整个renderTree，找到dirty的节点，该节点重新绘制自己（通常也包含其子代）
绘制的顺序：背景颜色、背景图片、边框、子代、轮廓
firfox做了优化，比如对隐藏的元算（被不透明元素遮挡的元素），不进行绘制。webkit采用矩形存储，重新绘制的时候，会将原来的矩形另存为一张位图，只绘制新旧矩形之间的差异部分。
