渲染
了解浏览器构建页面过程有助于得到更好得页面效果。
页面
当请求响应得到数据时。浏览器一般做如下处理工作：
- 解析 html 文件，html 元素被解析构建 DOM 树
- 解析 css 元素，构建 CSSOM 树
- 把 DOM 树和 CSSOM 树合在一起生成渲染树（Render Tree）
- 根据渲染树布局
- 调用 GPU 绘制图层，显示在屏幕上
构建过程中，遇到script标签时，会暂停构建，所以在对首屏渲染有速度要求得项目中，尽量减少首批加载 js。
渲染树会结和 DOM 树和 CSSOM 树，也就是说会结合 html 和 css 来渲染，这个过程中浏览器会去遍历整颗渲染数树，通过 css 计算元素位置，再进行绘制，继而显示。这个过程中，生成或改变 DOM 元素布局等就是回流，计算元素几何信息（外观）等就是重绘。从这里也可以看出二者得关系：回流一定会触发重绘，而重绘不一定会回流。
回流
常见触发回流操作：
- 页面首次渲染
- 改变 DOM 元素本身及其相关信息
- 改变浏览器窗口尺寸
- css 伪类
- dom 操作方法
重绘
常见触发重绘操作：
- 修改 css 属性 如：color 等
- dom 操作修改
回流得代价是大于重绘。频繁得回流会导致界面迟缓卡顿，用户体验不好。为此应该尽量减少回流和重绘。
- 尽量不适应
table布局，table很容易引起回流 - 修改样式应该统一修改
- 批量做 dom 操作
- 使用 css3 属性如：transform，opacity 等代替 对 top 等属性改变得操作
- 不隔级操作