瀏覽器解析
一.瀏覽器會解析三個東西
- HTML/SVG/XHTML
- CSS會生成CSS規(guī)則樹，
- javascript腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.解析完成后，瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree
二. 注意：
- Rendering Tree不等同于DOM樹，因為因為一些像Header或display:none的東西就沒必要放在渲染樹中。這個在瀏覽器的工作原理里面有講地 很清楚。
- CSS的rule Tree醉冤，主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結(jié)點篙悯。也就是所謂的Frame
- 計算每個FRAME的位置冤灾，這叫l(wèi)ayout和reflow
- 最后通過調(diào)用操作系統(tǒng)Native GUI的API繪制。
DOM解析
解析算法由兩個階段組成：標(biāo)記化和樹構(gòu)建辕近。
構(gòu)建過程如下：
CSS解析
- Firefox 規(guī)則樹
<html>
<body>
<div class="err" id="div1">
<p> this is a <span class="big"> big error </span>
this is also a <span class="big"> very big error</span> error
</p>
</div>
<div class="err" id="div2">another error</div>
</body>
</html>
還有如下規(guī)則
1div {margin:5px;color:black}
2.err {color:red}
3.big {margin-top:3px}
4 div span {margin-bottom:4px}
5 #div1 {color:blue}
6 #div2 {color:green}
形成的規(guī)則樹如下圖所示
渲染
1.流程
- 計算CSS樣式
- 構(gòu)建Render Tree
- Layout – 定位坐標(biāo)和大小韵吨，是否換行，各種position, overflow, z-index屬性 ……
- 正式開畫
![Upload Paste_Image.png failed. Please try again.]
2.Repaint和Reflow
- Repaint——屏幕的一部分要重畫，比如某個CSS的背景色變了归粉。但是元素的幾何尺寸沒有變椿疗。
- Reflow——意味著元件的幾何尺寸變了，我們需要重新驗證并計算Render Tree糠悼。Render Tree的一部分或全部發(fā)生了變化届榄。這就是Reflow，或是Layout倔喂。
3.做reflow的情況:
- Initial铝条。網(wǎng)頁初始化的時候。
- Incremental席噩。一些Javascript在操作DOM Tree時班缰。
- Resize。其些元件的尺寸變了悼枢。
- StyleChange埠忘。如果CSS的屬性發(fā)生變化了。
- Dirty馒索。幾個Incremental的reflow發(fā)生在同一個frame的子樹
4.成本比較高的動作：
當(dāng)你增加莹妒、刪除、修改DOM結(jié)點時绰上，會導(dǎo)致Reflow或Repaint
當(dāng)你移動DOM的位置旨怠，或是搞個動畫的時候。
當(dāng)你修改CSS樣式的時候蜈块。
當(dāng)你Resize窗口的時候（移動端沒有這個問題）鉴腻，或是滾動的時候。
當(dāng)你修改網(wǎng)頁的默認(rèn)字體時
四減少reflow/repaint不要一條一條地修改DOM的樣式疯趟。與其這樣，還不如預(yù)先定義好css的class谋梭，然后修改DOM的className信峻。****
把DOM離線后修改****
使用documentFragment 對象在內(nèi)存里操作DOM
先把DOM給display:none(有一次reflow)，然后你想怎么改就怎么改瓮床。比如修改100次盹舞，然后再把他顯示出來。
clone一個DOM結(jié)點到內(nèi)存里隘庄，然后想怎么改就怎么改踢步，改完后，和在線的那個的交換一下丑掺。不要把DOM結(jié)點的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量获印。不然這會導(dǎo)致大量地讀寫這個結(jié)點的屬性。****
盡可能的修改層級比較低的DOM街州。當(dāng)然兼丰，改變層級比較底的DOM有可能會造成大面積的reflow玻孟，但是也可能影響范圍很小****
為動畫的HTML元件使用fixed或absoult的position，那么修改他們的CSS是不會reflow的****
千萬不要使用table布局鳍征。因為可能很小的一個小改動會造成整個table的重新布局黍翎。
主要參照
http://coolshell.cn/articles/9666.html
和http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
