关于前端:重绘和回流

当元素的款式产生扭转时，浏览器须要触发更新，从新绘制元素。
在这个过程中，有两种类型的操作，即重绘和回流。

@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 后批改；
    · 防止屡次触发下面提到的会触发回流的办法，尽量用变量存。