什麼是重排和重繪

dom樹

dom樹，主要是用來表示頁面的dom結構。

渲染樹

渲染樹主要是用來表示頁面是如何進行渲染的。

dom樹中，除了隱藏節點，其餘的節點需要與渲染樹中的至少存在乙個對應的節點。渲染樹中的每乙個節點，被稱為幀或者是盒子。盒子具有內邊距，外邊距，邊框，位置等屬性。一旦渲染樹構建完成之後，瀏覽器就開始進行繪製頁面。

當dom的變化影響到了元素的幾何屬性（寬和高等）——比如說修改了邊框的寬度，或者是修改了高度，又或者給文章增加了內容導致元素的高度增加等，會引起瀏覽器進行重新計算元素的幾何屬性，同樣，其他元素的幾何屬性和位置也會因此受到影響。瀏覽器會使渲染樹中受到影響的部分失效。並重新構建渲染樹，這個過程稱為重排。完成重排之後，瀏覽器會重新繪製受影響的元素，這個過程被稱為重繪。

並不是所有的dom變化會影響元素的幾何屬性，例如，改變背景色，不會影響元素的幾何屬性，因此，這個時候是不會發生重排，僅僅會發生重繪，因為，元素的不布局沒有發生變化。重排和重繪的代價都是昂貴的操作，他們會導致瀏覽器的ui執行緒卡頓，因此盡可能避免這類操作。

下面就是整個的基本流程圖：

正如前面所說的，當頁面的布局和幾何屬性發生改變的時候，就需要進行重排。以下的情況也同樣會發生重排：

根據改變的內容，渲染樹中相對應的部分也需要進行計算。有些改變會觸發整個頁面的重排：例如，當滾動條出現的時候。

由於每次的重排都會產生計算消耗，大多數瀏覽器通過佇列化修改並批量來優化重排過程。但是，有些時候我們會強制進行重新整理佇列，並要求計畫任務立刻執行。這些方法包括以下方法：

以上的屬性和方法需要返回最新的布局資訊，因此瀏覽器不得不執行渲染佇列中的「待處理變化」並觸發重排，以返回正確的值。因此，修改樣式的過程中，最好避免使用以上的屬性或者是方法。

前面說到，重排和重繪的代價其實是非常昂貴的，因此，為了提高程式的響應速度，我們在平時的開發過程中應該儘量減少該操作的發生。為了減少重排或者是重繪的發生次數，我們可以有以下幾點的操作。

合併對dom的多次修改

var el = document.getelementbyid('mydiv');
el.style.width = '300px';
el.style.height = '400px';
el.style.margin = '15px';

在以上打**中，我們能夠看到對元素的幾何屬性發生了三次的修改，因此，上面的**中會觸發三次的重排和重繪。因此，我們可以將對元素的三次修改合併成一次修改，這樣，就智慧型觸發一次重排重繪。修改後的**如下：

var el = document.getelementbyid('mydiv');
el.style.csstext = 'width:30px;height:400px;margin:15px';

批量修改dom

當我們需要對dom進行一系列操作時，可以通過以下步驟來減少重繪和重排：

該過程會觸發兩次重排，第一步和第三步，如果忽略這兩個步驟，那麼第二步的修改就會觸發多次的重排。這裡要說的是，怎麼才能使元素脫離文件流？主要的又以下幾個方法：

隱藏元素，應用修改，重新顯示

使用文件片段，在當前dom之外構建乙個子樹，再把拷貝會文件

將原始元素拷貝到乙個脫離文件的節點中，修改副本，完成後再替換原始元素

使用虛擬dom

接下來，就演示一下有關如何脫離文件流，來進行批量修改dom的。我們先來構建乙個場景：

上面是乙個列表，假設我們要向上述列表中新增以下的資料：

var data = [,]

如果按照我們習慣性的思維，我們會這麼去寫：

var a;

var li;

for (var i = 0; i

這樣話就只用渲染兩次，這就是上面所說的隱藏元素，應用修改，重新顯示；

接下來實現一下後面的兩種（除虛擬dom之外的方法）。

// 建立子樹的方法
// 將原始元素拷貝到乙個脫離文件的節點中
var old = document.getelementbyid('mylist');
var clone = old.clonenode();
old.parentnode.replacechild(clone, old);

針對於以上的方法，這邊推薦使用構建子樹的方法是建立子樹的方法，因為他們所產生的的dom遍歷和重排次數最少，唯一潛在的問題就是文件片段未被充分利用。

還有一種就是虛擬dom，有關虛擬dom這個，其實可以參考vue和react等比較現代的前端開發的內容。

什麼是重排和重繪

重繪和重排

重排和重繪

重繪和重排

相關推薦