reflow（重排、回流）和repaint（重绘）

reflow和repaint的区别：

• reflow：浏览器需要去渲染，当它发现某个dom发生了变化不仅仅改变自身，会导致后面的元素位置全部改变并且影响了布局，则需要倒回去重新渲染；
• repaint：不影响元素周围或者内部布局，只改变某个dom元素的颜色或者文字颜色，则会进行重绘

什么的时候会发生reflow？

• 页面进行初始化的时候；
• 对dom元素进行操作的时候（删除或者增加）；
•  改变dom元素的尺寸；
• CSS的属性发生变化，例如display属性；
• 页面的文本和图片等内容的改变
• 浏览器窗口尺寸改变（resize事件）

如何减少reflow、repaint？

• 避免在document上直接对dom进行操作
•  集中对样式进行修改，通过className来进行样式的修改，通过classText属性设置样式值；
• 尽量避免使用table布局，table布局中某个元素触发会导致所有其他元素reflow，若有table布局，可以设置table-layout：auto/fixed，可以使table一行行的渲染，缩小reflow的范围；
• 将Layout属性值进行缓存，需要多次访问的在一次访问时先存储在局部变量中；
• 避免在css里面写expression；
• 权衡速度的平滑，比如实现一个动画，以1个像素为单位移动这样最平滑，但 reflow 就会过于频繁，CPU 很快就会被完全占用。但以3个像素为单位移动就会好很多。