JS `OffscreenCanvas` `TransferToImageBitmap` `Transferable` 优化渲染帧传输 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位前端的靓仔靓女们，早上好！我是你们的老朋友，今天咱们聊点刺激的：OffscreenCanvas、TransferToImageBitmap和Transferable，看看怎么把渲染帧像快递一样嗖嗖嗖地送到主线程，让你的动画6到飞起！

第一部分：OffscreenCanvas：主线程的解放者

在很久很久以前（其实也没多久），所有的Canvas渲染操作都必须在主线程完成。这意味着什么？意味着主线程要是忙着处理其他事情（比如，解析一大坨JSON，或者执行一个复杂的计算），你的动画就会卡顿，用户体验直线下降，就像便秘一样难受。

OffscreenCanvas的出现，就像一剂通便灵药，解放了主线程。它允许我们在Worker线程中进行Canvas渲染，渲染完毕后再将结果传递给主线程。

1.1 创建OffscreenCanvas

创建OffscreenCanvas有两种方式：

从现有的<canvas>元素转移：
```
const canvas = document.getElementById('myCanvas');
const offscreenCanvas = canvas.transferControlToOffscreen();
```
注意，transferControlToOffscreen()方法会使原始的<canvas>元素失效，所以你要提前做好备份工作。
直接创建：
```
const offscreenCanvas = new OffscreenCanvas(width, height);
```
这种方式更加灵活，因为你不需要依赖DOM中的<canvas>元素。

1.2 在Worker中使用OffscreenCanvas

// worker.js
self.onmessage = function(event) {
  if (event.data.canvas) {
    const offscreenCanvas = event.data.canvas;
    const ctx = offscreenCanvas.getContext('2d');

    function render() {
      ctx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
      ctx.fillStyle = 'red';
      ctx.fillRect(Math.random() * offscreenCanvas.width, Math.random() * offscreenCanvas.height, 50, 50);
      requestAnimationFrame(render);
    }

    render();
  }
};

// main.js
const canvas = document.getElementById('myCanvas');
const offscreenCanvas = canvas.transferControlToOffscreen();
const worker = new Worker('worker.js');

worker.postMessage({ canvas: offscreenCanvas }, [offscreenCanvas]);

这段代码很简单：

主线程将OffscreenCanvas的所有权转移给Worker线程。注意，postMessage的第二个参数[offscreenCanvas]非常重要，它告诉浏览器这是一个Transferable对象，可以进行零拷贝传输。
Worker线程接收到OffscreenCanvas后，获取2D渲染上下文，然后开始不停地渲染。

第二部分：TransferToImageBitmap：帧的完美封装

现在，我们已经在Worker线程中渲染好了，但是怎么把渲染结果传递给主线程呢？一个直接的想法是，使用getImageData方法将Canvas的内容读取出来，然后通过postMessage传递给主线程。但是，这样做效率太低了！getImageData会创建一个Canvas内容的副本，导致额外的内存分配和拷贝操作。

transferToImageBitmap()方法就像一个魔术师，它可以将OffscreenCanvas的内容直接转换为ImageBitmap对象，而不需要进行任何拷贝操作。

2.1 使用transferToImageBitmap

// worker.js (修改后的代码)
self.onmessage = function(event) {
  if (event.data.canvas) {
    const offscreenCanvas = event.data.canvas;
    const ctx = offscreenCanvas.getContext('2d');

    function render() {
      ctx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
      ctx.fillStyle = 'red';
      ctx.fillRect(Math.random() * offscreenCanvas.width, Math.random() * offscreenCanvas.height, 50, 50);

      const imageBitmap = offscreenCanvas.transferToImageBitmap();
      self.postMessage({ imageBitmap: imageBitmap }, [imageBitmap]); // 重要：作为Transferable传递
      requestAnimationFrame(render);
    }

    render();
  }
};

// main.js (修改后的代码)
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const offscreenCanvas = canvas.transferControlToOffscreen();
const worker = new Worker('worker.js');

worker.postMessage({ canvas: offscreenCanvas }, [offscreenCanvas]);

worker.onmessage = function(event) {
  if (event.data.imageBitmap) {
    const imageBitmap = event.data.imageBitmap;
    ctx.drawImage(imageBitmap, 0, 0);
    imageBitmap.close(); // 释放资源，非常重要
  }
};

这段代码的关键在于：

