這是一篇自己學(xué)習(xí)用的文章小結(jié)，都摘抄自各大神的文章，會(huì)持續(xù)更新，如果你看到了，并且看不懂，別嘲笑我，畢竟菜鳥的理解方式是旋轉(zhuǎn)跳躍的。哈哈哈~

1、減少CSS的回流和重繪。

當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)。

當(dāng)render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會(huì)影響布局的，比如background-color。則就叫稱為重繪。

回流必將引起重繪，而重繪不一定會(huì)引起回流。當(dāng)頁面布局和幾何屬性改變時(shí)就需要回流。假設(shè)你直接操作body，比如在body最前面插入1個(gè)元素，會(huì)導(dǎo)致整個(gè)render tree回流，這樣代價(jià)當(dāng)然會(huì)比較高，但如果是指body后面插入1個(gè)元素，則不會(huì)影響前面元素的回流。

如何減少回流、重繪 1. 直接改變className (盡可能在 DOM 樹的最末端) 2. 避免設(shè)置多項(xiàng)內(nèi)聯(lián)樣式 3. 應(yīng)用元素的動(dòng)畫，使用 position 屬性的 fixed 值或 absolute 值。不影響其他元素的布局，所它他們只會(huì)導(dǎo)致重新繪制，而不是一個(gè)完整回流。 4. 權(quán)衡平滑和速度 5. 避免使用table布局 6. 避免使用CSS的javaScript表達(dá)式 (僅 IE 瀏覽器)