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

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

當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(reflow)。

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

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

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