Worker线程使用offscreenCanvas.transferToImageBitmap()将OffscreenCanvas的内容转换为ImageBitmap对象。
Worker线程通过postMessage将ImageBitmap对象传递给主线程。同样，[imageBitmap]告诉浏览器这是一个Transferable对象。
主线程接收到ImageBitmap对象后，使用ctx.drawImage()将其绘制到Canvas上。
最重要的一点：在主线程中使用imageBitmap.close()释放ImageBitmap对象占用的资源。 否则，你的内存会像气球一样膨胀，最终导致浏览器崩溃。

2.2 为什么ImageBitmap这么神奇？

ImageBitmap是一个位图图像的抽象表示，它可以从多种来源创建，例如：

<img>元素
<video>元素
<canvas>元素
Blob对象
ImageData对象

但是，transferToImageBitmap()创建ImageBitmap的方式与其他方式不同。它不会创建Canvas内容的副本，而是直接将Canvas的底层数据结构转移给ImageBitmap对象。这意味着什么？意味着零拷贝！

第三部分：Transferable：零拷贝的幕后英雄

Transferable接口是实现零拷贝传输的关键。它允许我们将某些类型的对象的所有权从一个上下文转移到另一个上下文，而不需要进行任何拷贝操作。

3.1 哪些对象是Transferable？

以下是一些常见的Transferable对象：

ArrayBuffer
MessagePort
ImageBitmap
OffscreenCanvas

3.2 postMessage中的Transferable

当我们使用postMessage传递Transferable对象时，需要将这些对象放在postMessage的第二个参数中，例如：

worker.postMessage({ data: arrayBuffer }, [arrayBuffer]);

如果没有将Transferable对象放在第二个参数中，浏览器会默认进行拷贝操作，而不是进行零拷贝传输。

3.3 Transferable的注意事项

所有权转移： 一旦我们将一个Transferable对象的所有权转移给另一个上下文，我们就不能再在原来的上下文中使用它了。例如，在上面的例子中，一旦我们将OffscreenCanvas的所有权转移给Worker线程，我们就不能再在主线程中使用它了。
单向转移： Transferable对象的所有权只能单向转移。也就是说，一旦我们将一个Transferable对象的所有权转移给另一个上下文，我们就不能再将它转移回原来的上下文了。
释放资源： 对于ImageBitmap对象，我们需要在使用完毕后调用close()方法释放资源，否则会导致内存泄漏。

第四部分：优化渲染帧传输的策略

现在，我们已经掌握了OffscreenCanvas、TransferToImageBitmap和Transferable的基本用法，接下来，我们来看看如何利用它们来优化渲染帧传输。

4.1 减少transferToImageBitmap的调用次数

transferToImageBitmap虽然是零拷贝的，但是它仍然有一定的开销。因此，我们应该尽量减少transferToImageBitmap的调用次数。

例如，如果我们的动画只需要更新Canvas的一部分区域，我们可以只将这部分区域转换为ImageBitmap对象，而不是将整个Canvas转换为ImageBitmap对象。

4.2 使用requestAnimationFrame同步渲染

为了避免主线程和Worker线程之间的竞争，我们应该使用requestAnimationFrame来同步渲染。

具体来说，我们可以在Worker线程中使用requestAnimationFrame来控制渲染帧的生成速度，然后在主线程中使用requestAnimationFrame来控制ImageBitmap对象的绘制速度。

4.3 使用双缓冲技术

双缓冲技术可以进一步提高渲染性能。

具体来说，我们可以在Worker线程中使用两个OffscreenCanvas对象：一个用于渲染，另一个用于显示。

当我们完成一帧的渲染后，我们将渲染结果转移到显示Canvas上，然后将显示Canvas的内容转换为ImageBitmap对象，并将其传递给主线程。

4.4 代码示例：双缓冲优化

// worker.js
self.onmessage = function(event) {
  if (event.data.canvas) {
    const canvas1 = event.data.canvas1;
    const canvas2 = event.data.canvas2;
    const ctx1 = canvas1.getContext('2d');
    const ctx2 = canvas2.getContext('2d');

    let renderingCanvas = canvas1;
    let displayingCanvas = canvas2;
    let renderingCtx = ctx1;
    let displayingCtx = ctx2;

    function render() {
      // 渲染到 renderingCanvas
      renderingCtx.clearRect(0, 0, renderingCanvas.width, renderingCanvas.height);
      renderingCtx.fillStyle = 'blue';
      renderingCtx.fillRect(Math.random() * renderingCanvas.width, Math.random() * renderingCanvas.height, 50, 50);

      // 交换 renderingCanvas 和 displayingCanvas
      const tempCanvas = renderingCanvas;
      renderingCanvas = displayingCanvas;
      displayingCanvas = tempCanvas;

      const tempCtx = renderingCtx;
      renderingCtx = displayingCtx;
      displayingCtx = tempCtx;

      const imageBitmap = displayingCanvas.transferToImageBitmap();
      self.postMessage({ imageBitmap: imageBitmap }, [imageBitmap]);

      requestAnimationFrame(render);
    }

    render();
  }
};

