1.瀏覽器解析html源碼膀捷，然后創(chuàng)建一個 DOM樹关噪。
在DOM樹中，每一個HTML標(biāo)簽都有一個對應(yīng)的節(jié)點(diǎn)蜕提，并且每一個文本也都會有一個對應(yīng)的文本節(jié)點(diǎn)森书。DOM樹的根節(jié)點(diǎn)就是 documentElement，對應(yīng)的是html標(biāo)簽谎势。
2.瀏覽器解析CSS代碼凛膏，計算出最終的樣式數(shù)據(jù)。
對CSS代碼中非法的語法她會直接忽略掉它浅。解析CSS的時候會按照如下順序來定義優(yōu)先級：瀏覽器默認(rèn)設(shè)置 < 用戶設(shè)置 < 外鏈樣式 < 內(nèi)聯(lián)樣式 < html中的style译柏。
3.構(gòu)建出DOM樹，并且計算出樣式數(shù)據(jù)后姐霍，下一步就是構(gòu)建一個 渲染樹（rendering tree）鄙麦。渲染樹和DOM樹有點(diǎn)像典唇，但是是有區(qū)別的。DOM樹完全和html標(biāo)簽一一對應(yīng)胯府，但是渲染樹會忽略掉不需要渲染的元素介衔，比如head、display:none的元素等骂因。而且一大段文本中的每一個行在渲染樹中都是獨(dú)立的一個節(jié)點(diǎn)炎咖。渲染樹中的每一個節(jié)點(diǎn)都存儲有對應(yīng)的css屬性。
4.一旦渲染樹創(chuàng)建好了寒波，瀏覽器就可以根據(jù)渲染樹直接把頁面繪制到屏幕上乘盼。
重繪和重排（repaints and reflows）
每個頁面至少在初始化的時候會有一次重排操作。任何對渲染樹的修改都有可能會導(dǎo)致下面兩種操作：
1.重排就是渲染樹的一部分必須要更新 并且節(jié)點(diǎn)的尺寸發(fā)生了變化俄烁。這就會觸發(fā)重排操作绸栅。
2.重繪部分節(jié)點(diǎn)需要更新，但是沒有改變他的集合形狀页屠，比如改變了背景顏色粹胯，這就會觸發(fā)重繪。什么情況下會觸發(fā)重繪或重排
下面任何操作都會觸發(fā)重繪或者重排：
增加或刪除DOM節(jié)點(diǎn)設(shè)置 display: none;（重排并重繪） 或visibility: hidden（只有重排）
移動頁面中的元素
增加或者修改樣式用戶
改變窗口大小
滾動頁面等
減少重繪和重排
1.不要一個一個地單獨(dú)修改屬性辰企，最好通過一個classname來定義這些修改
// badvar left = 10, top = 10;
el.style.left = left + "px";
el.style.top = top + "px";
// better el.className += " theclassname";
2.把對節(jié)點(diǎn)的大量修改操作放在頁面之外用 documentFragment來做修改clone 節(jié)點(diǎn)风纠，在clone之后的節(jié)點(diǎn)中做修改，然后直接替換掉以前的節(jié)點(diǎn)通過 display: none 來隱藏節(jié)點(diǎn)（直接導(dǎo)致一次重排和重繪）牢贸，做大量的修改竹观，然后顯示節(jié)點(diǎn)（又一次重排和重繪），總共只會有兩次重排潜索。
3.不要頻繁獲取計算后的樣式栈幸。如果你需要使用計算后的樣式，最好暫存起來而不是直接從DOM上讀取帮辟。
4.總的來說，總是考慮到渲染樹得存在玩焰，考慮到你的一次修改會導(dǎo)致多大的繪制操作由驹。比如絕對定位元素的動畫就不會影響其他大部分元素。