这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战
- 浏览器使用流式布局 ==流式布局==
- 浏览器把HTML解析成DOM，把css解析成CSSOM，DOM和CSSOM合并就产生了Render Tree ==DOM+CSSOM =》Render Tree==
- 有了Render Tree，就知道了所有节点样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上 ==绘制==
- 由于浏览器使用流体布局，对Render Tree的计算通常只需要遍历一次就完成，但table及其内部元素可能需要计算多次==》避免使用table布局《 == 回流必引起重绘，重绘不一定引起回流
回流（Reflow）
当Render Tree中部分或全部元素的 ==尺寸，结构，某些属性发生改变时。 浏览器重新渲染部分或全部文档的过程称为回流
会导致回流的操作
- 页面首次渲染
- 浏览器窗口大小发生变化
- 元素尺寸、位置发生变化
- 元素内容发生变化
- 元素字体大小发生变化
- 添加或删除==可见==的dom元素
- 激活css伪类
- 查询某些属性或调用某些方法
一些常用会导致回流的属性和方法
- clientWidth、clientHeight、clientTop、clientLeft【视野可见的内容】
- offsetWidth、offsetHeight、offsetTop、offsetLeft【clientXXX + 边框和滚动条】
- scrollWidth、scrollheight 、scrollTop、scrollLeft 【所有包括溢出的内容】
- scrollIntoView（）、
scrollIntoViewIfNeeded（）【将当前元素滚动到浏览器窗口可见的区域】 - getComputedStyle（）【获取指定元素的css样式】
- getBoundingClientRect（）【返回元素的大小及其相对于视口的位置】
- scrollTo() 【把内容滚动到指定的位置】
重绘
页面元素样式发生改变，新样式赋予元素并重新绘制
如何避免
css
- 避免使用table布局
- 尽可能在DOM树的最末端改变class
- 避免设置多层内嵌样式
- 将动画效果应用到position属性为absolute或fixed元素上
- 避免使用css表达式【calc()】
javascript
- 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性
- 避免频繁的DOM操作，创建一个documentFragment，在它上面应用所有DOM操作。最后再把它添加到文档中【documentFragment不是真实DOM树的一部分，它的变化不会触发DOM树的重新渲染】
- 为元素先设置display：none，操作结束后再把它显示出来。
- 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来
- 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及其后续元素频繁回流
