前端知識點分析重排和重繪

document.write重排整個頁面 innerhtml可以重繪頁面的一部分

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

2、構建渲染樹（construct）：解析對應的css樣式檔案資訊（包括js生成的樣式和外部css檔案），而這些檔案資訊以及html中可見的指令（如），構建渲染樹（rendering tree/frame tree）；

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

4、繪製渲染樹（paint/repaint）：遍歷渲染樹，使用ui後端層來繪製每個節點。

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

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

使元素呈現新的外觀。

觸發重繪的條件：改變元素外觀屬性。如：color，background-color等。

重排（重構/回流/reflow）：當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建, 這就稱為回流(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)　)

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

3.優化：

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

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

（1）直接改變元素的classname

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

（3）不要經常訪問瀏覽器的flush佇列屬性；如果一定要訪問，可以利用快取。將訪問的值儲存起來，接下來使用就不會再引發回流；

//例如myelement元素沿對角線移動，每次移動乙個畫素。到500*500畫素的位置結束。timeout迴圈體中可以這麼做
myelement.style.left = 1 + myelement.offsetleft + 'px';
myelement.style.top = 1 + myelement.offsettop + 'px';
if(myelement.offsetleft >= 500)
//顯然這種方法低效，每次移動都要查詢偏移量，導致瀏覽器重新整理渲染佇列而不利於優化。好的辦法是獲取一次起始位置的值，然後賦值給乙個變數。如下
var current = myelement.offsetleft;
current++;
myelement.style.left = current + 'px';
myelement.style.top = current + 'px';
if(myelement.offsetleft >= 500)

（4）使用clonenode(true or false) 和 replacechild 技術，引發一次回流和重繪；

（5）將需要多次重排的元素，position屬性設為absolute或fixed，元素脫離了文件流，它的變化不會影響到其他元素；

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

var fragment =document.createdocumentfragment();
var li = document.createelement('li');
var li = document.createelement('li');
li.innerhtml = 'watermelon';

（7）盡量不要使用table布局。

前端知識點分析 重排和重繪

前端效能之重排和重繪

重繪和重排

重排和重繪

相關推薦

前端知識點分析重排和重繪