回流和重绘及其优化方法

回流必将引起重绘，重绘不一定引起回流
回流(reflow)
render树中一部分或全部元素需要改变尺寸、布局、或着需要隐藏而需要重新构建，这个过程叫做回流
回流必将引起重绘

当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

重绘(repaint)
render树中一部分元素改变，而不影响布局的，只影响外观的，比如颜色。该过程叫做重绘
页面至少经历一次回流和重绘(第一次加载的时候)
比如：只有颜色改变的时候就只会发生重绘而不会引起回流

如何优化

就比如 display:none 这个属性，该属性的作用就如同它名字一样直观，就是用来控制显示的状态嘛… 因此很多人喜欢拿它来做隐藏某个元素。而却忽略了(或者说不知道)它本身所带的回流性能开销(因为会影响节点的位置从而触发回流和重绘).

有一些前辈帮我们总结了避免回流的经验以供我们借鉴：

1. 如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
2. 避免设置多项内联样式
3. 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
4. 权衡平滑和速度
5. 避免使用 table 布局
6. 避免使用 CSS 的 JavaScript 表达式 (仅 IE 浏览器)

在 csstriggers 可以查看 css 属性在不同引擎下的渲染影响。

除此之外, 使用 JavaScript 动态插入多个节点时, 可以使用DocumentFragment. 创建后一次插入. 就能避免多次的渲染性能.