JavaScript内核与高级编程之：`JavaScript`的`OffscreenCanvas`：其在主线程外渲染动画。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位朋友，早上好！今天咱们来聊点刺激的—— OffscreenCanvas，一个能让你在主线程之外偷偷摸摸搞动画的神奇玩意儿。别误会，我说的“偷偷摸摸”可不是贬义，而是指它能避免主线程卡顿，让你的页面丝滑如德芙巧克力。

一、啥是OffscreenCanvas？

简单来说，OffscreenCanvas就像一个隐形的画布，它不在DOM树里，藏在幕后，你可以用它来绘制各种图形、动画，然后把绘制好的图像“搬运”到真正的<canvas>元素上显示出来。关键在于，这个绘制过程可以在Web Worker里进行，完全不占用主线程的时间。

想象一下，你的主线程就像一个繁忙的餐厅服务员，要处理各种用户交互、渲染页面等等。如果让他同时负责切菜、做饭，那肯定忙不过来。 OffscreenCanvas就像一个独立的厨房，专门负责做饭（绘制），做好了再交给服务员（主线程）端上桌。

二、为什么要用它？

原因很简单：性能！主线程卡顿是网页性能的大敌。复杂的动画、大量的计算都可能导致主线程阻塞，用户体验直线下降。 OffscreenCanvas 的出现，就是为了解决这个问题。

特性	`Canvas` (普通)	`OffscreenCanvas`
渲染线程	主线程	Web Worker线程
是否阻塞主线程	是	否
适用场景	简单图形、少量动画	复杂动画、高性能需求

三、怎么用？代码说话！

光说不练假把式，咱们直接上代码。先来个简单的例子：

1. HTML (主线程):

  <!DOCTYPE html>
  <html>
  <head>
    <title>OffscreenCanvas Example</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="300"></canvas>
    <script>
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');

      // 创建 Web Worker
      const worker = new Worker('worker.js');

      // 将 OffscreenCanvas 传递给 Worker
      const offscreen = canvas.transferControlToOffscreen();
      worker.postMessage({ canvas: offscreen }, [offscreen]);

      // 接收 Worker 绘制好的图像
      worker.onmessage = (event) => {
        if (event.data.type === 'render') {
          ctx.drawImage(event.data.image, 0, 0);
        }
      };
    </script>
  </body>
  </html>

2. JavaScript (Web Worker – worker.js):

  let offscreenCanvas;
  let offscreenCtx;

  self.onmessage = (event) => {
    if (event.data.canvas) {
      offscreenCanvas = event.data.canvas;
      offscreenCtx = offscreenCanvas.getContext('2d');

      // 开始绘制动画
      startAnimation();
    }
  };

  function startAnimation() {
    let x = 0;
    let y = 0;
    let dx = 2;
    let dy = 1;

    function draw() {
      offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);

      offscreenCtx.beginPath();
      offscreenCtx.arc(x, y, 20, 0, Math.PI * 2);
      offscreenCtx.fillStyle = 'red';
      offscreenCtx.fill();
      offscreenCtx.closePath();

      x += dx;
      y += dy;

      if (x + 20 > offscreenCanvas.width || x - 20 < 0) {
        dx = -dx;
      }
      if (y + 20 > offscreenCanvas.height || y - 20 < 0) {
        dy = -dy;
      }

      // 将绘制好的图像传递给主线程
      const image = offscreenCanvas.transferToImageBitmap();
      self.postMessage({ type: 'render', image: image }, [image]);

      requestAnimationFrame(draw);
    }

    draw();
  }

代码解释：

主线程：
- 获取 <canvas> 元素。
- 创建 Web Worker。
- 调用 transferControlToOffscreen() 方法，将 <canvas> 的控制权转移到 OffscreenCanvas，并把 OffscreenCanvas 传递给 Web Worker。注意： transferControlToOffscreen() 调用后，原canvas对象就不能用了。
- 监听 Web Worker 发来的消息，接收绘制好的图像，并使用 drawImage() 方法将其绘制到主线程的 <canvas> 上。
Web Worker：
- 接收主线程传递过来的 OffscreenCanvas。
- 获取 OffscreenCanvas 的 2D 渲染上下文。
- 在一个循环中不断绘制动画，并将绘制好的图像通过 transferToImageBitmap() 转换成 ImageBitmap 对象，然后传递给主线程。注意： transferToImageBitmap() 也是转移控制权，worker里的offscreenCanvas也就不能用了，所以每次绘制都要重新绘制。
- 使用 requestAnimationFrame() 方法，实现动画的流畅播放。
关键点：
transferControlToOffscreen()： 这个方法是关键，它将 <canvas> 的控制权转移到 OffscreenCanvas，并返回 OffscreenCanvas 对象。转移控制权意味着，主线程的canvas对象就没法用了。
transferToImageBitmap()： 这个方法将 OffscreenCanvas 的内容转换为 ImageBitmap 对象，并转移所有权。同样，转移所有权意味着，worker里的offscreenCanvas对象也废了，需要重新绘制。
postMessage()： 主线程和 Web Worker 之间通过 postMessage() 方法进行通信。注意传递 ImageBitmap对象的时候，需要指定第二个参数，表示传递所有权。

