瀏覽器解析
瀏覽器解析大概的工作流程大致可歸納為四個(gè)步驟：
-
解析HTML以構(gòu)建DOM樹(shù)：渲染引擎開(kāi)始解析HTML文檔灵寺，轉(zhuǎn)換樹(shù)中的html標(biāo)簽或js生成的標(biāo)簽到
DOM節(jié)點(diǎn)淳梦，它被稱為 – 內(nèi)容樹(shù)。 -
構(gòu)建渲染樹(shù)：
解析CSS（包括外部CSS文件和樣式元素以及js生成的樣式）成樣式結(jié)構(gòu)體逊笆，根據(jù)CSS選擇器計(jì)算出節(jié)點(diǎn)的樣式拂苹，創(chuàng)建另一個(gè)樹(shù) —- 渲染樹(shù)（render tree）。
注：在解析的過(guò)程中會(huì)去掉瀏覽器不能識(shí)別的樣式华糖，比如：IE會(huì)去掉-moz開(kāi)頭的樣式麦向，而firefox會(huì)去掉_開(kāi)頭的樣式。 - 布局渲染樹(shù)（Reflow）:從根節(jié)點(diǎn)遞歸調(diào)用客叉，計(jì)算每一個(gè)元素的大小诵竭、位置等，給每個(gè)節(jié)點(diǎn)所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)兼搏。
- 繪制渲染樹(shù)（Repain）: 遍歷渲染樹(shù)卵慰，每個(gè)節(jié)點(diǎn)將使用UI后端層來(lái)繪制。
比較：
render tree能識(shí)別樣式佛呻，render tree中每個(gè)node都有自己的style裳朋，而且render tree不包含隱藏的節(jié)點(diǎn)(比如display:none的節(jié)點(diǎn)，還有head節(jié)點(diǎn))件相，因?yàn)檫@些節(jié)點(diǎn)不會(huì)用于呈現(xiàn)再扭，而且不會(huì)影響呈現(xiàn)的，所以就不會(huì)包含到 render tree中夜矗。注意 visibility:hidden隱藏的元素還是會(huì)包含到render tree中的泛范，因?yàn)関isibility:hidden 會(huì)影響布局(layout)，會(huì)占有空間紊撕。
定義
我們可以看到Reflow 和Repain 分別出現(xiàn)在了第三和第四步罢荡。因此我們給出下面的定義： 對(duì)于DOM結(jié)構(gòu)中的各個(gè)元素都有自己的盒子（模型），這些都需要瀏覽器根據(jù)各種樣式（瀏覽器的、開(kāi)發(fā)人員定義的等）來(lái)計(jì)算并根據(jù)計(jì)算結(jié)果將元素放到它該出現(xiàn)的位置区赵，這個(gè)過(guò)程稱之為reflow惭缰； 當(dāng)各種盒子的位置、大小以及其他屬性笼才，例如顏色漱受、字體大小等都確定下來(lái)后，瀏覽器于是便把這些元素都按照各自的特性繪制了一遍骡送，于是頁(yè)面的內(nèi)容出現(xiàn)了昂羡，這個(gè)過(guò)程稱之為repaint。
回流與重繪總結(jié)：
當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸摔踱，布局虐先，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)派敷。每個(gè)頁(yè)面至少需要一次回流蛹批，就是在頁(yè)面第一次加載的時(shí)候。在回流的時(shí)候篮愉，瀏覽器會(huì)使渲染樹(shù)中受到影響的部分失效腐芍，并重新構(gòu)造這部分渲染樹(shù)，完成回流后试躏，瀏覽器會(huì)重新繪制受影響的部分到屏幕中甸赃，該過(guò)程成為重繪。
當(dāng)render tree中的一些元素需要更新屬性冗酿，而這些屬性只是影響元素的外觀，風(fēng)格络断，而不會(huì)影響布局的裁替，比如background-color。則就叫稱為repaint重繪貌笨。 注意：回流必將引起重繪弱判，而重繪不一定會(huì)引起回流。
以下是從word文檔中粘過(guò)來(lái)的锥惋，應(yīng)該是樣式昌腰，以后再了解
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:"標(biāo)題 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:"標(biāo)題 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:"標(biāo)題 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:"普通(網(wǎng)站)";
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;}
