跳到主要内容

回流与重绘

回流与重绘是什么？​

  • 回流 (重排): 布局或几何属性变化, 重建布局树并重绘;
  • 重绘: 元素样式变化, 只更新渲染树, 不改布局;
  • 开销: 回流高, 重绘低于回流;

二者有什么因果关系？​

  • 回流一定触发重绘;
  • 重绘不一定触发回流;

什么操作会触发回流或重绘？​

类型触发操作
回流窗口尺寸; 文本字号/字体; 盒子模型相关元素变化; 子元素增减; float/clear; display; 增删样式表
重绘元素颜色; 可见性/透明度; radius/shadow; 文本装饰; 背景色/背景图

如何减少回流与重绘？​

  • 改样式: 用增删类名替代逐条修改 style;
  • 改位置: 用 transform 替代 top/left, 只落到渲染的 draw 阶段;
  • 脱离文档流: 对频繁变化的元素用 absolute, 避免影响其他元素;
  • 隐藏代替删除: 用 display/visibility 保留 DOM 节点;
  • 缓存: 缓存多次操作的元素引用;

DocumentFragment 如何减少 DOM 操作？​

  • DocumentFragment: 轻量 DOM 容器, 不渲染到页面;
  • 机制: 在内存中批量装配节点, 再一次提交;
  • 效果: 只触发一次回流与重绘;
const frag = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  const li = document.createElement("li");
  li.innerText = "List item " + i;
  frag.appendChild(li);
}
document.querySelector("ul").appendChild(frag);