「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」
今天的两个主人公：【回流 + 重绘】
回流过程 —— 全部或部分的文档被重新渲染的过程（重新渲染是由元素的尺寸、结构及部分的属性的改变引起的）
重绘过程 —— 元素位置不变，但是是其部分样式（包括颜色、背景色、显示隐藏、透明度等）发生改变，并重新被绘制到页面的过程
回流和重绘都会消耗浏览器等性能，但是回流过程伴随要付出的代价要比重绘更高
引起回流的 6 种操作：
- 第一次渲染页面
- 改变窗口大小
- 改变元素的宽高、位置、内容、字体大小
- 可见元素的新增和删除
- :hover 等伪类的生效状态
- 查询元素上携带的属性和引用的方法：
【clientWidth（宽）、clientHeight（高）、clientTop（顶部边框的宽度）、clientLeft（左侧边框的宽度）、offsetWidth（宽-带有内边距和边框）、offsetHeight（高-带有内边距和边框）、offsetTop（顶部偏移量）、offsetLeft（左侧偏移量）、scrollWidth（宽-被滚动元素）、scrollHeight（高-被滚动元素）、scrollTop（垂直滚动距离）、scrollLeft（水平滚动距离）、scrollIntoView()（滚动父级元素）、scrollIntoViewIfNeeded()（滚动到浏览器可视区域）、getComputedStyle()（获取元素当前在浏览器中渲染出来的样式）、getBoundingClientRect()（元素的大小+元素相对于视口的位置）、scrollTo()（滚动到指定的位置）】
现代浏览器会维护一个包含引起回流和重绘的操作队列，一旦队列中的 任务数量 or 时间间隔 到达边界值，队列会被清空，统一执行，这样就可以一次性完成所有的回流和重绘，减少了浏览器性能的消耗。
其实一部分的回流和重绘都是可以被避免的，比如，在设置 css 样式时，能不使用 table 布局就不使用，元素选择器的层级不要太多，减少 calc 的使用，动画效果尽可能使用到脱离正常流的元素上；在js中尽量减少对元素的操作次数，通过变量缓存会引起回流和重绘的属性，同时也尽量减少使用。
不要小瞧回流和重绘呦，掌握避免回流和重的方法，能够让你的项目在浏览器中的性能得到很大的提高哦。
