[TOC] ## **重绘（repaint或redraw）** > 当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。 > **重绘**是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 * 触发重绘的条件：改变元素外观属性。如：color，background-color等。 ## **重排（重构/回流/reflow）** > 当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。 > 每个页面至少需要一次回流，就是在页面第一次加载的时候。 ### **重绘和重排的关系**： > 在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。 > 重排必定会引发重绘，但重绘不一定会引发重排。 ### 触发重排的条件：任何页面布局和几何属性的改变都会触发重排 比如： 1. 　 页面渲染初始化；(无法避免) 2. 　　添加或删除可见的DOM元素； 3. 　　元素位置的改变，或者使用动画； 4. 　　元素尺寸的改变——大小，外边距，边框； 5. 　　浏览器窗口尺寸的变化（resize事件发生时）； 6. 　　填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变； 7. 　　读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　) ### 重绘发生的情况： > 重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。比如，仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局） ### 重绘重排的代价：耗时，导致浏览器卡慢。