四、进阶用法：复杂动画与数据传递

上面的例子只是个简单的抛砖引玉，OffscreenCanvas 的潜力远不止于此。我们可以用它来处理更复杂的动画，例如：

粒子效果： 成千上万的粒子在屏幕上飞舞，如果放在主线程里，肯定卡成PPT。用 OffscreenCanvas 可以将粒子计算和绘制放在 Web Worker 里，解放主线程。
图像处理： 对大量图像进行滤镜、裁剪等操作，也可以放在 Web Worker 里，避免阻塞主线程。
3D 渲染： 虽然 OffscreenCanvas 主要用于 2D 渲染，但也可以与 WebGL 结合，实现高性能的 3D 动画。

数据传递：

在实际应用中，我们可能需要在主线程和 Web Worker 之间传递数据，例如：
用户输入： 将用户的鼠标、键盘事件传递给 Web Worker，让 Web Worker 根据用户输入来更新动画。
动画参数： 将动画的参数（例如：速度、颜色、大小）传递给 Web Worker，动态调整动画效果。

渲染结果： 将 Web Worker 绘制好的图像传递给主线程，进行显示。

示例：传递用户输入

1. HTML (主线程):

<!DOCTYPE html>
<html>
<head>
<title>OffscreenCanvas Example - Mouse Input</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  const worker = new Worker('worker.js');

  const offscreen = canvas.transferControlToOffscreen();
  worker.postMessage({ canvas: offscreen }, [offscreen]);

  canvas.addEventListener('mousemove', (event) => {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    // 将鼠标位置传递给 Worker
    worker.postMessage({ type: 'mouseMove', x: x, y: y });
  });

  worker.onmessage = (event) => {
    if (event.data.type === 'render') {
      ctx.drawImage(event.data.image, 0, 0);
    }
  };
</script>
</body>
</html>

2. JavaScript (Web Worker – worker.js):

let offscreenCanvas;
let offscreenCtx;
let mouseX = 0;
let mouseY = 0;

self.onmessage = (event) => {
if (event.data.canvas) {
  offscreenCanvas = event.data.canvas;
  offscreenCtx = offscreenCanvas.getContext('2d');
  startAnimation();
} else if (event.data.type === 'mouseMove') {
  mouseX = event.data.x;
  mouseY = event.data.y;
}
};

function startAnimation() {
function draw() {
  offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);

  offscreenCtx.beginPath();
  offscreenCtx.arc(mouseX, mouseY, 20, 0, Math.PI * 2);
  offscreenCtx.fillStyle = 'blue';
  offscreenCtx.fill();
  offscreenCtx.closePath();

  const image = offscreenCanvas.transferToImageBitmap();
  self.postMessage({ type: 'render', image: image }, [image]);

  requestAnimationFrame(draw);
}

draw();
}

在这个例子中，主线程监听鼠标移动事件，并将鼠标的位置传递给 Web Worker。 Web Worker 根据鼠标位置绘制一个圆形，并将绘制好的图像传递给主线程显示。

五、注意事项与最佳实践

数据序列化： 在主线程和 Web Worker 之间传递数据时，需要注意数据序列化的问题。有些数据类型无法直接传递，需要先进行序列化，再进行反序列化。例如： JSON.stringify() 和 JSON.parse()。
内存管理： 在使用 OffscreenCanvas 时，需要注意内存管理。及时释放不再使用的对象，避免内存泄漏。尤其是 transferToImageBitmap() 之后，一定要重新绘制，否则会看到一片空白。
调试： 调试 Web Worker 代码可能会比较麻烦。可以使用浏览器的开发者工具进行调试，例如：Chrome 的 Worker 面板。
性能测试： 在使用 OffscreenCanvas 之前，最好进行性能测试，看看是否真的能提升性能。有时候，简单的动画可能不需要 OffscreenCanvas，反而会增加代码的复杂度。

六、总结

OffscreenCanvas 是一个强大的工具，可以让你在主线程之外渲染动画，从而提升网页的性能。掌握 OffscreenCanvas 的使用方法，可以让你编写出更加流畅、高效的 Web 应用。但是，它也不是万能的，需要根据实际情况进行选择。记住：合适的才是最好的！

今天就先讲到这里，希望大家有所收获！下次有机会再跟大家分享更多有趣的技术。谢谢大家！

发表回复 取消回复

发表回复取消回复