重排是指浏览器在渲染页面时,为了调整DOM元素的位置和大小而进行的重新布局。就是当一个元素的位置、尺寸等发生改变的时候,浏览器需要重新计算该元素的几何属性并且摆放到正确的位置的过程叫做重排。一般像页面初次渲染、带有动画的元素、添加或删除功能、图片放大缩小、浏览器窗口发生改变的时候都会触发重排。重排也叫回流。
这个过程会消耗额外的计算资源,影响页面的性能。
要减少重排,可以遵循以下几点:
- 使用 CSS 确定元素的尺寸和位置,避免频繁改变元素的样式。
- 将 DOM 操作集中处理,而不是多次单独操作。
- 使用 flexbox 或 grid 布局,可以减少布局的复杂度。
- 避免在循环中对元素的样式进行频繁修改,可以先将元素离线处理再一次性渲染。