认识reflow

浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做 reflow。由于 reflow 是一种浏览器中的用户拦截（user-blocking）操作，所以了解如何减少 reflow 次数，及不同的文档属性（DOM 层级（DOM depth），CSS 效率，不用类型的 style 变化）对 reflow 次数的影响对开发者来说非常必要。有时 reflow 页面中的一个元素会 reflow 它的父元素（译注：这里是复数）以及所有子元素。

有多种用户操作和 DHTML 变化可能会触发 reflow。调整浏览器窗口的大小，用 javascript 计算样式（computed styles），在 DOM 中创建删除元素，改变元素的 class 都会触发 reflow。值得注意的是，有些操作会多次触发 reflow，超出你的想象。下图源自 Steve Souders 的演讲 "Even Faster Web Sites"：

Yahoo! 性能工程师 Nicole Sullivan 在文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》 中总结了导致 reflow 发生的一些因素：

1. 调整窗口大小（Resizing the window）
2. 改变字体（Changing the font）
3. 增加或者移除样式表（Adding or removing a stylesheet）
4. 内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in
   an input box）
5. 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)）
6. 操作 class 属性（Manipulating the class attribute）
7. 脚本操作 DOM（A script manipulating the DOM）
8. 计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）
9. 设置 style 属性的值 （Setting a property of the style attribute）

reflow 会引起开销，影响页面的性能，那如何才能做到合理的优化呢？Nicole Sullivan 也提供了部分建议：

1. 如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树的最里层)（Change classes on the element you wish to style (as low in the dom tree as possible)）
2. 避免设置多项内联样式（Avoid setting multiple inline styles）
3. 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
4. 权衡平滑和速度（Trade smoothness for speed）
5. 避免使用 table 布局（Avoid tables for layout）
6. 避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器)（Avoid JavaScript expressions in the CSS (IE only)）

详细阅读：《Reflows & Repaints: CSS Performance making your JavaScript slow?》

 

从上表可以很明显的看出，在所有浏览器中并非所有 javascript 控制的样式都触发 reflow，即使触发了触发的次数也不尽相同。同时可以看出现代浏览器在控制 reflow 次数方面做的越来越好。

在 Google，我们通过多种方式对我们的页面及 Web 应用测速，同时 reflow 是我们增加 UI 时考虑的一个关键因素。我们致力于传达轻快的（lively），交互性强的（interactive）和令人愉悦的（delightful）的用户体验。