JavaScript高效实现滚动音频波形图的方法探讨

问题现状 #

当前实现通过requestAnimationFrame每次清空画布并重绘全部5000个数据点，在老旧设备上卡顿明显，核心问题是全量重绘开销过大，同时数组shift()操作也存在性能损耗。

优化思路与实现 #

1. 用画布平移+局部重绘替代全量清空重绘

每次仅处理新增的音频数据，将已有波形向左平移，只清除并绘制右侧新增区域，避免重绘全部数据：

• 计算单个数据点对应的画布宽度：pointWidth = width / resolution
• 每次更新时，将画布向左平移pointWidth，清除右侧空白区域后，仅绘制新数据对应的竖线
• 定期重置画布坐标系，避免浮点数平移导致的精度漂移

2. 替换数组shift()为环形缓冲区

shift()操作会移动数组所有元素，时间复杂度O(n)，改用环形缓冲区通过索引循环覆盖数据，将操作复杂度降为O(1)：

const resolution = 5000;
const data = new Array(resolution);
let currentIndex = 0;

// AudioWorklet中更新数据
data[currentIndex] = newDataPoint;
currentIndex = (currentIndex + 1) % resolution;

3. 优化后的完整代码示例

const resolution = 5000;
const data = new Array(resolution);
let currentIndex = 0;

// --- AudioWorklet 处理器中更新数据
data[currentIndex] = newDataPoint;
currentIndex = (currentIndex + 1) % resolution;
// --- 

const canvas = document.querySelector('.grid');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const pointWidth = width / resolution;

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.strokeStyle = 'black';
ctx.fillRect(0, 0, width, height);

// 初始化绘制全部初始数据
function initCanvas() {
    ctx.beginPath();
    for (let i = 0; i < resolution; i++) {
        const x = i * pointWidth;
        ctx.moveTo(x, height);
        ctx.lineTo(x, height - (data[i] || 0));
    }
    ctx.stroke();
}
initCanvas();

// 用于定期重置坐标系，避免精度漂移
let frameCount = 0;
const resetInterval = 100;

function updateCanvas() {
    frameCount++;
    // 获取最新的音频数据
    const newDataIndex = (currentIndex - 1 + resolution) % resolution;
    const newData = data[newDataIndex];

    // 平移画布，将已有波形左移一个点宽度
    ctx.translate(-pointWidth, 0);
    // 清除右侧空出的区域
    ctx.clearRect(width - pointWidth, 0, pointWidth, height);
    // 恢复坐标系，确保新绘制点位置正确
    ctx.translate(pointWidth, 0);
    
    ctx.beginPath();
    const x = width - pointWidth;
    ctx.moveTo(x, height);
    ctx.lineTo(x, height - newData);
    ctx.stroke();

    // 定期重置画布坐标系，解决精度漂移问题
    if (frameCount % resetInterval === 0) {
        // 创建临时画布保存当前内容
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = width;
        tempCanvas.height = height;
        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.drawImage(canvas, 0, 0);
        // 重置当前画布的变换矩阵
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        // 清空后重新绘制临时画布内容
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage(tempCanvas, 0, 0);
    }

    window.requestAnimationFrame(updateCanvas);
}
window.requestAnimationFrame(updateCanvas);

4. 额外优化建议

• 降低绘制分辨率：如果resolution超过屏幕实际像素数（比如屏幕宽度1920px，设置1920即可），减少不必要的绘制点
• 合并路径绘制：若需要批量绘制，可将多个竖线的起点终点整合为一条连续路径，减少beginPath和stroke的调用次数
• 使用离屏画布：复杂绘制可先在离屏画布完成，再一次性绘制到主画布，减少主画布的绘制操作

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