大文件上传时进度Donut抖动问题咨询

我碰到过类似的超大文件上传进度抖动问题，核心原因是超大文件的单分片占比极小，每次更新的百分比变化微乎其微，但频繁触发DOM更新会导致浏览器频繁重绘重排，视觉上就出现了卡顿抖动。结合你的场景，给你几个实用的解决方案：

1. 百分比阈值过滤 #

设置一个最小变化阈值，只有当进度百分比的变化超过这个阈值时，才更新进度条。这样能大幅减少不必要的DOM操作，同时用户也不会感知到进度的细微波动。

示例代码：

// 保存上一次更新的百分比
let lastUpdatedPercentage = 0;
// 自定义阈值，比如0.1%，可根据视觉需求调整
const updateThreshold = 0.1;

function updateProgress(current, total) {
  const currentPercentage = (current / total) * 100;
  // 只有当变化量达到阈值时才更新
  if (Math.abs(currentPercentage - lastUpdatedPercentage) >= updateThreshold) {
    // 这里替换成你的Donut进度条更新逻辑
    updateDonutProgress(currentPercentage);
    lastUpdatedPercentage = currentPercentage;
  }
}

2. 防抖（Debounce）处理 #

如果分片上传完成的事件触发非常密集，可以用防抖函数延迟更新进度，合并短时间内的多次更新请求，避免频繁刷新DOM。

示例代码：

let debounceTimer;
// 延迟时间，比如100ms，可根据上传速度调整
const debounceDelay = 100;

function updateProgress(current, total) {
  // 清除之前的延迟定时器
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const currentPercentage = (current / total) * 100;
    updateDonutProgress(currentPercentage);
  }, debounceDelay);
}

3. 格式化百分比显示 #

把计算出的百分比格式化到固定的小数位数（比如1位）或者取整，这样微小的百分比变化会被合并成同一个显示值，避免频繁更新视觉内容。

示例代码：

function updateProgress(current, total) {
  const currentPercentage = (current / total) * 100;
  // 格式化到小数点后1位，也可以用Math.round()取整
  const formattedPercentage = currentPercentage.toFixed(1);
  updateDonutProgress(formattedPercentage);
}

4. 分片增量预计算（进阶） #

因为是分片上传，可以提前计算单个分片对应的百分比增量。如果这个增量小于阈值，就累积多个分片的进度，直到累积的增量超过阈值再更新进度条。

示例代码：

let accumulatedProgress = 0;
const chunkSize = 你的分片大小; // 比如10MB对应的字节数
const total = fileSizeInBytes;
const chunkPercentage = (chunkSize / total) * 100;
const updateThreshold = 0.1;

function onChunkCompleted(receivedSize) {
  accumulatedProgress += chunkPercentage;
  // 当累积进度超过阈值时更新
  if (accumulatedProgress >= updateThreshold) {
    const currentPercentage = (receivedSize / total) * 100;
    updateDonutProgress(currentPercentage);
    accumulatedProgress = accumulatedProgress % updateThreshold; // 保留剩余的小增量
  }
}

你可以根据自己的上传速度、进度条的视觉需求，选择其中一种或者组合多种方案来解决抖动问题。

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