公开课二、浏览器渲染原理之DOM的重绘和回流 ------ 2020-03-07

1、定义：

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

（2）回流(Reflow)：元素的大小或者位置发生了变化（当前页面布局和几何
信息发生变化的时候，触发了重新布局，导致渲染树重新计算布局
和渲染）；
   例如：添加或者删除可见的DOM元素；元素的位置发生变化；元素的
尺寸发生变化；内容发生变化（比如文本变化或图片被另一个不同尺寸的
图片所代替）；页面一开始渲染的时候（这个无法避免）；因为回流是根
据视口大小来计算元素的位置和大小的，所以浏览器的窗口尺寸变化也会
引发回流......

注意：回流一定会触发重，但是重绘不一定回流；
*/

2、基于DOM的重绘和回流之前端性能优化：

/**
（1）放弃传统操作DOM的时代，基于vue/react开始数据影响视图模式；
mvvm / mvc / virtual dom / dom diff

（2）分离读写操作（现代浏览器都有渲染队列的机制）
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’);
分离读写就是指不要讲读取元素的上述的样式等和修改样式掺杂，因为读取
样式操作会立马刷新浏览器的渲染队列，可能会导致多次重绘和回流；

（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’;
这种方式会引发两次重绘和回流，因为读写操作未分离；

这就是缓存布局信息
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 += `
`
}
el.innerHtml = str;

（6）动画效果应用到position属性为absolute或fixed的元素上（脱离文档流
可以尽可能的减少重绘和回流的影响）；

（7）CSS3硬件加速（GPU加速）：
比起考虑如果减少回流重绘，我们更期望的是，根本不会产生回流重绘；
transform / opacity / filters ....
这些属性会触发硬件加速，硬件加速规避回流和重绘；

（8）牺牲平滑度换取速度：

（9）避免table布局和使用css的JavaScript表达式：
*/