css: 浏览器的重排与重绘
工作虐我千百遍，我待工作如初恋-_-!!!
说到浏览器加载文档，那是一个相当复杂的过程了，引用阮老师的blog，大致可以分为5步：
这其中，最耗时的就是4，5步了。
layout和paint合起来就是我们常说的渲染。
所谓的layout，也叫重排，是指元素的几何属性或者是坐标发生了改变，paint叫做重绘，是指元素的外观变化所触发的浏览器行为，如颜色，outline，visibility等。其中，重排一定会发生重绘，而重绘不一定发生重排。而且在页面完成时，至少要发生一次重排和重绘。由此可见，重排相对于重绘来说，性能消耗要大一些。
重排何时发生：
1、添加或者删除可见dom时；
2、元素的位置改变；
3、元素的尺寸改变；
4、元素的内容改变；
5、页面渲染初始化（这个无法避免）；
6、浏览器的窗口尺寸改变；
ps： 当页面出现滚动条的时候，也会触发整个页面的重排。
由此可见，重排和重绘的不断出触发，是导致网页性能低下的根本原因。为了提高网页性能，就要减少触发重排或者重绘的次数哦。
一般可以：
1、合并多次对样式属性的操作。
由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程。
而且一些写的操作会触发浏览器的渲染：
- offsetTop , offsetLeft , offsetWidth , offsetHeight
- scrollTop , scrollLeft , scrollWidth , scrollHeight
- clientTop , clientLeft , clientWidth , clientHeight
- getComputedStyle() ( currentStyle in IE )
最好一次性更新style操作，而且在读操作中尽量不要添加写操作（每次写操作都会触发浏览器的重新渲染）。
或者为元素添加class或者替换class来更新元素的样式。
2、批量的修改dom。
摘自这里。
3、缓存布局信息。
4、使用定位：position设置为absolute或者是fixed，是元素脱离文档流，时期进行部分重排，也是一个不错的方式，一些带有动画效果的元素，最好使用绝对定位来提高性能。
文章参考：
1 http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html