浏览器下载完页面中的所有组件HTML标记、JavaScript，CSS，图片之后会解析并生成两个内部数据结构:DomTree和CssTree。
DomTree：
表示页面结构。domTree的形成是对dom节点的解析完毕，不是加载完毕。例如：
CssTree：
表示Dom节点如何显示。也就是渲染的意思。
RenderTree：
DomTree和CssTree拼成RenderTree，到RenderTree完成才绘制页面。
当Dom的变化影响了元素的几何属性，浏览器会重新计算元素的几何属性，其他元素也会受到影响。此时，浏览器会使CssTree
（渲染树）中受到影响的部分失效，并重新构造CssTree。这个过程称为重排。完成重排后，浏览器会重新绘制受到影响的部分到屏幕上，该过程称为重绘。
重排发生的情况：
○添加或删除可见的Dom元素
○元素位置改变
○元素尺寸改变（宽高，内外边距，边框等）
○内容改变。例如改变文本，图片被不同尺寸的图片替代
○页面渲染初始化
○浏览器窗口尺寸改变
○获取布局信息。例如offsetTop，clientTop，scrollTop，getComputedStyle（），currentStyle（）（IE）
重绘发生的情况：
○修改颜色，背景图片
如何减少重排的次数呢？
方法有很多，推荐使用文档碎片解决。