一、HTML渲染页面过程
- 浏览器获取到
html代码解析成DOM树：html中每一个tag都是DOM中的一个子节点，根节点就是document对象。DOM树里包含了所有的html标签，包括display:none隐藏的标签、js动态添加的元素等 - 浏览器整理样式：首先解析所有样式（用户自定义的和用户代理的），解析成样式结构体，再解析的过程中会去掉浏览器不能识别的样式，比如
ie去掉-moz开头的样式，firefox去掉-ms开头的样式等 DOM树 + 样式结构体 组合成render树：render树类似DOM树，但区别很大；render树可以识别样式，每一个node中都有自己的style，而且render树不包含隐藏的节点比如display:none的节点、head节点，因为这些节点不会呈现也不影响其他node的呈现，所以不被包含；但是visibility:hidden会被包含。根据css2的标准，render树中的每一个节点都被成为Box，理解页面元素为一个具有填充、边距、边框和位置的盒子Painting：浏览器根据render树绘制页面
二、回流和重绘
回流：当render树中因为元素的大小、定位布局、隐藏等发生改变而需要重新构建的，称为回流reflow；每个页面至少需要回流一次，就是在页面第一次加载的时候，在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流之后，再重新绘制
重绘：当render树中因为元素的一些属性发生更改比如**color、background-color等只影响元素的外观风格而不是影响布局时**需要重新绘制，称为重绘
回流必会引起重绘，重绘不一定会引起回流
引起回流
- 添加或者删除可见的
DOM元素 - 元素位置改变
- 元素尺寸改变-边距、填充、边框、宽度、高度
- 内容改变-比如文本的改变或者图片大小的改变引起计算值宽高度的变化
- 页面渲染初始化
- 浏览器窗口大小的改变-比如
resize事件发生
引起重绘
- 元素背景颜色改变
- 元素字体颜色改变
- 元素边框颜色等改变
三、优化（减少回流和重绘）
- 合并多次
DOM和样式修改 - 尽量不要使用
table布局：因为某一元素的变化可能使整个table回流 - 将需要多次重排回流的元素设置
position为absoluted或者fixed，因为脱离了文档流，变化不会引发回流 - 动画的实现也最好使用
absoluted或者fixed定位