在瀏覽器沒有完整接受全部HTML文檔時(shí)逗爹，它就已經(jīng)開始顯示這個(gè)頁面了亡嫌，瀏覽器是如何把頁面呈現(xiàn)在屏幕上的呢？不同瀏覽器可能解析的過程不太一樣掘而，這里我們只介紹webkit的渲染過程昼伴，下圖對應(yīng)的就是WebKit渲染的過程，這個(gè)過程包括：
????????解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹
? 1. 瀏覽器會(huì)將HTML解析成一個(gè)DOM樹镣屹，DOM 樹的構(gòu)建過程是一個(gè)深度遍歷過程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)圃郊。
2. 將CSS解析成 CSS Rule Tree 。
3. 根據(jù)DOM樹和CSSOM來構(gòu)造 Rendering Tree女蜈。注意：Rendering Tree 渲染樹并不等同于 DOM 樹持舆，因?yàn)橐恍┫馠eader或display:none的東西就沒必要放在渲染樹中了。
????????4. 有了Render Tree伪窖，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)逸寓、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系。下一步操作稱之為layout覆山，節(jié)點(diǎn)信息計(jì)算(重排)竹伸，這個(gè)過程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根據(jù)渲染樹計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息簇宽。
????????5.渲染繪制(重繪)勋篓，這個(gè)過程被叫做(Painting 或者 Repaint)。即根據(jù)計(jì)算好的信息繪制整個(gè)頁面
????????一次的dom更改或者css幾何屬性更改魏割，都會(huì)引起一次瀏覽器的重排/重繪過程譬嚣，而如果是css的非幾何屬性更改，則只會(huì)引起重繪過程钞它。所以說重排一定會(huì)引起重繪拜银，而重繪不一定會(huì)引起重排殊鞭。
DOM節(jié)點(diǎn)中的各個(gè)元素都是以盒模型的形式存在，這些都需要瀏覽器去計(jì)算其位置和大小等尼桶，這個(gè)過程稱為relow;當(dāng)盒模型的位置,大小以及其他屬性操灿，如顏色,字體,等確定下來之后，瀏覽器便開始繪制內(nèi)容泵督，這個(gè)過程稱為repain牲尺。
頁面在首次加載時(shí)必然會(huì)經(jīng)歷reflow和repain。reflow和repain過程是非常消耗性能的幌蚊，尤其是在移動(dòng)設(shè)備上谤碳，它會(huì)破壞用戶體驗(yàn)，有時(shí)會(huì)造成頁面卡頓溢豆。所以我們應(yīng)該盡可能少的減少reflow和repain蜒简。
引起重排：
? ? ? ? ? ? ?1.頁面首次渲染。
? ? ? ? ? ? 2.瀏覽器窗口大小發(fā)生改變漩仙。
? ? ? ? ? ? 3.元素尺寸或位置發(fā)生改變搓茬。
? ? ? ? ? ? 4.元素內(nèi)容變化（文字?jǐn)?shù)量或圖片大小等等）。
? ? ? ? ? ? 5.元素字體大小變化队他。
? ? ? ? ? ? 6.添加或者刪除可見的DOM元素卷仑。
????????????7.查詢某些屬性或調(diào)用某些方法。
? ? ? ? ?引起重繪:
????????????鏈接：https://www.imooc.com/article/45936
