回流reflow和重绘repaint
回流
第一次确定节点的大小和位置，称为布局
后续对节点的大小、位置修改并重新计算称为回流
引起回流的情况
- DOM结构发生变化（添加或删除节点）
- 改变布局（修改width、height、padding、font-size等）
- 修改窗口大小
- 调用getComputedStyle方法获取尺寸、位置星系、
避免回流的方法
修改样式时尽量一次性修改，比如通过cssText修改，或者通过添加class修改，而不是对css的各种属性分次修改
避免频繁的操作DOM，可以使用虚拟DOM，或在父元素中要操作的DOM完成，再一次性更新到DOM中
composite合成
绘制的过程中，浏览器会将布局后的元素绘制到多个图层中
默认情况下，标准流中的内容被绘制在同一个图层，对于某些特殊的属性，会创建一个新的图层，这些图层可以利用GPU加速绘制
可以形成新的合成层的属性：3D transforms、video、canvas、iframe、opacity、position：fixed、will-change、animation或transition设置了opacity、transform
分层确实可以提高性能，但以内存管理为代价，因此不能作为Web性能优化的一部分过渡使用
重绘
第一次渲染内容称为绘制
后续重新渲染称为重绘
引起重绘的情况
修改背景颜色、文字颜色、边框颜色、样式等
注：回流一定引起重绘、因此回流是一件很消耗性能的事情，所以开发中要避免回流