摘要：寫(xiě)在金三銀四之際。一個(gè)節(jié)點(diǎn)觸發(fā)了，瀏覽器會(huì)檢查中其他所有節(jié)點(diǎn)的顯示方式一個(gè)節(jié)點(diǎn)觸發(fā)了會(huì)導(dǎo)致它的祖先節(jié)點(diǎn)，后代節(jié)點(diǎn)以及在它之后的節(jié)點(diǎn)全部。對(duì)性能的影響大于。解決方式控制我們無(wú)力去改變，對(duì)性能損害的程度，我們能做的只有減少它們發(fā)生的次數(shù)。

寫(xiě)在金三銀四之際。
  因?yàn)榉N種原因想要謀求新的發(fā)展，不得已翻起了塵封已久的高程書(shū)；寫(xiě)起了各種經(jīng)典CSS布局；回顧起記憶略顯模糊的幾個(gè)項(xiàng)目。感慨著太多太多的知識(shí)點(diǎn)自己都不夠深入甚至缺乏認(rèn)識(shí)，卻又不能急功近利，囫圇吞棗。
牢騷發(fā)完了，苦水吐完了，進(jìn)入正題。

回流(reflow)，重繪(repaint)都是瀏覽器更新頁(yè)面視圖的方式，區(qū)別在于：

對(duì)于元素視覺(jué)上的改變(如改變outline，background-color，visibility等)會(huì)觸發(fā)repaint；

對(duì)于元素布局上的改變(增刪節(jié)點(diǎn)，觸發(fā)resize事件，修改style屬性等)會(huì)觸發(fā)reflow；

repaint和reflow是DOM操作影響性能的主要原因。一個(gè)節(jié)點(diǎn)觸發(fā)了repaint，瀏覽器會(huì)檢查DOM Tree中其他所有節(jié)點(diǎn)的顯示方式；一個(gè)節(jié)點(diǎn)觸發(fā)了reflow會(huì)導(dǎo)致它的祖先節(jié)點(diǎn)，后代節(jié)點(diǎn)以及在它之后的節(jié)點(diǎn)全部reflow。reflow對(duì)性能的影響大于repaint。

一個(gè)前端開(kāi)發(fā)人員對(duì)這些概念一無(wú)所知是一件很恐怖的事情，想想他在寫(xiě)代碼的時(shí)候不知道哪些操作會(huì)對(duì)性能造成影響，可能會(huì)出現(xiàn)這種情況：

var toChange = document.getElementById("target");
toChange.style.background = "#333";
toChange.style.color = "#fff";
toChange.style.border = "1px solid #00f";

這無(wú)疑是可以?xún)?yōu)化的，下面我們來(lái)看看如何減少reflow，repaint的次數(shù)。

我們無(wú)力去改變r(jià)epaint，reflow對(duì)性能損害的程度，我們能做的只有減少它們發(fā)生的次數(shù)。

脫離

動(dòng)畫(huà)時(shí)時(shí)刻刻都在操作著DOM，為了避免動(dòng)畫(huà)使得其他節(jié)點(diǎn)也在時(shí)時(shí)刻刻reflow，可以將動(dòng)畫(huà)所在的元素設(shè)為position: fixed或者position: absolute，使其脫離文檔流，這個(gè)元素reflow時(shí)不會(huì)影響其他節(jié)點(diǎn)的布局，雖然還是會(huì)產(chǎn)生repaint，但相對(duì)來(lái)說(shuō)得到了優(yōu)化。

合并

能一次完成的操作就不要分兩次。比如說(shuō)添加多個(gè)節(jié)點(diǎn)時(shí)使用DocumentFragment：

var docFragm = document.createDocumentFragment();
var elem, contents;
for(var i = 0; i < textlist.length; i++) {
    elem = document.createElement("p");
    contents = document.createTextNode(textlist[i]);
    elem.appendChild(contents);
    docFragm.appendChild(elem);
}
document.body.appendChild(docFragm);

再比如像上面style那個(gè)例子，如果已知變化后樣式，將這些樣式寫(xiě)成一個(gè)class，再去改變?cè)氐腸lass或者直接修改cssText屬性，這兩種方式都將多次reflow縮減為一次。

復(fù)制

對(duì)復(fù)制品進(jìn)行操作也是一種解決方案，比如需要對(duì)已有節(jié)點(diǎn)進(jìn)行DOM操作使用cloneNode()：

var original = document.getElementById("container");
var cloned = original.cloneNode(true);
cloned.setAttribute("width", "50%");
var elem, contents;
for(var i = 0; i < textlist.length; i++) {
    elem = document.createElement("p");
    contents = document.createTextNode(textlist[i]);
    elem.appendChild(contents);
    cloned.appendChild(elem);
}
original.parentNode.replaceChild(cloned, original);

使用cloneNode()要注意的是，唯一的參數(shù)代表是否進(jìn)行深復(fù)制。另外cloneNode()無(wú)法復(fù)制事件監(jiān)聽(tīng)函數(shù)，以及表單控件的value。
又比如獲取offsetWidth，getComputedStyle()這些取值操作每次都會(huì)觸發(fā)reflow，在第一次調(diào)用時(shí)存起來(lái)也是復(fù)制的一種。

舍棄

在做好了其他優(yōu)化措施的前提下想要進(jìn)一步提升性能有時(shí)需要舍棄，比如減小動(dòng)畫(huà)幀數(shù)，即增大動(dòng)畫(huà)函數(shù)執(zhí)行的間隔，這樣動(dòng)畫(huà)流暢程度會(huì)降低，但整個(gè)應(yīng)用的性能得到了提升。

其他

減少table的使用，table造成的reflow是其他塊級(jí)元素的三倍；

盡量避免改變DOM Tree中高層節(jié)點(diǎn)的class，減小reflow的影響；

利用各種選擇器規(guī)則減少待操作節(jié)點(diǎn)的數(shù)量；

最后，我認(rèn)為理解reflow和repaint的原理及觸發(fā)情況是十分重要的，在寫(xiě)每一行代碼時(shí)都應(yīng)該明確它對(duì)性能的影響。

參考文章：
REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?

Effecitve JavaScript