首先，我們回顧一下網(wǎng)頁(yè)渲染時(shí)，瀏覽器的動(dòng)作：
1.根據(jù)來(lái)自服務(wù)器端的 HTML 代碼形成文檔對(duì)象模型（DOM）
2.加載并解析樣式，形成 CSS 對(duì)象模型。
3.在文檔對(duì)象模型和 CSS 對(duì)象模型之上，創(chuàng)建一棵由一組待生成渲染的對(duì)象組成的渲染樹(shù)（在 Webkit 中這些對(duì)象被稱為渲染器或渲染對(duì)象，而在 Gecko 中稱之為“frame”。）渲染樹(shù)反映了文檔對(duì)象模型的結(jié)構(gòu)，但是不包含諸如 <head> 標(biāo)簽或含有display:none屬性的不可見(jiàn)元素。在渲染樹(shù)中，每一段文本字符串都表現(xiàn)為獨(dú)立的渲染器。每一個(gè)渲染對(duì)象都包含與之對(duì)應(yīng)的 DOM 對(duì)象，或者文本塊，還加上計(jì)算過(guò)的樣式。換言之，渲染樹(shù)是一個(gè)文檔對(duì)象模型的直觀展示。
4.對(duì)渲染樹(shù)上的每個(gè)元素，計(jì)算它的坐標(biāo)，稱之為布局。瀏覽器采用一種流方法，布局一個(gè)元素只需通過(guò)一次，但是表格元素需要通過(guò)多次。
5.最后，渲染樹(shù)上的元素最終展示在瀏覽器里，這一過(guò)程稱為“painting”。
當(dāng)用戶與網(wǎng)頁(yè)交互，或者腳本程序改動(dòng)修改網(wǎng)頁(yè)時(shí)，前文提到的一些操作將會(huì)重復(fù)執(zhí)行，因?yàn)榫W(wǎng)頁(yè)的內(nèi)在結(jié)構(gòu)已經(jīng)發(fā)生了改變。
重繪
當(dāng)改變那些不會(huì)影響元素在網(wǎng)頁(yè)中的位置的元素樣式時(shí)，譬如 background-color (背景色)， border-color (邊框色)， visibility (可見(jiàn)性)，瀏覽器只會(huì)用新的樣式將元素重繪一次(這就是重繪，或者說(shuō)重新構(gòu)造樣式)。
重排
當(dāng)改變影響到文本內(nèi)容或結(jié)構(gòu)，或者元素位置時(shí)，重排或者說(shuō)重新布局就會(huì)發(fā)生。這些改變通常由以下事件觸發(fā)：
DOM 操作（元素添加，刪除，修改，或者元素順序的改變）;
內(nèi)容變化，包括表單域內(nèi)的文本改變;
CSS 屬性的計(jì)算或改變;
添加或刪除樣式表;
更改“類”的屬性;
瀏覽器窗口的操作（縮放，滾動(dòng)）;
偽類激活（：懸停）。
瀏覽器如何優(yōu)化渲染？
瀏覽器盡可能將重繪/重構(gòu) 限制在被改變?cè)氐膮^(qū)域內(nèi)。比如，對(duì)于位置固定或絕對(duì)的元素，其大小改變只影響元素本身及其子元素，然而，靜態(tài)定位元素的大小改變會(huì)觸發(fā)后續(xù)所有元素的重流。
另一種優(yōu)化技巧是，在運(yùn)行幾段 JavaScript 代碼時(shí)，瀏覽器會(huì)緩存這些改變，在代碼運(yùn)行完畢后再將這些改變經(jīng)一次通過(guò)加以應(yīng)用。
