javascript 減少回流

?

減少回流（REFLOWS）

　　當瀏覽器重新渲染文檔中的元素時需要?重新計算它們的位置和幾何形狀，我們稱之為回流。回流會阻塞用戶在瀏覽器中的操作，因此理解提升回流時間是非常有幫助的。

回流時間圖表

　　你應該批量地觸發回流或重繪，但是要節制地使用這些方法。盡量不處理DOM也很重要。可以使用DocumentFragment，一個輕量級的文檔對象。你可以把它作為一種方法來提取文檔樹的一部分，或創建一個新的文檔“片段”。與其不斷地添加DOM節點，不如使用文檔片段后只執行一次DOM插入操作，以避免過多的回流。

　　例如，我們寫一個函數給一個元素添加20個div。如果只是簡單地每次append一個div到元素中，這會觸發20次回流。

function addDivs(element) {var div;for (var i = 0; i < 20; i ++) {div = document.createElement('div');div.innerHTML = 'Heya!';element.appendChild(div);}
}

　　要解決這個問題，可以使用DocumentFragment來代替，我們可以每次添加一個新的div到里面。完成后將DocumentFragment添加到DOM中只會觸發一次回流。

function addDivs(element) {var div;// Creates a new empty DocumentFragment.var fragment = document.createDocumentFragment();for (var i = 0; i < 20; i ++) {div = document.createElement('a');div.innerHTML = 'Heya!';fragment.appendChild(div);}element.appendChild(fragment);
}

?