重绘
当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,所以重绘跳过了创建布局树和分层的阶段。
重排(回流)
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。
关系
重排需要重新计算布局树,重绘不需要,重排必定发生重绘,但是涉及到重绘不一定要重排。涉及到重排对性能的消耗更多一些。
触发重排的方法
-页面初始渲染,这是开销最大的一次重排 -添加/删除可见的DOM元素 -改变元素位置 -改变元素尺寸,比如边距、填充、边框、宽度和高度等 -改变元素内容,比如文字数量,图片大小等 -改变元素字体大小 -改变浏览器窗口尺寸,比如resize事件发生时 -激活CSS伪类(例如::hover) -设置 style 属性的值,因为通过设置style属性改变结点样式的话,每一次设置都会触发一次reflow -查询某些属性或调用某些计算方法:offsetWidth、offsetHeight等
避免重排的方式
使用createElementFragment操作dom,最后一起推入文档
样式集中改变 使用class去修改样式
使用 absolute 或 fixed 脱离文档流
使用GPU加速提升网站的动画渲染性能:transform