瀏覽器下載完頁面中全部的組件之後，會解析生成兩個內部數據結構：

1. DOM樹：表示頁面結構

2. 表示DOM節點怎樣顯示

當DOM和渲染樹構建完畢之後，瀏覽器就開始顯示（繪制）頁面元素。當DOM的變化影響了元素的幾何屬性（如改變邊框或者高度）瀏覽器須要又一次計算元素的幾何屬性。相同其它元素的幾何屬性和位置也會受到影響。瀏覽器會使中受到影響的部分失效，並又一次構造渲染樹。這個過程被稱為所謂的“重排”。完畢重排後。瀏覽器會又一次繪制受影響的部分到屏幕中，這個過程被稱為“重繪”。

不是全部的DOM變化都影響元素的幾何屬性。假設演變元素的背景色並不影響它的寬度和高度，這樣的情況，僅僅會發生一次重繪。而不會發生重排，由於元素的布局沒改變，

重繪和重排對影響速度問題。通常會延遲時間。應盡可能降低這種操作。

重排發生一般出現這幾種情況：

1. 加入或刪除可見的DOM元素；

2. 改變元素位置。

3. 元素的尺寸改變（包含：外邊距、內邊距、邊框、高度等）

4. 內容改變（如：文本改變或圖片被另外一個不同尺寸的圖片替代）

5. 頁面渲染器初始化；

6. 瀏覽器窗體尺寸的改變。

依據改變的範圍和程度，渲染樹中或大或小的相應部分也須要又一次計算。有些改變會觸發整個頁面的重排：如當滾動欄出現時候

每次重排都會產生計算消耗，大多數瀏覽器通過隊列化改動並批量運行來優化重排過程。然而，你可能會強制刷新隊列並要求任務立馬運行，獲取布局信息的操作會導致隊列刷新。

一個好的提高程序響應的速度策略就是降低重繪和重排的操作發生。為了降低，應該合並多次對DOM和樣式的改動。然後一次處理。

離線操作DOM。使用緩存。並降低訪問局部信息的次數

瀏覽器的重繪和重排的影響