html中的回流、重绘

回流

重新渲染页面需要重新计算元素的几何大小和位置，这个计算的过程称之为回流。

回流的原因

• 初始化的时候，第一次回流
• 窗口大小变化
• 字体改变
• 增加或者移除样式表
• 内容变化
• 操作class属性
• 操作Dom
• html设置行内样式
• offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算

避免/减少回流的方式

• 添加class样式
• 修改样式直接更换class名称，不是改变某一个特定的属性
• 操作块级元素时，可使其脱离文档流，设置position: fixed position: absolute
• 操作块级元素时，可先隐藏元素，设置display: none
• 避免循环操作元素
• 避免使用table布局

重绘

元素更新属性，属性只影响元素的外观、风格而不影响布局的称之为重绘。
如color属性

回流一定会引起重绘，但是重绘不一定引起回流。