?

減少回流（REFLOWS）

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

回流時間圖表

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

　　例如，我們寫一個函數(shù)給一個元素添加20個div。如果只是簡單地每次append一個div到元素中，這會觸發(fā)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中只會觸發(fā)一次回流。

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); }

?

轉(zhuǎn)載于:https://www.cnblogs.com/zys8119/p/5600302.html

總結(jié)

以上是生活随笔為你收集整理的javascript 减少回流的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。