重繪重排專案優化

1.構建dom樹（parse）：渲染引擎解析html文件，首先將標籤轉換成dom樹中的dom node(包括js生成的標籤)生成內容樹（content tree/dom tree）

2.構建渲染樹（construct）:解析對應的css樣式檔案資訊（包括js生成的樣式和外部css檔案）而這些檔案資訊以及html中可見的指令（如）,構建渲染

樹（rendering tree/frame tree）;render tree中每個node都會有自己的style，而且render tree不包含隱藏的節點（比如：display:none的節點，還有head節點），因為

這些節點不會用於呈現

3.布局渲染樹（reflow/layout）:從根節點遞迴呼叫，計算每乙個元素的大小、位置等，給出每個節點所應該在螢幕上出現的精確座標

4.繪製渲染樹（paint/repaint）

:遍歷渲染樹，使用ui層來繪製每個節點

當盒子的位置、大小以及其他屬性，例如顏色、字型大小等都確定下來之後，瀏覽器便把這些原色都按照各自的特性繪製一起，將內容呈現在頁面上。

重繪是指乙個元素外觀的改變所觸發的瀏覽器行為，瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。

觸發重繪的條件：

改變元素的外觀屬性。比如：color,background-color等

注意：table及其內部元素可能需要多次計算才能確定好其在渲染樹中節點的屬性值，比同等元素要多花兩倍時間，這就是我們盡量避免使用table布局頁面的原因之一。

當渲染樹中的一部分（或全部）因為元素的規模尺寸，布局，隱藏等改變而需要重新構建，這就稱為回流（reflow）,

每個頁面至少需要一次回流，就是在頁面第一次載入的時候

所以，重排必定會引起重繪，但重繪不一定會引發重排

1.頁面渲染初始化

2.新增或刪除可見的dom元素

3.元素位置的改變，或者使用動畫

4.元素尺寸的改變--大小、外邊距、邊框

5.瀏覽器視窗尺寸的變化（resize事件發生時）

6.填充內容的改變，比如文字的改變或大小改變而引起的計算值寬度和高度的改變

7.讀取某些元素屬性：（offsetleft/top/height/width,clienttop/left/width/height,scrolltop/left/width/height,width/height,getcomputedstyle(),currentstyle(ie)）

重繪重排的代價：耗時，導致瀏覽器卡慢

瀏覽器會維護乙個佇列，把所有的會引起重繪、重排的操作放入這個佇列，等佇列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會flush佇列，進行乙個批處理，這樣就會讓多次的重繪、重排變成一次重繪重排

2.認為能做的優化：我們要減少重繪和重排就是要減少對渲染樹的操作，則我們可以合併多次的dom和樣式的修改，並減少對style樣式的請求

（1）直接改變元素的classname

(2)display：none;先設定元素為display:none;然後進行頁面布局等操作；設定完成後將元素設定為diaplay:block,這樣的話就只引發兩次重繪和重排

（3）使用clonenode(true or false)和replacechild技術，引發一次重繪和重排

（4）將需要多次重拍的元素，position屬性設定為absolute和fixed,元素脫離了文件流，它的變化不會引起其他元素

（5）如果需要建立多個dom節點，可以使用documentfragment建立完後一次性的加入document

結合第5點舉個應用場景：

var fragment =document.createdocumentfragment()

for(let i = 0;i< 100;i++)

document.getelementbyid(

'fruit

重繪 重排 專案優化