浏览器编译主要有5个步骤:
graph TD
http/https请求页面 --> 把请求回来的html构建dom树--> 构建css树 --> 把css树和dom树构建渲染树--> 渲染并展示到页面
重绘回流：
重绘和回流是上述浏览器编译过程的第四和第五步。
回流
是在第四步。如当页面上的 页面首次渲染初始化 结构发生变化, 元素的显示和隐藏, 元素宽高改变, 浏览器的窗口大小发生改变等
重绘
发生在第五个步骤。 当页面上的元素的样式发生改变，主要是背景颜色，文字颜色，边框颜色发生改变时会触发。
优化
回流的性能开销远远大于重绘。 重绘和回流都比较耗性能，开发的时候尽量减少重绘和回流。
比如：
-
使用position:absolute.fixed 实现分层，减少影响范围；
-
样式集中改变；
-
离线改变dom:在要操作dom之前，通过display:none隐藏，操作完成再play:block显示出来，因为不可见的元素不会触发回流和重绘；
-
使用动画，应用GPU换取速度。
