如何优化D3.js冒泡排序可视化性能（大数据量时浏览器卡顿）

问题背景 #

基于TypeScript+D3.js开发排序可视化工具，冒泡排序在数据量为50时运行正常，但数据量提升至100、250或500条时浏览器严重卡顿。当前采用Fisher-Yates生成随机数据，通过setTimeout拆分排序步骤缓解压力，但大数据量下失效，元素交换动画的频繁DOM操作是核心性能瓶颈。

优化方案 #

1. 批量更新视图，减少DOM操作频率 #

当前每发生一次元素交换就调用updateBars触发全局DOM更新，大数据量下操作过于密集。优化思路是累积单轮排序中的所有交换动作，一次性更新视图，同时只修改有变化的元素。

修改排序函数，记录本轮交换的索引，批量传递给更新函数：

const bubbleSort = (data: number[], updateBars: (changedIndices: number[]) => void) => {
  let sorted = false;
  let pass = 0;

  const sort = () => {
    let swapsMade = false;
    const changedIndices: number[] = [];

    // 冒泡排序每轮可跳过已排序的尾部元素，减少迭代次数
    for (let i = 0; i < data.length - 1 - pass; i++) {
      if (data[i] > data[i + 1]) {
        [data[i], data[i + 1]] = [data[i + 1], data[i]];
        swapsMade = true;
        changedIndices.push(i, i + 1);
      }
    }
    pass++;

    if (changedIndices.length > 0) {
      updateBars(changedIndices);
    }

    if (!swapsMade) {
      sorted = true;
      svg.selectAll<SVGRectElement, number>("rect").style("fill", "black");
      return;
    }

    requestAnimationFrame(sort);
  };

  sort();
};

修改updateBars，仅更新有变化的元素：

function updateBars(changedIndices: number[]) {
  const bars = svg.selectAll<SVGRectElement, number>("rect").data(data);

  // 仅标记变化元素为红色，其余保持蓝色
  bars.style("fill", (_d, i) => 
    changedIndices.includes(i) ? "red" : "blue"
  );

  // 仅对变化元素应用过渡动画，避免全局重绘
  bars.filter((_d, i) => changedIndices.includes(i))
    .transition()
    .duration(30)
    .attr("x", (_d, i) => i * (barWidth + barPadding))
    .attr("y", (d) => height - d)
    .attr("height", (d) => d);
}

2. 用requestAnimationFrame替代setTimeout #

setTimeout的固定延迟无法与浏览器刷新帧率（约16ms/帧）同步，容易导致丢帧。requestAnimationFrame会在浏览器下一次重绘前执行回调，保证动画与渲染节奏匹配，提升流畅度。

3. 提前初始化DOM元素，避免重复创建 #

排序过程中数据量固定，仅元素位置变化，无需反复执行enter()/exit()逻辑。初始化时一次性创建所有条形元素：

// 初始化阶段仅执行一次
const barOffset = barWidth + barPadding; // 提前计算常量，避免重复计算
svg.selectAll<SVGRectElement, number>("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (_d, i) => i * barOffset)
  .attr("y", (d) => height - d)
  .attr("width", barWidth)
  .attr("height", (d) => d)
  .style("fill", "blue");

4. 触发硬件加速，降低CPU负载 #

通过CSS属性让浏览器使用GPU加速渲染SVG元素：

rect {
  transform: translateZ(0);
  will-change: x, y, height;
}

will-change属性提前告知浏览器元素即将变化的属性，让浏览器提前做好渲染优化。

内容的提问来源于stack exchange，提问作者IvonaK