【浏览器】重排重绘

有个概念叫做关键渲染路径（Critical Rendering Path），他是这么定义的浏览器将html，css，JavaScript代码转换成屏幕上能看到的像素，这期间经历的一系列步骤就是关键渲染路径。大概的流程就是构建对象模型，构建渲染树，布局渲染。浏览器渲染过程是这样的，解析html生成dom树，解析css生成cssom规则树，将dom树和cssom规则树合并在一起生成渲染树。遍历渲染树开始布局，计算每个节点的位置大小信息，将渲染树的每个节点绘制到屏幕上。

dom元素的位置和大小发生改变时，浏览器会重新生成渲染树，这个过程叫重排，重新生成渲染树以后，要将渲染树的每个节点绘制到屏幕上，这个过程叫重绘，重排一定会导致重绘，重绘不一定会重排。导致重排的操作有很多：删除或者增加可见dom元素，元素的尺寸大小发生改变，内容发生改变，浏览器窗口大小发生改变。

        呢么问题来了，如何减少重排重绘？用JavaScript修改样式时，最好不要直接写样式，用class来改变样式，如果要对dom元素执行一系列操作，可以将dom元素脱离文档流，修改玩后，在将他带回文档，推荐使用隐藏元素，或者文档碎片，都能实现这个方案。