重绘和回流

    当一个元素的外观的可见性visibility发生改变的时候，重绘(repaint)也随之发生，但是不影响布局。类似的包括：outline, visibility, or background color。根据Opera浏览器，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。而回流更是性能的关键因为其变化涉及到部分页面（或是整个页面）的布局。一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流。

## 那什么会导致回流呢？ ##

    1 调整窗口大小
    2 改变字体
    3 增加或者移除样式表
    4 内容变化，比如用户在input框中输入文字
    5 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)
    6 操作 class 属性
    7 脚本操作 DOM
    8 计算 offsetWidth 和 offsetHeight 属性
    8 设置 style 属性的值

## 如何避免回流或将它们对性能的影响降到最低？ ##

    1 如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树的最末端改变class)
    2 避免设置多项内联样式，因为每个都会造成回流，样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一个reflow。
    3 动画效果应用到position属性为absolute或fixed的元素上。它们不影响其他元素的布局，他们只会导致重新绘制，而不是一个完整回流。这样消耗会更低。
    4 权衡平滑和速度，可能想每次1像素移动一个动画，但是如果此动画及随后的回流使用了100%的CPU，动画就会看上去是跳动的，因为浏览器正在与更新回流做斗争。动画元素每次移动3像素可能在非常快的机器上看起来平滑度低了，但它不会导致CPU在较慢的机器和移动设备中抖动。
    5 避免使用table布局，是因为可能会因为表格最后一个单元格的内容过宽而导致纵列大小完全改变，即使是一些小的变化也将导致表格(table)中的所有其他节点回流。
    6 避免使用CSS的JavaScript表达式