// main.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const offscreenCanvas1 = new OffscreenCanvas(canvas.width, canvas.height);
const offscreenCanvas2 = new OffscreenCanvas(canvas.width, canvas.height);
const worker = new Worker('worker.js');

worker.postMessage({ canvas1: offscreenCanvas1, canvas2: offscreenCanvas2 }, [offscreenCanvas1, offscreenCanvas2]);

worker.onmessage = function(event) {
  if (event.data.imageBitmap) {
    const imageBitmap = event.data.imageBitmap;
    ctx.drawImage(imageBitmap, 0, 0);
    imageBitmap.close();
    requestAnimationFrame(() => {}); // 使用 requestAnimationFrame 确保同步
  }
};

4.5 总结：性能优化checklist

优化策略	描述
使用 `OffscreenCanvas`	将Canvas渲染操作放在Worker线程中，解放主线程。
使用 `transferToImageBitmap`	将`OffscreenCanvas`的内容转换为`ImageBitmap`对象，实现零拷贝传输。
传递 `Transferable` 对象时，放入第二个参数	确保使用零拷贝传输，避免额外的内存分配和拷贝操作。
使用 `imageBitmap.close()`	释放`ImageBitmap`对象占用的资源，防止内存泄漏。
减少 `transferToImageBitmap` 的调用次数	只将需要更新的区域转换为`ImageBitmap`对象。
使用 `requestAnimationFrame` 同步渲染	避免主线程和Worker线程之间的竞争。
使用双缓冲技术	提高渲染性能，减少卡顿现象。
避免频繁创建和销毁 `OffscreenCanvas`	`OffscreenCanvas`的创建和销毁也有一定的开销，尽量复用已有的`OffscreenCanvas`。

第五部分：实际案例分享

假设我们需要做一个复杂的粒子效果，粒子数量非常多，如果直接在主线程中渲染，肯定会卡顿。

我们可以使用OffscreenCanvas和TransferToImageBitmap来优化这个效果：

在Worker线程中创建OffscreenCanvas，并在其中渲染粒子效果。
使用transferToImageBitmap将OffscreenCanvas的内容转换为ImageBitmap对象。
将ImageBitmap对象传递给主线程，并在主线程中将其绘制到Canvas上。

通过这种方式，我们可以将渲染压力转移到Worker线程中，从而提高动画的流畅度。

第六部分：踩坑经验分享

在使用OffscreenCanvas、TransferToImageBitmap和Transferable的过程中，我踩过不少坑，这里分享一些经验：

忘记将Transferable对象放在postMessage的第二个参数中： 这是一个非常常见的错误，会导致浏览器进行拷贝操作，而不是进行零拷贝传输。
忘记调用imageBitmap.close()： 这会导致内存泄漏，最终导致浏览器崩溃。
在Worker线程中访问DOM： OffscreenCanvas是在Worker线程中使用的，而Worker线程无法直接访问DOM。如果你需要在Worker线程中访问DOM，你需要使用postMessage将数据传递给主线程，然后在主线程中进行DOM操作。
兼容性问题： 并非所有浏览器都支持OffscreenCanvas、TransferToImageBitmap和Transferable。在使用这些API之前，你需要进行兼容性检查。

第七部分：总结与展望

OffscreenCanvas、TransferToImageBitmap和Transferable是前端性能优化的利器，它们可以帮助我们将渲染压力转移到Worker线程中，实现零拷贝传输，从而提高动画的流畅度。

当然，这些API也并非完美无缺，它们也存在一些限制和注意事项。我们需要在使用它们之前，充分了解它们的特性，并根据实际情况进行优化。

随着Web技术的不断发展，相信未来会出现更多更强大的API，帮助我们构建更加流畅、更加高效的Web应用。

好了，今天的讲座就到这里，希望对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复