浏览器的呈现

1 .在dom树构建的同时，还会构建另一个树结构：呈现树，这是由可视化元素按照其显示顺序而组成的树，也是文档可视化的表示
2 .firefox将呈现树种的元素称为框架，webkit使用的术语是呈现器或者呈现对象renderObject
3 .呈现器知道如何布局并将自身极其子元素绘制出来
4 .每一个呈现器都代表了一个矩形的区域，通常相对于相关节点的css框，例如一些宽度，高度和位置等几何信息
5 .相应的类型会受到与节点相关的display样式属性的影响，针对不同的display，创建不同的dom呈现器
6 .

呈现树和DOM树之间的关系

1 .呈现树是和dom元素相对应的，但是并非一一对应,非可视化的dom元素不会插入到呈现树中，head元素，如果元素的display属性值为None，那么也是不会显示在呈现树中。
2 .一些dom元素可能对应对个可视化对象，往往具有复杂的结构的元素都是这样，比如select元素
3 .还有一些情况就是格式无效的HTML。根据css规范，inline元素只能包含block元素或者inline元素的一种，如果出现了混合元素，应该创建匿名block呈现器，包裹inline元素
4 .还有一些呈现对象对应于dom节点，但是在树中所处的位置与dom节点不同，浮动元素和绝对定位的元素就是这样，他们处在正常的流程之外，放置在树的其他地方，并没有映射到真正的框架，而是放在原位的占位框架。
5 .

浏览器构建呈现树的流程

1 .样式计算

1 .计算每一个呈现对象的可视化属性
2 .各种来源的样式表，inline样式元素和html中的可视化属性，其中后者将经过转化以匹配css样式属性
3 .样式表的来源包括浏览器的默认样式表，由网页提供者的样式表，以及浏览器默认的样式表

2 .样式计算的难点

1 .样式计算式一个超大的结构，存储了无数的样式属性，可能造成内存问题
2 .选择器进行优化：选择器具有复杂的结构，就会导致某个匹配过程一开始看起来是正确的，但是最终发现其实是徒劳的，还得需要匹配其他路径
3 .应用规则涉及到非常复杂的层叠规则

3 .浏览器处理问题的方法

1 .共享样式对象。当某些对象是同层节点，并且满足以下关系的时候，可以共享样式
2 .元素处于相同的鼠标状态
3 .任何元素没有id
4 .标记名称应匹配
5 .类属性应该匹配
6 .链接状态必须匹配
7 .焦点状态必须匹配
8 ....还有一些其他的部分

4 .在webkit中，解析样式和创建呈现器的过程称之为“附加”.每个dom节点都有一个attach方法，附加是同步进行的，将节点插入dom树需要调用新的节点attach方法。
5 .处理html和body标记就会构建呈现树根节点。这个根节点呈现对象对应于css规范中所说的容器block，这是最上层的block。他的尺寸就是视口，即浏览器窗口显示区域的尺寸。就是文档所指向的呈现对象。呈现树的其余部分以dom树节点插入的形式来构建
6 .

firefox规则树和样式上下树

1 .规则树：将所有规则都存储在树中，路径中的底层节点拥有较高的优先级，规则树包含了所有已知规则匹配的路径，规则存储是延迟进行的。规则树不会再开始的时候就为某个节点进行计算，只有当发现某个节点样式需要计算的时候，才会向规则树添加计算的路径
2 .这个想法相当于将规则树路径视为词典中的单词。如果我们相对内容树中的另一个元素匹配规则，并且找到之前已有的路径，那么就减少了工作量。

规则树是如何帮我们减少工作的呢？

1 .结构划分

1 .样式上下文可以分割为多个结构 ，这些结构体分为了不同的类别的样式信息，比如border,或者color
2 .结构中的属性都是继承或者非继承的。继承属性如果未由元素定义，则继承自其父代。非继承属性如果未进行定义在，则使用默认值
3 .规则树通过缓存整个结构，包括计算出的样式。在这种缓存下如果底层节点没有提供结构的定义，则可使用上层节点中的缓存结构
4 .

2 .使用规则树计算样式上下文

1 .在计算某个特定元素的上下文时，首先计算规则树中的对应路径，或者使用现有的路径。沿用此路径应用规则，在新的样式上下文中填充结构
2 .从路径中拥有最高优先级的底层节点，也是最特殊的选择器开始，并向上遍历规则树，直到结构填充完整
3 .
asdasdasdas
 这样的话，会使用id的样式也就是后面的样式会忽略，除非class里面加了important
4 .如果该规则节点对于此结构没有任何规范，则寻找路径中更上层的节点，找到后指定完整的规范并指向相关节点即可。
5 .找不到该结构的任何定义，如果结构样式是继承的话，就在上下文树中指向父代的结构，这样也可以共享结构。如果是非继承样式，就会使用默认值
6 .如果某个元素与其同级元素都指向同一个树节点，那么他们就可以共享整个样式上下文
7 .

3 .在webkit中没有规则树，这意味着多次出现的属性会根据正确的层叠顺序进行解析，最后出现的最终生效。上面解决的是样式计算问题
4 .浏览器匹配css规则

1 .解决的是元素查找匹配规则
2 .行内样式非常简单就可以匹配到，因为元素拥有样式属性，而且HTML属性可以使用元素作为键值进行印射。
3 .难度在于样式表印射.
4 .样式表解析完毕之后，系统会根据选择器将css规则添加到不同的哈希表中。id，class,标记名称等
5 .这种处理可以大大简化匹配规则，无需查看每一条声明，只需要在哈希表中提取元素的相关规则即可。