【css】重绘和回流

重绘和回流是在浏览器渲染页面时发生的。
重绘：当元素的外观样式（如：字体颜色、背景色等属性）发生变化时，浏览器重新绘制受影响的元素，但不改变
其在文档流中的位置。
避免重绘的方法：避免多层内联样式、使用外部样式、避免频繁操作样式

回流：元素的尺寸、布局、位置发生变化，浏览器重新计算元素的位置、布局，重新绘制受影响的部分或者全部页
面。
避免回流的方法：避免频繁操作dom、避免使用table布局、避免使用css的js表达式、使用requestAnimationFrame

多层内联样式：嵌套元素分别应用内联样式

<div style="background-color: yellow;">  
  <p style="color: blue; font-size: 20px;">这是一个在黄色背景上的蓝色段落，字体大小为20px。</p>  
</div>

table布局可能引起频繁的回流，是因为：

table布局中的元素会根据其内容大小自动调整尺寸，即使两个结构相同的table布局，如果内容不同，其大小可能也
不同。当table元素的大小发生变化时，浏览器要重新计算table的整个布局，这就会引发回流。此外，table布局中元
素的位置也是相对确定的，任何一个元素位置的变化，都可能引起其他元素位置的变化，从而导致回流的频率增加。

requestAnimationFrame

h5提供的动画API，优化浏览器中并行的动画动作，把能合并的动作放在一个渲染周期中执行