前言
浏览器网页中的重绘和重排是比较重要的一个概念，因为它关系到网页的渲染性能，基本上css相关的面试题都会提到它，所以有必要深入的了解一下。
重排
重排(回流)是指render树中某些元素的尺寸，布局，隐藏状态发生改变时，需要重新的构建，就叫做重排。
重绘
当render树中的一些元素需要更新属性，而这些属性仅仅只影响元素的外观风格（比如：字体颜色，背景样式等），而不改变元素布局尺寸时，就叫做重绘。
两者关系
重绘不一定出现重排，重排一定会触发重绘。因此每个页面至少需要一次回流 + 重绘的操作（初始化时）
对于重绘和重排来说，代价都很高昂的，频繁的重绘和重排，会影响性能和破坏用户体验，让页面显示变得迟缓，所以我们应该尽量的避免频繁的触发它们，尤其是重排。
何时触发重排？
在页面中什么时候会发生重排？
- 页面初始化渲染
- DOM树结构发生变化，添加或删除可见的DOM元素
- 元素位置改变（未脱离文档流的情况下）
- 元素尺寸发生改变（padding，margin， border和宽高）
- 内容发生改变：比如文本改变或图片大小改变引起的元素宽高发生改变
- 浏览器窗口尺寸变化：resize事件时发生
何时触发重绘？
触发重绘主要是修改如下一些属性：
color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius outline-width box-shadow background-size
