1、定義：

/**
（1）重繪(Repaint)：元素樣式的改變（但寬高、大小、位置等不變）;
    例如：outline/visbility/color/background-color等；

（2）回流(Reflow)：元素的大小或者位置發(fā)生了變化（當(dāng)前頁面布局和幾何
信息發(fā)生變化的時候，觸發(fā)了重新布局，導(dǎo)致渲染樹重新計算布局
和渲染）；
   例如：添加或者刪除可見的DOM元素；元素的位置發(fā)生變化；元素的
尺寸發(fā)生變化；內(nèi)容發(fā)生變化（比如文本變化或圖片被另一個不同尺寸的
圖片所代替）；頁面一開始渲染的時候（這個無法避免）；因為回流是根
據(jù)視口大小來計算元素的位置和大小的，所以瀏覽器的窗口尺寸變化也會
引發(fā)回流......

注意：回流一定會觸發(fā)重，但是重繪不一定回流；
*/

2、基于DOM的重繪和回流之前端性能優(yōu)化：

/**
（1）放棄傳統(tǒng)操作DOM的時代，基于vue/react開始數(shù)據(jù)影響視圖模式；
mvvm / mvc / virtual dom / dom diff

（2）分離讀寫操作（現(xiàn)代瀏覽器都有渲染隊列的機(jī)制）
offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、
clientLeft、clientWidth、clientHeight、scrollTop、scrollLeft、
scrollWidth、scrollHeight、getComputedStyle、currentStyle...
都會刷新渲染隊列；
el.style.width = ‘10px’;
el.style.height= ‘10px’;
el.style.margin= ‘10px’;
console.log(‘el.clientWidth’);
分離讀寫就是指不要講讀取元素的上述的樣式等和修改樣式摻雜，因為讀取
樣式操作會立馬刷新瀏覽器的渲染隊列，可能會導(dǎo)致多次重繪和回流；

（3）樣式集中改變（批量處理）：
修改樣式時，盡可能做到將樣式集中在一起修改：
el.style.cssText = ‘width:10px;height:20px’;(這種方式基本不用)；
box.className = ‘changeClass’;

（4）緩存布局信息：
el.style.width = el.clientWidth + 10 + ‘px’;
el.style.height= el.clientHeight + 10 + ‘px’;
這種方式會引發(fā)兩次重繪和回流，因為讀寫操作未分離；

這就是緩存布局信息
var a = el.clientWidth;
var b = el.clientHeight;
el.style.width = a + 10 + ‘px’;
el.style.height= b + 10 + ‘px’;

（5）元素批量修改：
var str = ``;
for (let i = 0; i < 5; i++) {
   str += `<li></li>`
}
el.innerHtml = str;

（6）動畫效果應(yīng)用到position屬性為absolute或fixed的元素上（脫離文檔流
可以盡可能的減少重繪和回流的影響）；

（7）CSS3硬件加速（GPU加速）：
比起考慮如果減少回流重繪，我們更期望的是，根本不會產(chǎn)生回流重繪；
transform / opacity / filters ....
這些屬性會觸發(fā)硬件加速，硬件加速規(guī)避回流和重繪；

（8）犧牲平滑度換取速度：

（9）避免table布局和使用css的JavaScript表達(dá)式：
*/