关于前端:重绘和回流

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

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