触发浏览器重排的一些操作

触发重排的操作

• 页面的初次渲染
• DOM树的结构变化，包括添加、删除dom元素
• 获取某些属性，包括offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()，获取时应当做适当的缓存
• 改变元素位置（未脱离文档流的情况下）
• DOM元素的几何属性变化（高度，宽度，padding，margin等）
• 元素内容改变
• 调整缩放，触发resize

优化方案

• 将改变样式的属性尽可能集中放置
• 对获取时会触发重排的属性进行缓存（运行时允许的情况下）
• 需要改变多个样式的时候，利用切换class来实现
• 部分元素脱离文档流操作
• 添加和删除dom节点时，尽可能放在一起操作，比如添加一张表单的时候，直接在内存中准备好整个表单的dom元素插入，而不是用遍历的方式多次插入。

脱离文档流的情况

元素脱离文档留时，其自身的变化只会导致自身的重排，而不会影响其他元素，所以对于需要经常重绘的元素，可以将position设置为absolute或fixed，脱离文档流。

场景

• 列表排序，先获取列表dom节点，在内存中排序，然后一次性渲染，可以显著减少重排次数。