回流与重绘:
当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中的顽固属性,还会进行回流,这给浏览器造成了巨大的负担。我们可以先把这些元素都集合在一个方法之内,再调用出来,就能有效的减少回流了