參考：
瀏覽器加載雁竞、解析、渲染的過程
解析：
1. 瀏覽器會將HTML解析成一個DOM樹佩厚，DOM 樹的構(gòu)建過程是一個深度遍歷過程：當(dāng)前節(jié)點的所有子節(jié)點都構(gòu)建好后才會去構(gòu)建當(dāng)前節(jié)點的下一個兄弟節(jié)點砾隅。
2. 將CSS解析成 CSS Rule Tree 。
3. 根據(jù)DOM樹和CSSOM來構(gòu)造 Rendering Tree漆改。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因為一些像 Header 或 display:none 的東西就沒必要放在渲染樹中了。
4.有了Render Tree返吻，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點、各個節(jié)點的CSS定義以及他們的從屬關(guān)系乎婿。下一步操作稱之為Layout测僵，顧名思義就是計算出每個節(jié)點在屏幕中的位置。
5.再下一步就是繪制，即遍歷render樹捍靠，并使用UI后端層繪制每個節(jié)點沐旨。
HTML頁面加載和解析流程
1. 用戶輸入網(wǎng)址（假設(shè)是個html頁面，并且是第一次訪問）榨婆，瀏覽器向服務(wù)器發(fā)出請求磁携，服務(wù)器返回html文件；
2. 瀏覽器開始載入html代碼良风，發(fā)現(xiàn)＜head＞標(biāo)簽內(nèi)有一個＜link＞標(biāo)簽引用外部CSS文件谊迄；
3. 瀏覽器又發(fā)出CSS文件的請求，服務(wù)器返回這個CSS文件拖吼；
4. 瀏覽器繼續(xù)載入html中＜body＞部分的代碼鳞上，并且CSS文件已經(jīng)拿到手了，可以開始渲染頁面了吊档；
5. 瀏覽器在代碼中發(fā)現(xiàn)一個＜img＞標(biāo)簽引用了一張圖片篙议，向服務(wù)器發(fā)出請求。此時瀏覽器不會等到圖片下載完怠硼，而是繼續(xù)渲染后面的代碼鬼贱；
6. 服務(wù)器返回圖片文件，由于圖片占用了一定面積香璃，影響了后面段落的排布这难，因此瀏覽器需要回過頭來重新渲染這部分代碼；
7. 瀏覽器發(fā)現(xiàn)了一個包含一行Javascript代碼的＜script＞標(biāo)簽葡秒，趕快運行它姻乓；
8. Javascript腳本執(zhí)行了這條語句，它命令瀏覽器隱藏掉代碼中的某個＜div＞ （style.display=”none”）眯牧。突然少了這么一個元素蹋岩，瀏覽器不得不重新渲染這部分代碼；
9. 終于等到了＜/html＞的到來学少，瀏覽器淚流滿面……
10. 等等剪个，還沒完，用戶點了一下界面中的“換膚”按鈕版确，Javascript讓瀏覽器換了一下＜link＞標(biāo)簽的CSS路徑扣囊；
11. 瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，“大伙兒收拾收拾行李绒疗，咱得重新來過……”侵歇，瀏覽器向服務(wù)器請求了新的CSS文件，重新渲染頁面吓蘑。
重排
如果該次變化涉及元素布局 (如 width), 瀏覽器則拋棄原有屬性, 重新計算并把結(jié)果傳遞給 render 以重新描繪頁面元素, 此過程稱為 reflow惕虑。
下列情況會發(fā)生重排：
- 頁面初始渲染
- 添加/刪除可見DOM元素
- 改變元素位置
- 改變元素尺寸（寬、高、內(nèi)外邊距枷遂、邊框等）
- 改變元素內(nèi)容（文本或圖片等）
- 改變窗口尺寸
重繪
當(dāng) DOM 元素的屬性發(fā)生變化 (如 color) 時, 瀏覽器會通知 render 重新描繪相應(yīng)的元素, 此過程稱為 repaint樱衷。
減少 reflow/repaint
- 不要一條一條地修改 DOM 的樣式。與其這樣酒唉，還不如預(yù)先定義好 css 的 class矩桂，然后修改 DOM 的 className。
- 不要把 DOM 結(jié)點的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量痪伦。
- 為動畫的 HTML 元件使用 fixed 或 absoult 的 position侄榴，那么修改他們的 CSS 是不會 reflow 的。
- 千萬不要使用 table 布局网沾。因為可能很小的一個小改動會造成整個 table 的重新布局癞蚕。
- 能用css3實現(xiàn)的就用css3實現(xiàn)。
