重流和重繪

儘可能不要變更高層的DOM元素，而以底層DOM元素的變更代替；再好比，重繪table佈局和flex佈局，開銷都會比較大。

var foo = document.getElementById('foobar'); foo.style.color = 'blue'; foo.style.marginTop = '30px'; 

上面的代碼只會致使一次重繪，由於瀏覽器會累積DOM變更，而後一次性執行。

　　

　　提升性能：

• 讀取DOM或者寫入DOM，儘可能寫在一塊兒，不要混雜
• 緩存DOM信息
• 不要一項一項地改變樣式，而是使用CSS class一次性改變樣式
• 使用document fragment操做DOM
• 動畫時使用absolute定位或fixed定位，這樣能夠減小對其餘元素的影響
• 只在必要時才顯示元素
• 使用window.requestAnimationFrame()，由於它能夠把代碼推遲到下一次重流時執行，而不是當即要求頁面重流
• 使用虛擬DOM（virtual DOM）庫

// 重繪代價高 function doubleHeight(element) { var currentHeight = element.clientHeight; element.style.height = (currentHeight * 2) + 'px'; } all_my_elements.forEach(doubleHeight); // 重繪代價低 function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + 'px'; }); } all_my_elements.forEach(doubleHeight);