reflow(回流)和repaint(重绘)
文章目录
前言
在浏览器的渲染过程中(页面初始化，用户行为改变界面样式，动画改变界面样式)reflow和repaint会大大影响web性能，特别是手机页面，因此我们在页面设计的时候要尽量减少reflow和repaint。
一、什么是reflow和repaint ？
在浏览器渲染页面的过程中，页面中的代码进行渲染时，已经使浏览器不堪重负了，如果当用户使用时，替换一个背景颜色，或者更换一个样式，那么我们的浏览器又需要重新加载代码，而在这个过程中，浏览器又一次的受到了压力，日复一日说不定哪天就崩掉了
而主要影响页面渲染速度的为：reflow和repaint
二、reflow(回流)和repaint(重绘)
1.reflow(回流)
为什么页面加载会慢，因为浏览器需要花时间、花精力去渲染，尤其是当它发现某个部分发生变化时影响到布局，就需要倒回去重新渲染，这个’倒回去渲染的过程‘就叫做reflow(回流)
2.repaint(重绘)
如果变化的元素，只是更改了元素的背景色，文字颜色、边框颜色等等不影响它周围或者内部布局的属性，那这种行为只会引起repaint(重绘)，所以repaint的速度明显比reflow快
3.尽量减少reflow
1.reflow是导致DOM脚本执行力较低的关键因素之一，页面上任何一个结点触发reflow，都会导致它全部节点重新渲染
以下情况会导致reflow发生：
改变窗口大小
改变文字大小
添加/删除样式
内容的改变，如用户在输入框进行输入文字
激活伪类，如hover，active等
操作class属性
脚本操作DOM
计算offsetWidth或者offsetHeight
设置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 上面。
参考文案：http://www.webskys.com/artilc/228.html
总结
到最后我们可以发现reflow与repaint是不能完全避免的，我们只能尽量减少触发，减少触发reflow与repaint的好处在于减轻了浏览器的负担