回流与重绘以及重排的理解

// 回流与重绘
// 浏览器渲染html的过程
// 浏览器获取到html代码解析成dom树,html代码中的每一个标签都是dom树的一个节点,根节点就是document对象
// dom树里面包含了所有的html标签,包括设置了display:none的标签,还有就是js添加的标签,
// 浏览器会解析样式,解析出一个样式的结构体,和我们dom树一起结合形成了一个渲染树render tree,
// 渲染树有一个特点就是不包含移除隐藏的节点,比如说用了display:none的节点是不包含在渲染树之内的,
// 但是比如说visibility:hidden,opacity:0这类的样式去隐藏的节点是包含在渲染树以内的

// 一.回流的过程
// 当渲染树的一部分或者全部规模尺寸,布局,占位隐藏这些发生改变的时候,他就需要重新构建渲染树.这就是回流
// 二:重绘的过程
// 重绘:当渲染树中的一些元素需要更新样式属性,而这些属性只是影响元素的外观.风格.而不影响布局，这种就称之为重绘.比如你改变了样式
// 这让我们明确一点回流一定会引起重绘,但是重绘不一定会引起回流.
// 重排的释义:重排是指元素的位置或尺寸发生了变化，浏览器需要重新计算渲染树，而新的渲染树建立后，浏览器会重新绘制受影响的元素。
// 一般:dom元素的增删改查会导致回流
// 一般:改变dom的样式会导致重绘