Q5：重绘与回流

当元素的样式发生变化时，浏览器需要触发更新，重新绘制元素。这个过程中，有两种类型的操作，即重绘与回流。

重绘(repaint)

当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此损耗较少

回流(reflow)

当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，成为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。

会触发回流的操作

• 页面初次渲染
• 浏览器窗口大小改变
• 元素尺寸、位置、内容发生改变
• 元素字体大小变化
• 添加或者删除可见的dom元素
• 激活css伪类（例如：:hover）
• 查询某些属性或调用某些方法
  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scriollHeight、scrollTop、scrollLeft
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo

优化

css

• 避免使用table布局
• 将动画效果应用到position属性为absolute或fixed的属性上

javascript

• 避免频繁操作样式，可汇总后统一一次修改
• 尽量使用class进行样式修改
• 减少dom的增删次数，可使用字符串或者documentFragment一次性插入
• 极限优化时，修改样式可将其display:none后修改
• 避免多次触发上面提到的那些会触发回流的方法，可以的话尽量用变量存住