重流和重绘

尽量不要变动高层的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);