基本概念

浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（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 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点；

 

重绘（repaints）是一个元素外观的改变所触发的浏览器行为，例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随回流。 回流（reflow）是更明显的一种改变，可以理解为渲染树需要重新计算。 1，为什么我们讨厌回流？      回流这家伙，只要出现，就会重新对DOM树进行渲染，而大多数时候，这种全局性的渲染是无必要的。就像你花钱买了门票去景区玩，进门查票，出门查票，都可以理解是吧？但是你吃饭也查票，上厕所也查票，就完全没必要了对吧？浏览器虽然不是人，但是没准也有脾气，回流的次数多了，性能跟不上了，就是立马崩溃掉也是有可能的事儿。回流=查票 2，我们怎样搞定回流？ 2.1 CSS中的定位、隐藏    前面说到，回流的危害在于重新对DOM树进行渲染，那么，脱离文档流之后，进行的任何操作，都不会造成回流了！如果有需要经常进行复杂操作的地方，不妨使用position：absolute/fixed定位；或者是display：none，使之脱离文档流后进行操作，操作完成后再进入到文档流之中。 2.2 CSS中的顽固属性    以下这些属性，只要是改动了他们的值，就会造成回流，建议将他们合并到一起操作，可以减少回流的次数。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight；scrollTop、scrollLeft、scrollWidth、scrollHeight；clientTop、clientLeft、clientWidth、clientHeight；getComputedStyle() 、currentStyle（）。 2.3 Javascript控制样式的最优解    我们在利用Javascript进行样式控制的时候，不妨只是改变被控制者的class，而非在函数内部直接修改具体的样式。因为浏览器在我们用Javascript修改每一个具体样式的时候，都会进行一次重绘，如果是修改了2.2中的顽固属性，还会进行回流，这给浏览器造成了巨大的负担。例如，我们需要用这样的代码： 坏代码：function selectAnchor(element){ var changeDiv = document.getElementById(element);changeDiv.style.color = ‘#093′;changeDiv.style.background = ‘#eee’;changeDiv.style.height = ’200px’;}好代码：CSS:changeDiv {
    background: #eee;color: #093;height: 200px;}JavaScript:function selectAnchor(element) {
    document.getElementById(element).className = ‘changeDiv’;}

回流（回顾下东西都是转载的）