在浏览器渲染页面的过程中，页面中的代码进行渲染时，已经使浏览器不堪重负了，如果当用户使用时，替换一个背景颜色，或者更换一个样式，那么我们的浏览器又需要重新加载代码，而在这个过程中，浏览器又一次的受到了压力，日复一日说不定哪天就崩掉了。 而主要影响页面渲染速度的为：reflow和repaint
1.reflow(回流)
为什么页面加载会慢，因为浏览器需要花时间、花精力去渲染，尤其是当它发现某个部分发生变化时影响到布局，就需要倒回去重新渲染，这个’倒回去渲染的过程‘就叫做reflow(回流)
2.repaint(重绘)
如果变化的元素，只是更改了元素的背景色，文字颜色、边框颜色等等不影响它周围或者内部布局的属性，那这种行为只会引起repaint(重绘)，所以repaint的速度明显比reflow快
3.尽量减少reflow
1.reflow是导致DOM脚本执行力较低的关键因素之一，页面上任何一个结点触发reflow，都会导致它全部节点重新渲染。以下情况会导致reflow发生：
1.改变窗口大小
2.改变文字大小
3.添加/删除样式
4.内容的改变，如用户在输入框进行输入文字
5.激活伪类，如hover，active等
6.操作class属性
7.脚本操作DOM
8.计算offsetWidth或者offsetHeight
9.设置style属性
2.reflow是不可避免的，只能将reflow对性能的影响见到最小：
- 尽可能限制reflow的影响范围，需要改变元素的样式，不要通过父级元素影响子元素，最好直接加在子元素上。
- 通过设置style属性改变节点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式进行改变。
3.该如何好的避免reflow
- 实现元素的动画，将定位position设为fixed或者absolute，就不会影响其他元素的布局。
- 权衡速度的平滑，比如实现一个动画，以1像素为单位移动最平滑，但是reflow会频繁回流，我们可以进行节流设置，动画移动固定时间进行判断一次，到达最终点为准。
- 不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
- 减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
- 减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
网友评论