关于前端:重绘和回流

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

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