对reflow的理解***

对reflow的理解***

首先得知道reflow是什么？

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

以下操作会引起回流：
① 改变窗口大小
② font-size大小改变
③ 增加或者移除样式表
④ 内容变化（input中输入文字会导致）
⑤ 激活CSS伪类（:hover）
⑥ 操作class属性，新增或者减少
⑦ js操作dom
⑧ offset相关属性计算
⑨ 设置style的值 …
另外: reflow与repaint（重绘）是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。