打断浏览器优化，强迫触发重排的属性：
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
因为要跟浏览器请求最新的DOM信息，所以浏览器就得赶紧让JS引擎去渲染引擎那里进行一次DOM操作。
8、什么时候会引发重绘？
重排必然引发重绘，这是肯定的。因为浏览器的工作流程就是排版后渲染。重排会回流（回滚流程）到排版阶段，排版后需要重新绘制页面。
单独触发重绘的情况：
除元素尺寸、位置发生改变以外的情况，（比如字体颜色、背景色等发生改变）。（我怀疑文字加粗也会触发重排，但是我没有证据。理论上来说如果在一个固定尺寸的div内加粗文字，应该不会影响后边元素的重排，但可能该div内部的其他相邻文字或元素会发生重排。）
试验gif图：
（想到一个验证只发生重绘的情况，那就是后边也加点元素，如果重排了，后边的元素在控制台的检测下也会闪绿光。）
9、为什么不提倡重排和重绘？既然知道了这个dom操作会触发重排、重绘。那又是为什么要尽量避免重排和重绘呢？
换句话说，重排和重绘的副作用是什么？缺点是什么？
这就要引入CPU和GPU了。
重排会占用CPU，dom元素位置计算会消耗CPU的算力，所以应该尽量减少CPU的占用，使电脑不卡顿。
重绘会占用GPU，渲染页面时会消耗GPU的算力。
GPU的分类：
家用GPU
适合做贴图、特效、光影等效果。不适合画图形。
专业GPU
适合画图形。不适合做贴图、特效、光影等效果。
DOM操作基本就是画图形的，但浏览器中用的就是家用GPU，其画图形耗费的性能是专业GPU的几十倍。所以不提倡频繁用装有家用GPU的浏览器绘制页面。也就是不提倡频繁触发重绘。
10、总结： 为什么操作DOM非常昂贵？ES和 DOM是两种东西，每次连接都需要消耗性能
操作DOM会导致重排和重绘，重排会占用、消耗CPU; 重绘会占用、消耗GPU
11、控制台观察一个页面的重排和重绘现象因为重排必然会引发重绘，所以在浏览器的开发者工具中提供了一个检测重绘的按钮。寻找和打开步骤如下图：