8. 视频渲染优化：Canvas渲染与WebGL加速、requestAnimationFrame的使用、帧率监控与丢帧统计

视频渲染，说白了就是把解码后的视频帧画到屏幕上。这一步看似简单，但坑特别多。我见过不少项目，编码、传输、解码都优化得不错，结果卡在了渲染这一环——画面一顿一顿的，用户直接骂娘。

今天我们就来聊聊，怎么把视频帧又快又稳地渲染出来。

8.1 Canvas渲染 vs WebGL加速

渲染视频帧，最常用的两个手段就是 Canvas 2D 和 WebGL。你可能会问：「直接用 video 标签不就行了？」嗯，大多数场景确实可以。但当你需要做特效、加滤镜、做画面合成，或者要同时渲染多路视频时，video 标签就力不从心了。

Canvas 2D 渲染

Canvas 2D 的 API 很友好，上手快。核心就两行代码：

const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, width, height);

就这么简单。但你要注意，drawImage 的性能跟视频分辨率直接挂钩。我在项目中遇到过，1080p 的视频在 Canvas 上渲染，帧率还能稳住 60fps。但换成 4K 视频，直接掉到 30fps 以下。

为什么会这样？因为 Canvas 2D 默认走的是 CPU 渲染管线。每一帧都要把图像数据从 GPU 拷贝到 CPU，处理完再传回去。这个来回拷贝的开销，在高分辨率下非常可观。

WebGL 加速

WebGL 就不一样了。它直接操作 GPU，数据不用来回倒腾。渲染视频帧时，我们把视频帧作为纹理上传到 GPU，然后通过着色器（Shader）来绘制。

核心流程是这样的：

// 1. 创建纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 2. 每帧更新纹理
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);

// 3. 绘制
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

你看，代码比 Canvas 2D 复杂不少。但性能提升是实打实的。我做过对比测试：同样渲染 4K 视频，Canvas 2D 掉到 25fps，WebGL 稳稳地 60fps。

8.2 requestAnimationFrame 的正确使用

说到渲染循环，很多人第一反应是 setInterval 或者 setTimeout。千万别！这两个定时器完全不靠谱。

为什么？因为 setInterval 不管浏览器是否在后台，也不管当前帧是否已经渲染完。它只管按固定间隔往任务队列里塞回调。结果就是：掉帧、卡顿、CPU 空转。

requestAnimationFrame 就聪明多了。它会等浏览器准备好渲染下一帧时，才调用你的回调。而且页面切到后台时，它会自动暂停，省电又省资源。

标准用法：

function renderLoop() {
  // 更新纹理或 drawImage
  updateVideoFrame();

  // 请求下一帧
  requestAnimationFrame(renderLoop);
}

requestAnimationFrame(renderLoop);

嗯，这里要注意一个细节：requestAnimationFrame 的回调里会传入一个高精度时间戳。你可以用它来计算帧间隔，做帧率控制。

let lastTime = 0;

function renderLoop(timestamp) {
  const delta = timestamp - lastTime;
  lastTime = timestamp;

  // delta 单位是毫秒，正常应该在 16.67ms 左右（60fps）
  if (delta > 50) {
    console.warn('检测到严重掉帧，间隔：', delta, 'ms');
  }

  updateVideoFrame();
  requestAnimationFrame(renderLoop);
}

8.3 帧率监控与丢帧统计

渲染优化做得好不好，不能靠感觉。得有数据说话。帧率（FPS）和丢帧率，就是最核心的两个指标。

如何计算 FPS

最简单的办法：每秒统计一次 rAF 回调执行的次数。

let frameCount = 0;
let lastFpsTime = 0;
let currentFps = 0;

function measureFps(timestamp) {
  frameCount++;

  if (timestamp - lastFpsTime >= 1000) {
    currentFps = frameCount;
    frameCount = 0;
    lastFpsTime = timestamp;

    console.log('当前 FPS：', currentFps);
  }
}

这个方法够用，但不够精确。更专业的做法是计算帧间隔的滑动平均值。

const frameIntervals = [];
const MAX_SAMPLES = 60;

function measureFrameInterval(timestamp) {
  if (lastTime > 0) {
    const delta = timestamp - lastTime;
    frameIntervals.push(delta);

    if (frameIntervals.length > MAX_SAMPLES) {
      frameIntervals.shift();
    }

    const avgInterval = frameIntervals.reduce((a, b) => a + b, 0) / frameIntervals.length;
    const fps = 1000 / avgInterval;

    console.log('平滑 FPS：', fps.toFixed(1));
  }
  lastTime = timestamp;
}

丢帧统计

丢帧，就是本该渲染的帧没来得及渲染。在 WebRTC 场景下，丢帧通常意味着视频流里丢包了，或者渲染线程被阻塞了。

我习惯这样统计丢帧：

let expectedFrameCount = 0;
let actualFrameCount = 0;
let droppedFrames = 0;

function onVideoFrameReceived() {
  expectedFrameCount++;
}

function onFrameRendered() {
  actualFrameCount++;
  droppedFrames = expectedFrameCount - actualFrameCount;

  if (droppedFrames > 5) {
    console.warn('丢帧严重：', droppedFrames);
  }
}

可视化监控

光在控制台打印不够直观。我建议在页面上画一个简单的 FPS 仪表盘：

function drawFpsMeter(fps, dropped) {
  ctx.clearRect(0, 0, 200, 60);
  ctx.fillStyle = fps > 50 ? '#4CAF50' : fps > 30 ? '#FFC107' : '#F44336';
  ctx.font = '24px monospace';
  ctx.fillText(`FPS: ${fps}`, 10, 30);
  ctx.fillText(`丢帧: ${dropped}`, 10, 55);
}

把这个小仪表盘放在视频画面的角落，调试时一目了然。

8.4 知识体系总览

下面这张图，把视频渲染优化的核心脉络梳理清楚了：

8.5 实战建议

最后，给你几个我在项目中沉淀下来的经验：

• 优先用 WebGL：除非你的场景特别简单，否则直接上 WebGL。Canvas 2D 的坑太多了。
• rAF 是唯一选择：任何定时器方案都不要考虑。rAF 的时机是最准的。
• 监控要持续：把 FPS 和丢帧率做成可视化仪表盘，上线后也要保留。我见过太多「开发环境跑得飞起，线上卡成狗」的案例。
• 注意移动端：移动设备的 GPU 和 CPU 资源更紧张。WebGL 在移动端的效果比桌面端更明显。

---

公众号:蓝海资料掘金营，微信deep3321