浏览器渲染方式

首先介绍浏览器的组成部分：

1.用户界面（包含窗口、标签页等）
2.浏览器引擎（查询、操作渲染引擎）
3.渲染引擎（解析、渲染请求的内容，包含：网络、JS解释器、UI后端）
4.数据存储层（轻量的数据库，包含storage、cookies、websql、db等）

不同浏览器渲染引擎不同，由浏览器内核决定，常见浏览器以及内核有：

IE: Trident
FirFox: Gecko
Chrome/Safari: WebKit
Opera: Presto

当渲染引擎开始工作时：

1.解析HTML生成DOM Tree
2.解析CSS生成CSS Tree
3.合并DOM树和CSS树生成Render Tree
4.开始reflow，计算DOM节点的绝对位置
5.通知GPU进程进行绘制显示

回流 reflow

当Render树的一部分或者全部因元素的大小/位置信息/布局等改变而需要进行重建的过程，称之为回流
包含：

1.dom节点的添加/删除
2.元素的font-size、width、height、padding、margin、border的大小/宽度变化
3.获取某些属性，包含：
1).offsetWidth、offsetHeight、offsetLeft、offsetTop
2).scrollWidth、scrollHeight、scrollLeft、scrollTop
3).clientWidth、clientHeight、clientLeft、clientTop
4.dom的resize事件触发

重绘 repaint

当元素的属性（如元素的颜色/背景）发生变化而导致GPU需要重新渲染的过程，称之为重绘
回流必定导致重绘，重绘不一定引发回流

如何尽可能避免 reflow

1.当进行dom添加或者删除时，通过变量保存获取的dom节点，使用文档片段DocumentFragment进行内存的累加最后再追加到dom上
2.当进行元素大小/宽度/布局操作时，定义class类将操作集合，通过一次切换class实现
3.对offset/scroll/client等位置属性访问处理时，用变量进行缓存
4.对需要动画操作的元素，尽可能使用position脱离文档流