重绘和回流

当元素的样式发生改变时，浏览器需要触发更新，重新绘制元素。
在这个过程中，有两种类型的操作，即重绘和回流。

@1：重绘(repaint)：
    当元素样式的改变不影响布局时，
    浏览器将使用重绘对元素进行更新，
    此时由于只需要UI层面的重新像素绘制，
    因此损耗较少。

@2：回流(reflow):
    当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。
    此时，浏览器需要重新经过计算，计算后还需要重新页面布局，
    因此是较重的操作，会触发回流的操作：
    · 页面初次渲染
    · 浏览器窗口小大改变
    · 元素尺寸、位置、内容发生改变
    · 元素字体大小改变
    · 添加或删除可见的dom元素
    · 激活css伪类（:hover）
    · 查询某些属性或调用某些方法：
        clientWidth、clientHeight、clientTop、clientLeft
        offsetWidth、offsetHeight、offsetTop、offsetLeft
        scrollWidth、scrollHeight、scrollTop、scrollLeft
        getComputedStyle()
        getBoundingClientRect()
        scrollTo()

· 回流必定触发重绘，重绘不一定触发回流；
· 重绘的开销较小，回流的代价较高。

css:
    · 避免使用table布局；
    · 将动画效果应用到position属性为absolute或fixed的元素上。

js:
    · 避免频繁操作样式，可汇总后统一依次修改；
    · 尽量使用class进行样式修改；
    · 减少dom的增删次数，可使用字符串或documentFragment一次性插入；
    · 极限优化时，修改样式可将其display：none 后修改；
    · 避免多次触发上面提到的会触发回流的方法，尽量用变量存。