回流和重绘

重绘: 当页面中元素样式的改变并不影响它在文档流中的位置时，也就是说布局没有发生改变时(比如只是改变元素的颜色)。
回流：当渲染树(Render Tree)中的部分（或全部）元素的尺寸、结构、显示隐藏等发生改变时，浏览器重新渲染的过程称为回流。 简而言之，任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。 回流是影响浏览器性能的关键 因素。
比如：
（1）添加或者删除可见的 DOM 元素(不可见元素不会触发回流)；
（2）元素尺寸或位置发生改变
（3）元素内容变化，比如文字数量或图片大小
（4）浏览器窗口大小发生改变
（5）CSS伪类的激活（例如：:hover，从而改变了元素的布局的）
注意
回流必定会发生重绘，重绘不一定会引发回流。
回流比重绘的代价要更高。有时即使仅仅回流一个单一的元素，它的父元素以及任何跟它相关的元素也会产生回流，牵一发动全身。

如何避免(减少)回流
css
避免设置多层内联样式。
如果需要设置动画效果，最好将元素脱离正常的文档流。
避免使用CSS表达式（例如：calc()）。
JavaScript
避免频繁操作样式，最好将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
可以先为元素设置为不可见：display: none，操作结束后再把它显示出来。
————————————————
版权声明：本文为CSDN博主「windy-boy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/piaojiancong/article/details/115682174