浏览器的渲染过程
浏览器渲染主要有以下步骤：
- 解析HTML，生成DOM树，解析CSS，生成CSSOM树
- 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
- 根据渲染树来布局，以计算每个节点的几何信息。
- Display:将像素发送给GPU，展示在页面上。
回流与重绘
当 Render Tree中部分或全部, 因元素的尺寸、布局、隐藏等改变而需要重新构建，浏览器重新渲染的过程称为 回流。
会导致回流的操作：
- 页面首次渲染。
- 浏览器窗口大小发生改变。
- 元素尺寸或者位置发生改变。
- 元素内容变化(文字数量或者图片大小发生改变)。
- 元素字体大小的改变。
- 添加或者删除可见的 DOM 元素。
- 激活 CSS 伪类
- 查询某些属性或调用某些方法。
当页面中元素样式的改变并不影响b布局时（color、background-color等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
回流必将引起重绘，重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
有时仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流，影响性能。 所以浏览器会对频繁的回流或重绘操作进行优化：
浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。
