在理解回流与重绘之前,我们需要知道网页呈现在我们面前之前都发生了什么,
在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了当前HTML里所有的信息,例如标签,例如样式,例如JS逻辑。
浏览器会把所有样式(用户定义的CSS)解析成浏览器能识别并呈现出来的结构样式体,而当DOM树和结构样式体组合后就会构建成render树,这个render树类似于DOM树,但有一定的区别,
前者是能够识别HTML中的标签与内容,而后者能识别HTML中的CSS样式,render tree中每个节点都有自己的样式,而且render树不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render树中。
回到主题
什么是回流?
简单粗暴的来讲,就是HTML页面的结构出现了变化,需要重新加载,这就是回流。例如增加或减少一个div标签,那么页面就会刷新一次,因为浏览器解析DOM树发现有了不一样的的地方,他就会重新再来一遍,这个时候,就叫做回流。
每个页面至少会发生一次回流,就是在页面第一次加载的时候,因为浏览器解析了生成DOM树与render树,两相结合,形成了我们所看到的页面。
什么是重绘?
这就更简单了,当render树中的样式发生了变化,而这些变化只是简单影响了了HTML中元素的表现,风格而不会影响到布局结构时,比如background-color背景色时,则被称为重绘。
区别?
既然两者都会发生变动,那么他们之间有区别吗?
有区别,而且还很大。
回流必将出现重绘,但重绘不一定会引起回流,
一个简单的例子,当你添加或删除了DOM元素,改变了元素的位置,元素的宽高,边框,外边距,内边距与内容时,就会引起重绘,
与之相对的,当你仅仅只是添加了一个类名样式时(不包括display:none之类的会改变结构的样式!),则只会引起重绘。