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

2 http://mengyujing.com/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E9%87%8D%E7%BB%98%E4%B8%8E%E9%87%8D%E6%8E%92/