前端性能优化——重排重绘

重排和重绘

重排：节点信息计算，即根据渲染树计算每个节点的几何信息（大小及位置）。
重绘：渲染绘制，即根据计算好的信息绘制整个页面，渲染出最终的页面。

理论上，每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排和重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。重排负责元素的几何属性更新，重绘负责元素的样式更新。
重排一定会引起重绘，而重绘不一定会引起重排。

下面情况会导致重排：
（1）页面首次渲染（所以渲染页面至少会有一次重排和重绘)
（2）改变字体大小或数量
（3）元素内容变化（文字数量或图片大小等等）
（4）激活伪类，如:hover
（5）操作class属性
（6）添加或者删除可见的DOM元素。
（7）查询某些属性或调用某些方法（查询offsetWidth或offsetHeight等）
（8）设置style属性
（9）改变浏览器窗口大小。

记忆：主要是元素大小和位置的改变以及查询某些属性

重绘：
例如只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器重绘。所以重绘的速度明显快于重排。

为什么要减少重排和重绘？

（1）整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）重排和重绘会大大影响web性能。
（2）重绘和重排的开销是非常昂贵的，如果我们不停的在改变页面的布局，就会造成浏览器耗费大量的开销在进行页面的计算，这样的话，我们页面在用户使用起来，就会出现明显的卡顿。

减少重排和重绘的方法

（1）减少使用以下几何属性

offsetTop, offsetLeft，...
scrollTop, scrollLeft, ...
clientTop, clientLeft, ...

原理：
大多数浏览器其实自带优化： 通过队列化修改并批量执行来优化重排过程。即先将导致重排和重绘的操作先压入到一个队列中，达到一定数量后再一起处理，达到减少重排和重绘的目的。而这些属性，都是需要实时回馈给用户的几何属性或者是布局属性，当然不能再依靠浏览器的优化，因此浏览器不得不立即执行渲染队列中的“待处理变化”，触发重排返回正确的值。

2）减少DOM操作

var el = document.querySelector('.el'