前言:
页面设计中,不可避免的需要浏览器进行repaint和reflow。那到底什么是repaint和reflow呢。下面谈谈自己对repaint和reflow的理解,以及结合其他技术牛的讲解,谈谈如何优化repaint和reflow。
初步介绍:
开发一个页面时,不可避免的需要进行repaint和reflow。也就只有古来的静态页面才会不存在repaint和reflow。repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流,针对整个页面的重排。字面意思来说:repaint就是重绘,reflow就是回流。repaint和reflow的目的是:展示一个新的页面样貌。
严重性:
在性能优先的前提下,性能消耗 reflow大于repaint。
体现:
repaint是某个DOM元素进行重绘;reflow是整个页面进行重排,也就是页面所有DOM元素渲染。
如何触发:
style变动造成repaint和reflow。
不涉及任何DOM元素的排版问题的变动为repaint,例如元素的color/text-align/text-decoration等等属性的变动。
除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。
常见触发场景:
- 触发repaint:
- color的修改,如color=#ddd;
- text-align的修改,如text-align=center;
- a:hover也会造成重绘。
- :hover引起的颜色等不导致页面回流的style变动。
- 等等太多,一时间写出来也太难想了。
- 触发reflow:
- width/height/border/margin/padding的修改,如width=778px;
- 动画,:hover等伪类引起的元素表现改动,display=none等造成页面回流;
- appendChild等DOM元素操作;
- font类style的修改;
- background的修改,注意着字面上可能以为是重绘,但是浏览器确实回流了,经过浏览器厂家的优化,部分background的修改只触发repaint,当然IE不用考虑;
- scroll页面,这个不可避免;
- resize页面,桌面版本的进行浏览器大小的缩放,移动端的话,还没玩过能拖动程序,resize程序窗口大小的多窗口操作系统。
- 读取元素的属性(这个无法理解,但是技术达人是这么说的,那就把它当做定理吧):读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE));
如何避免:
说避免那是不可能的,不然就是以前古老的静态页面了,没有交互,那在现在看来,就是一个失败的作品。所以,在我们进行网页设计的时候,就必须尽量减少页面的repaint和reflow。repaint和reflow的目的是为了展示一个新的页面,那么我们在进行页面交互时,尽量通过各种方法减少repaint和reflow但又能展示一个新的页面的目的。所以下面将结合其他技术达人的建议,通过自己的理解,给大家讲解如何避免和优化repaint和reflow:
下面是大神Nicole Sullivan的原话:
- Change classes on the element you wish to style (as low in the dom tree as possible)
- Avoid setting multiple inline styles
- Apply animations to elements that are position fixed or absolute
- Trade smoothness for speed
- Avoid tables for layout
- Avoid JavaScript expressions in the CSS (IE only)
- 尽可能在DOM末梢通过改变class来修改元素的style属性:尽可能的减少受影响的DOM元素。
- 避免设置多项内联样式:使用常用的class的方式进行设置样式,以避免设置样式时访问DOM的低效率。
- 设置动画元素position属性为fixed或者absolute:由于当前元素从DOM流中独立出来,因此受影响的只有当前元素,元素repaint。
- 牺牲平滑度满足性能:动画精度太强,会造成更多次的repaint/reflow,牺牲精度,能满足性能的损耗,获取性能和平滑度的平衡。
- 避免使用table进行布局:table的每个元素的大小以及内容的改动,都会导致整个table进行重新计算,造成大幅度的repaint或者reflow。改用div则可以进行针对性的repaint和避免不必要的reflow。
- 避免在CSS中使用运算式:学习CSS的时候就知道,这个应该避免,不应该加深到这一层再去了解,因为这个的后果确实非常严重,一旦存在动画性的repaint/reflow,那么每一帧动画都会进行计算,性能消耗不容小觑。