从 main frame 的绘制流程来说重绘和回流

回流必将引起重绘，但是重绘不一定会引起回流

1. 浏览器使用流式布局

2. 生成 render tree => 知道所有的节点样式了，然后计算节点在页面上的大小和位置 => 绘制 ui

3. 回流是什么

   render tree 中部份或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染纷纷或全部文档的过程称为回流

   导致回流的操作

   • 页面首次渲染
   • 浏览器窗口大小发生改变
   • 元素尺寸位置发生改变
   • 元素内容发生改变
   • 增删可见 dom 元素
   • 激活伪类
   • 使用某些属性或方法 => 主要是和位置尺寸有关的

4. 重绘事什么

   页面中元素样式的改变并不影响它在文档流中的位置时，浏览器会重新绘制，这就叫重绘

5. 回流的代价更改

   1. 避免 table 布局
   2. 在 DOM 数的最末端改变 class
   3. 避免多层内联样式
   4. 动画效果应用到 absolute 或 fixed 上
   5. 避免 css 表达式
   6. 避免频繁的样式操作
   7. 避免平凡的 dom 操作
   8. 给元素设置 display: none
   9. 复杂动画使用绝对定位