一、基本概念
当浏览器下载完页面所需元素（html，css层叠样式表，javascript，图片......）之后，会生成两个东西：Dom树和渲染树。Dom树，主要是用来表示页面的Dom结构。渲染树主要是用来表示页面是如何进行渲染的。当某个Dom节点发生变化影响到了元素的几何属性（宽和高等）——比如说修改了边框的宽度，或者是修改了高度，又或者给文章增加了内容导致元素的高度增加等，会引起浏览器进行重新计算元素的几何属性，同样，其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效。并重新构建渲染树，这个过程称为重排。完成重排之后，浏览器会重新绘制受影响的元素，这个过程被称为重绘。
二、什么时候发生重排？
- 添加和或者删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括：外边距，内边距，边框厚度，宽度，高度等属性发生改变）
- 内容发生变化（例如：内容增加引起高度变化或者是图片被另外一个不同尺寸的图片所替换）
- 页面渲染器进行初始化的
- 浏览器窗口尺寸发生改变
三、什么时候发生重绘？
DOM元素的字体颜色、改变visibility、outline、背景色。重绘不会带来DOM元素的重新计算，所以并不一定伴随重排，但是重排一定会引起浏览器的重绘
