4、FDRsaid"Wehavenothingtofearbutfearitself."　　于是DOMTree是这个样子：　　然后我们的CSS文档是这样的：/*rule1*/doc{display:block;text-indent:1em;}/*rule2*/title{display:block;font-size:3em;}/*rule3*/para{display:block;}/*rule4*/[]{font-styl

5、e:italic;}　　于是我们的CSSRuleTree会是这个样子：　　注意，图中的第4条规则出现了两次，一次是独立的，一次是在规则3的子结点。所以，我们可以知道，建立CSSRuleTree是需要比照着DOMTree来的。CSS匹配DOMTree主要是从右到左解析CSS的Selector，好多人以为这个事会比较快，其实并不一定。关键还看我们的CSS的Selector怎么写了。　　注意：CSS匹配HTML元素是一个相当复杂和有性能问题的事情。所以，你就会在N多地方看到很多人都告诉你，DOM树要小，CSS尽量用id和class，千万不要过渡层叠下去

6、，……　　通过这两个树，我们可以得到一个叫StyleContextTree，也就是下面这样（把CSSRule结点Attach到DOMTree上）：　　所以，Firefox基本上来说是通过CSS解析生成CSSRuleTree，然后，通过比对DOM生成StyleContextTree，然后Firefox通过把StyleContextTree和其RenderTree（FrameTree）关联上，就完成了。注意：RenderTree会把一些不可见的结点去除掉。而 Firefox中所谓的Frame就是一个DOM结点，不要被其名字所迷惑了。　　注：Webki

7、t不像Firefox要用两个树来干这个，Webkit也有Style对象，它直接把这个Style对象存在了相应的DOM结点上了。　　渲染　　渲染的流程基本上如下（黄色的四个步骤）：1.计算CSS样式2.构建RenderTree3.Layout–定位坐标和大小，是否换行，各种position,overflow，z-index属性……4.正式开画　　注意：上图流程中有很多连接线，这表示了Javascript动态修改了DOM属性或是CSS属性会导致重新Layout，有些改变不会，就是那些指到天上的箭头，比如，修改后的CSSrule没有被匹配到，等。　　这

8、里重要要说两个概念，一个是Reflow，另一个是Repaint。这两个不是一回事。·Repaint——屏幕的一部分要重画，比如某个CSS