影响页面渲染速度的因素主要有：reflow（回流）和repaint（重绘）
reflow（回流）
某个部分发生了变化影响了布局，需要倒回去重新渲染，该过程就叫做reflow（回流） reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的展开、折叠（实质上是元素的显示与隐藏）等，都会引起浏览器的回流。鼠标滑过、点击。。。只要这些为引起页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会回流哪一部分代码，他们都会彼此影响着 。
repaint（重绘）
如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性、将只会引起浏览器的repaint（重绘） 冲毁的速度明显快鱼reflow(在IE下，回流要比重绘更缓慢）
尽量避免reflow(回流)
reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。
在哪些情况下会导致reflow发生：
- 改变窗囗大小
- 改变文字大小
- 添加/删除样式表
- 内容的改变，如用户在输入框中敲字
- 激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
- 操作class属性
- 脚本操作DOM
- 计算offsetWidth和offsetHeight
- 设置style属性
reflow是不可避免的，只能将reflow对性能的影响减到最小。
- 尽可能限制reflow的影响范围。需要改变元素的样式，不要通过父级元素影响子元素。最好直接加在子元素上。
- 通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。
- 实现元素的动画，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局。
- 权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
- 不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
- 很多情况下都会触发reflow，如果css里有expression，每次都会重新计算一遍。
- 减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
- 避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。
