css小知识点：浏览器回流

回流与重绘：

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为repaint重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。

造成回流的情况

1、字体大小改变（font size change）
2、窗口大小改变（screen change）
3、样式表添加或者删除（add/delete stylesheets）
4、JS更改DOM元素（更改DOM颜色除外）
5、hover动作（:hover颜色除外）
6、位置计算（offset cats）
7、用户输入（user input）
8、改变样式属性（颜色，透明度等除外）

修改boder-width也会造成回流；

 

display:none;和visibility:hidden

    a. display:none；  元素隐藏后在文档流中不会占位 ，会造成回流

    b. visibility:hidden；元素隐藏后仍在文档流中占位（视觉上的不可见），不会造成回流

 

优化方法：

1 CSS中的定位、隐藏

   前面说到，回流的危害在于重新对DOM树进行渲染，那么，脱离文档流之后，进行的任何操作，都不会造成回流了！如果有需要经常进行复杂操作的地方，不妨使用position：absolute/fixed定位；或者是display：none，使之脱离文档流后进行操作，操作完成后再进入到文档流之中。

2 CSS中的顽固属性

   以下这些属性，只要是改动了他们的值，就会造成回流，建议将他们合并到一起操作，可以减少回流的次数。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight；scrollTop、scrollLeft、scrollWidth、scrollHeight；clientTop、clientLeft、clientWidth、clientHeight；getComputedStyle() 、currentStyle（）。

3 Javascript控制样式的最优解

   我们在利用Javascript进行样式控制的时候，不妨只是改变被控制者的class，而非在函数内部直接修改具体的样式。因为浏览器在我们用Javascript修改每一个具体样式的时候，都会进行一次重绘，如果是修改了2中的顽固属性，还会进行回流，这给浏览器造成了巨大的负担。我们可以先把这些元素都集合在一个方法之内，再调用出来，就能有效的减少回流了