回流和重绘

回流和重绘

1.html加载时发生了什么

1. 在页面加载时，浏览器把获取到的html代码解析成一个dom树，dom树里包含了所有html标签，包括display:none隐藏，还有用js动态添加的元素等
2. 浏览器把所有样式（用户定义的css和用户代理）解析成样式结构体
3. dom tree和样式结构体组合后构建render tree,render tree类似与dom tree,但区别很大，因为render tree能识别样式，render tree中每个node都有自己的style,而且render tree不包含隐藏的节点（比如display:none节点，还有head节点），因为这些节点不会用于呈现。而且不会影响呈现的所以就不会包含到render tree中。我自己简单的理解就是dom tree和我们写的css结合在一起之后，渲染出了render tree.

2.当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render
tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

1. 添加或删除可见的dom元素
2. 元素的位置发生改变
3. 元素的尺寸发生改变（包括外边距，内边框，边框大小，高度和宽度等）
4. 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所取代
5. 页面一开始渲染的时候（这时候肯定避免不了）
6. 浏览器窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

重绘：当render
tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。这就称为重绘。

区别：回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流 当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变