浏览器解析
浏览器解析大概的工作流程大致可归纳为四个步骤：
-
解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到
DOM节点，它被称为 – 内容树。 -
构建渲染树：
解析CSS（包括外部CSS文件和样式元素以及js生成的样式）成样式结构体，根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树（render tree）。
注：在解析的过程中会去掉浏览器不能识别的样式，比如：IE会去掉-moz开头的样式，而firefox会去掉_开头的样式。 - 布局渲染树（Reflow）:从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
- 绘制渲染树（Repain）: 遍历渲染树，每个节点将使用UI后端层来绘制。
比较：
render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局(layout)，会占有空间。
定义
我们可以看到Reflow 和Repain 分别出现在了第三和第四步。因此我们给出下面的定义： 对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow； 当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
回流与重绘总结：
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为repaint重绘。 注意：回流必将引起重绘，而重绘不一定会引起回流。
以下是从word文档中粘过来的，应该是样式，以后再了解
MicrosoftInternetExplorer4
0
2
DocumentNotSpecified
7.8 磅
Normal
0
@font-face{
font-family:"Times New Roman";
}
@font-face{
font-family:"宋体";
}
@font-face{
font-family:"Calibri";
}
@font-face{
font-family:"微软雅黑";
}
@list l0:level1{
mso-level-number-format:decimal;
mso-level-suffix:tab;
mso-level-text:"%1.";
mso-level-tab-stop:36.0000pt;
mso-level-number-position:left;
margin-left:36.0000pt;text-indent:-18.0000pt;font-family:'Times New Roman';font-size:12.0000pt;}
@list l0:level2{
mso-level-number-format:decimal;
mso-level-suffix:tab;
mso-level-text:"%2.";
mso-level-tab-stop:72.0000pt;
mso-level-number-position:left;
margin-left:72.0000pt;text-indent:-18.0000pt;font-family:'Times New Roman';font-size:12.0000pt;}
@list l0:level3{
mso-level-number-format:decimal;
mso-level-suffix:tab;
mso-level-text:"%3.";
mso-level-tab-stop:108.0000pt;
mso-level-number-position:left;
margin-left:108.0000pt;text-indent:-18.0000pt;font-family:'Times New Roman';font-size:12.0000pt;}
@list l0:level4{
mso-level-number-format:decimal;
mso-level-suffix:tab;
mso-level-text:"%4.";
mso-level-tab-stop:125.8500pt;
mso-level-number-position:left;
margin-left:144.0000pt;text-indent:-18.0000pt;font-family:'Times New Roman';font-size:12.0000pt;}
@list l0:level5{
mso-level-number-format:decimal;
mso-level-suffix:tab;
mso-level-text:"%5.";
mso-level-tab-stop:161.9000pt;
mso-level-number-position:left;
margin-left:180.0000pt;text-indent:-18.0000pt;font-family:'Times New Roman';font-size:12.0000pt;}
@list l0:level6{
mso-level-number-format:decimal;
mso-level-suffix:tab;
mso-level-text:"%6.";
mso-level-tab-stop:197.9000pt;
mso-level-number-position:left;
margin-left:216.0000pt;text-indent:-18.0000pt;font-family:'Times New Roman';font-size:12.0000pt;}
@list l0:level7{
mso-level-number-format:decimal;
mso-level-suffix:tab;
mso-level-text:"%7.";
mso-level-tab-stop:233.9000pt;
mso-level-number-position:left;
margin-left:252.0000pt;text-indent:-18.0000pt;font-family:'Times New Roman';font-size:12.0000pt;}
@list l0:level8{
mso-level-number-format:decimal;
mso-level-suffix:tab;
mso-level-text:"%8.";
mso-level-tab-stop:269.9000pt;
mso-level-number-position:left;
margin-left:288.0000pt;text-indent:-18.0000pt;font-family:'Times New Roman';font-size:12.0000pt;}
@list l0:level9{
mso-level-number-format:decimal;
mso-level-suffix:tab;
mso-level-text:"%9.";
mso-level-tab-stop:305.9000pt;
mso-level-number-position:left;
margin-left:324.0000pt;text-indent:-18.0000pt;font-family:'Times New Roman';font-size:12.0000pt;}
p.MsoNormal{
mso-style-name:正文;
mso-style-parent:"";
margin:0pt;
margin-bottom:.0001pt;
mso-pagination:none;
text-align:justify;
text-justify:inter-ideograph;
font-family:Calibri;
mso-fareast-font-family:宋体;
mso-bidi-font-family:'Times New Roman';
font-size:10.5000pt;
mso-font-kerning:1.0000pt;
}
h3{
mso-style-name:"标题 3";
mso-style-noshow:yes;
mso-style-next:正文;
margin-top:5.0000pt;
margin-bottom:5.0000pt;
mso-margin-top-alt:auto;
mso-margin-bottom-alt:auto;
mso-pagination:none;
text-align:left;
font-family:宋体;
font-weight:bold;
font-size:13.5000pt;
}
h4{
mso-style-name:"标题 4";
mso-style-noshow:yes;
mso-style-next:正文;
margin-top:5.0000pt;
margin-bottom:5.0000pt;
mso-margin-top-alt:auto;
mso-margin-bottom-alt:auto;
mso-pagination:none;
text-align:left;
font-family:宋体;
font-weight:bold;
font-size:12.0000pt;
}
h5{
mso-style-name:"标题 5";
mso-style-noshow:yes;
mso-style-next:正文;
margin-top:5.0000pt;
margin-bottom:5.0000pt;
mso-margin-top-alt:auto;
mso-margin-bottom-alt:auto;
mso-pagination:none;
text-align:left;
font-family:宋体;
font-weight:bold;
font-size:10.0000pt;
}
span.10{
font-family:'Times New Roman';
}
span.15{
font-family:'Times New Roman';
font-style:italic;
}
span.16{
font-family:'Times New Roman';
color:rgb(0,0,255);
text-decoration:underline;
text-underline:single;
}
span.17{
font-family:'Times New Roman';
font-weight:bold;
}
p.p{
mso-style-name:"普通(网站)";
margin-top:5.0000pt;
margin-right:0.0000pt;
margin-bottom:5.0000pt;
margin-left:0.0000pt;
mso-margin-top-alt:auto;
mso-margin-bottom-alt:auto;
mso-pagination:none;
text-align:left;
font-family:Calibri;
mso-fareast-font-family:宋体;
mso-bidi-font-family:'Times New Roman';
font-size:12.0000pt;
}
span.msoIns{
mso-style-type:export-only;
mso-style-name:"";
text-decoration:underline;
text-underline:single;
color:blue;
}
span.msoDel{
mso-style-type:export-only;
mso-style-name:"";
text-decoration:line-through;
color:red;
}
@page{mso-page-border-surround-header:no;
mso-page-border-surround-footer:no;}@page Section0{
}
div.Section0{page:Section0;}
