reflow 回流（重排，重写），repaint 重绘

HTML使用流式布局模型，布局过程可以从左到右、从上到下来进行。

回流是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。因为回流可能导致整个dom树的重新构造，所以是性能的一大杀手。

DOM Tree里每一个结点都会有reflow方法，一个结点的reflow可能会导致其子结点，甚至父级结点以及同级结点的reflow，同时他会触发repaint，并且reflow的开销非常昂贵。在一些高性能的电脑上或许没什么，但是如果reflow发生在低性能比如手机上，那么这个过程非常痛苦和耗电的。

以下操作会引起回流：

① 改变窗口大小

② font-size大小改变

③ 增加或者移除样式表

④ 内容变化（input中输入文字会导致）

⑤ 激活CSS伪类（:hover）

⑥ 操作class属性，新增或者减少

⑦ js操作dom

⑧ offset相关属性计算

⑨ 设置style的值

 

Reflow是不可避免的，只能将Reflow对性能的影响减到最小
减少页面回流

1、DOM离线后修改：

先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。

如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document：例如，动态添加数组元素时（如，10个li），一次性添加，不要单个append,要减少回流次数。

2、集中修改样式：

尽可能少的修改style上的属性

尽量通过修改className来修改样式。

设置元素的position的属性为absolute 或者fixed 。元素脱离标准流也就从DOM Tree中脱离出来，在需要reflow的时候只需要reflow自身以及下级元素。

尽量不要使用table布局。table元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围

避免使用expression,因为expression对浏览器资源要求比较高。它会每次调用都会重新计算一遍(包括加载页面)

另外，display：none 会发生reflow ，而，visibility：hidden 只会触发repaint ，因为它没有发现位置的变化。

 

 

repaint：：

1、什么是repaint（重绘）

当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上，这个过程称为repaint

2、什么情况下会导致repaint

“A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout.” --重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。比如，仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）

参考：https://www.imooc.com/article/51623
参考：https://www.jianshu.com/p/0b45a6bb3c6b