避免布局抖动(Layout Thrashing)

什么是布局抖动

布局抖动指的是浏览器因频繁重排（Reflow）导致的性能问题。当 JavaScript 反复读写 DOM 样式或几何属性时，浏览器被迫多次计算布局，造成页面渲染卡顿。这种现象在动态操作 DOM 时尤为常见，例如循环中连续修改元素尺寸或位置。

// 典型抖动案例：循环中交替读写布局属性
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
  const width = box.offsetWidth; // 触发重排
  box.style.width = width + 10 + 'px'; // 再次触发重排
});

浏览器渲染机制原理

现代浏览器采用流水线式渲染流程：

1. JavaScript：执行脚本逻辑
2. Style：计算样式规则
3. Layout：计算元素几何信息
4. Paint：生成绘制指令
5. Composite：合成图层

当 JavaScript 读取 offsetTop、scrollHeight 等布局属性时，浏览器会强制同步执行 Layout 阶段以保证数据准确，这种强制同步称为"强制同步布局"（Forced Synchronous Layout）。

常见触发场景

批量 DOM 操作

未优化的批量插入操作会导致 N 次重排：

const list = document.getElementById('list');
for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  list.appendChild(item); // 每次添加都触发重排
}

交错读写模式

经典反模式是在读取属性后立即修改相关属性：

// 获取高度 → 修改高度 → 获取宽度 → 修改宽度...
const block = document.querySelector('.block');
function resizeBlock() {
  block.style.height = block.offsetHeight + 10 + 'px';
  block.style.width = block.offsetWidth + 5 + 'px';
}

动画帧处理不当

requestAnimationFrame 中混用读写操作：

function animate() {
  elements.forEach(el => {
    const current = el.offsetLeft;
    el.style.left = current + 1 + 'px';
  });
  requestAnimationFrame(animate);
}

优化策略与实践

批量 DOM 写入

使用文档片段减少重排次数：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  fragment.appendChild(item);
}
document.getElementById('list').appendChild(fragment);

读写分离原则

将读取操作集中执行，然后统一进行写入：

// 先读取所有需要的数据
const boxes = document.querySelectorAll('.box');
const dimensions = Array.from(boxes).map(box => ({
  width: box.offsetWidth,
  height: box.offsetHeight
}));

// 统一执行写入
boxes.forEach((box, i) => {
  box.style.width = dimensions[i].width + 10 + 'px';
  box.style.height = dimensions[i].height + 5 + 'px';
});

使用 FastDOM 库

FastDOM 通过任务调度自动批处理读写操作：

fastdom.measure(() => {
  const width = element.offsetWidth;
  fastdom.mutate(() => {
    element.style.width = width + 10 + 'px';
  });
});

CSS 动画替代 JS 动画

优先使用 transform 和 opacity 属性：

.animated {
  transition: transform 0.3s ease;
  transform: translateX(0);
}
.animated.move {
  transform: translateX(100px);
}

高级优化技巧

虚拟 DOM 技术

React/Vue 等框架通过虚拟 DOM 差异比对实现批量更新：

function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

离线 DOM 操作

临时使元素脱离文档流：

const element = document.getElementById('dynamic');
element.style.display = 'none';

// 执行多次修改
element.style.width = '200px';
element.style.height = '300px';
element.style.backgroundColor = 'red';

element.style.display = 'block';

使用 will-change 提示浏览器

提前告知浏览器可能的变化：

.optimized {
  will-change: transform, opacity;
}

检测与调试方法

Chrome DevTools 性能面板

1. 录制页面操作
2. 分析时间线中的紫色"Layout"事件
3. 查看累计布局耗时和触发次数

Layout Shift 控制台警告

启用开发者工具中的"Layout Shift Regions"可视化：

// 控制台输入
PerformanceObserver.observe({type: 'layout-shift'});

强制同步布局检测

添加调试代码捕获同步布局：

const original = HTMLElement.prototype.getBoundingClientRect;
HTMLElement.prototype.getBoundingClientRect = function() {
  console.trace('强制同步布局');
  return original.apply(this, arguments);
};

实际案例分析

无限滚动列表优化

错误实现：

window.addEventListener('scroll', () => {
  if (isNearBottom()) {
    loadMoreItems(); // 内部直接操作DOM
  }
});

优化方案：

let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking && isNearBottom()) {
    requestAnimationFrame(() => {
      loadMoreItems();
      ticking = false;
    });
    ticking = true;
  }
});

动态表单验证

原始版本：

inputs.forEach(input => {
  input.addEventListener('blur', () => {
    const isValid = validate(input.value);
    input.style.borderColor = isValid ? 'green' : 'red';
    errorLabel.style.display = isValid ? 'none' : 'block';
  });
});

优化版本：

function validateAll() {
  const changes = [];
  inputs.forEach(input => {
    const isValid = validate(input.value);
    changes.push(() => {
      input.style.borderColor = isValid ? 'green' : 'red';
      errorLabel.style.display = isValid ? 'none' : 'block';
    });
  });
  requestAnimationFrame(() => changes.forEach(fn => fn()));
}