重繪與重排如何使用

這次帶給大家重繪與重排如何使用，使用重繪與重排的注意事項有哪些，下面就是實戰案例，一起來看一下。

瀏覽器載入頁面原理

通常在文件初次載入時，瀏覽器引擎會解析HTML文件來建立DOM樹，之後根據DOM元素的幾何屬性建構一棵用來渲染的樹。渲染樹的每個節點都有大小和邊距等屬性，類似於 盒子模型 （由於隱藏元素不需要顯示，渲染樹中並不包含DOM樹中隱藏的元素）。當渲染樹建置完成後，瀏覽器就可以將元素放置到正確的位置了，再根據渲染樹節點的樣式屬性繪製出頁面。由於瀏覽器的 流佈局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花3倍於同等元素的時間。這也是為什麼我們要避免用table來做版面的一個原因。

重繪

重繪是一個元素 外觀的改變 所觸發的瀏覽器行為，例如改變vidibility、outline、背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新佈局，不一定會伴隨重排。瀏覽器在進行重繪和重排的時候是要付出高昂的效能代價的。

重排

重排是更明顯的改變，可以理解為渲染樹需要重新計算。以下是常見的觸發重排的操作：

1. DOM元素的幾何屬性變化。

2. DOM樹的結構變化。

例如節點的增減、移動等.

#取得某些屬性。

當取得一些屬性時，瀏覽器為取得正確的值也會觸發重排。這樣就使得瀏覽器的優化失效了。這些屬性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用這些值時應進行快取。

此外，改變元素的一些樣式，調整瀏覽器視窗大小，滾動條出現等等也都會觸發重排。

減少重排次數和重排影響範圍

1、將多次改變樣式屬性的操作合併成一次操作。例如，

JS:
    var changep = document.getElementById(‘changep’);
    changep.style.color = ‘#093′;
    changep.style.background = ‘#eee';
    changep.style.height = ‘200px';
    可以合并为：
CSS:
    p.changep {
        background: #eee;
        color: #093;
        height: 200px;
    }
JS:
    document.getElementById(‘changep’).className = ‘changep';

2、 將需要多次重排的元素，position屬性設為absolute或fixed，這樣此元素就脫離了文件流，它的變化不會影響到其他元素。例如有動畫效果的元素就最好設定為絕對定位。

3、 在記憶體中多次操作節點，完成後再加入文件中去。例如要異步取得表格數據，渲染到頁面。可以先取得資料後在記憶體中建立整個表格的html片段，再一次加入到文件中去，而不是循環加入每一行。

4、 由於display屬性為none的元素不在渲染樹中，對隱藏的元素操作不會引發其他元素的重排。如果要對一個元素進行複雜的操作時，可以先隱藏它，操作完成後再顯示。這樣只在隱藏和顯示時觸發2次重排。

5、 在需要經常取那些引起瀏覽器重排的屬性值時，要緩存到變數

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

S5讓分層螢幕適配

#h5實作多圖片預覽上傳及點選可拖曳控制項

以上是重繪與重排如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！