CSS中的重绘和重排(回流)是什么？(面试常问)

面试中问到的重排和重绘是什么？

其实在我们学习css的时候已经学过重绘和重排是什么，也经常的使用，只是那时候不知道他们会拥有这麽高级的名称。下面我们一起来看看重绘和重排(回流)是啥玩意。我最近找实习工作给问到了，那时候忘记了，后面回到学校查资料简单总结了一下

注意：那些单词要去背背，不然那个题目写的重绘和重排都是英文单词你看不懂就尴尬了

1、重绘(repaint或redraw)

当盒子的位置大小以及其它属性，如：color 、background-color 等都确定下来了，浏览器会根据我们设置对应的样式渲染出来，页面从头开始重绘一遍并且渲染出来。

重绘我们可以这样理解：

重绘是指一个元素发生外观上的改变除非浏览器的行为，浏览器根据元素的新属性重新绘制，使得元素拥有最新的设置的元素，替换之前设置的外观。

1-1触发重绘条件：

改变元素的外观属性，比如：background-color 、color等

2、重排(回流/reflow)

当渲染树中一部分或全部，因为元素的规模尺寸，布局，隐藏等改变需要重新构建，我们就叫回流(重构)，每一个页面在加载第一次的时候就会触发一次回流。

2-1触发重排的条件：

页面渲染初始化、添加或删除可见的DOM元素、元素位置改变或者使用动画、元素的尺寸改变[boder、margin等]、读取[height、width、top]等

3、重绘和重排的关系：

重绘不一定触发重排，重排一定触发重绘