探讨css中repaint和reflow

(我的blog迁移文章。)

前言：

页面设计中，不可避免的须要浏览器进行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的修改。

常见触发场景：

1. 触发repaint：
   1. color的修改，如color=#ddd；
   2. text-align的修改，如text-align=center；
   3. a:hover也会形成重绘。
   4. :hover引发的颜色等不致使页面回流的style变更。
   5. 等等太多，一时间写出来也太难想了。
2. 触发reflow：
   1. width/height/border/margin/padding的修改，如width=778px；
   2. 动画，:hover等伪类引发的元素表现改动，display=none等形成页面回流；
   3. appendChild等DOM元素操做；
   4. font类style的修改；
   5. background的修改，注意着字面上可能觉得是重绘，可是浏览器确实回流了，通过浏览器厂家的优化，部分background的修改只触发repaint，固然IE不用考虑；
   6. scroll页面，这个不可避免；
   7. resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操做系统。
   8. 读取元素的属性（这个没法理解，可是技术达人是这么说的，那就把它当作定理吧）：读取元素的某些属性（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的原话：

1. Change classes on the element you wish to style (as low in the dom tree as possible)
2. Avoid setting multiple inline styles
3. Apply animations to elements that are position fixed or absolute
4. Trade smoothness for speed
5. Avoid tables for layout
6. Avoid JavaScript expressions in the CSS (IE only)

1. 尽量在DOM末梢经过改变class来修改元素的style属性：尽量的减小受影响的DOM元素。
2. 避免设置多项内联样式：使用经常使用的class的方式进行设置样式，以免设置样式时访问DOM的低效率。
3. 设置动画元素position属性为fixed或者absolute：因为当前元素从DOM流中独立出来，所以受影响的只有当前元素，元素repaint。
4. 牺牲平滑度知足性能：动画精度太强，会形成更屡次的repaint/reflow，牺牲精度，能知足性能的损耗，获取性能和平滑度的平衡。
5. 避免使用table进行布局：table的每一个元素的大小以及内容的改动，都会致使整个table进行从新计算，形成大幅度的repaint或者reflow。改用div则能够进行针对性的repaint和避免没必要要的reflow。
6. 避免在CSS中使用运算式：学习CSS的时候就知道，这个应该避免，不该该加深到这一层再去了解，由于这个的后果确实很是严重，一旦存在动画性的repaint/reflow，那么每一帧动画都会进行计算，性能消耗不容小觑。

参考文献：

1. 页面重构应注意的repaint和reflow
2. 如何减小浏览器repaint和reflow（上）
3. 回流与重绘：CSS性能让JavaScript变慢？
4. Reflows & Repaints: CSS Performance making your JavaScript slow?

 

以为有用，点个赞，赞赞更健康。