基本概念

浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做 reflow（回流）。有时 reflow 页面中的一个元素会 reflow 它的祖先元素以及所有子元素。

由于 reflow 的开销非常之大，因此要尽可能的避免 reflow 的发生。

产生 reflow 的原因

● 调整窗口大小；

● 改变字体；

● 增加或者移除样式表；

● 内容变化，比如用户在 input 框中输入文字；

● 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)；

● 操作 class 属性；

● 脚本操作 DOM；

● 计算 offsetWidth 和 offsetHeight 属性；

● 设置 style 属性的值。

如何减少 reflow

● 如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树的最里层)；

● 避免设置多项内联样式；

● 用于表现动画的元素，使用 position 属性的 fixed 值或 absolute 值（脱离文档流）；

● 权衡平滑和速度（调大每帧间隔，减少 reflow 次数）；

● 避免使用 table 布局；

● 避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器)；

● 减少不必要的 DOM 层级，改变 DOM 树中的一级会导致所有层级的改变，蓝狮注册上至根部，下至被改变节点的子节点；

标签：reflow, 回流