离屏渲染（OffscreenRendering）

1. 介绍：

离屏渲染（OffscreenRendering）是一种常见的性能优化策略，用于减少图形渲染的时间和复杂性。在此模式下，所有的渲染操作都会在当前屏幕视图之外的内存区域进行。只有当所有的渲染操作完成后，才会将最终的图像传输到屏幕上。
这种方式的一个重要好处是可以避免屏幕闪烁或者不必要的重绘，因为所有的渲染工作都是在后台完成的，用户不会看到半成品的渲染结果。 HTML5 的
OffscreenCanvas 就是离屏渲染技术的一个实例。它允许开发者在 Web Worker
线程中执行渲染操作，然后再将结果显示到屏幕上。这样可以把渲染过程从主线程中剥离出去，避免阻塞 UI 的运行。
另外，在OpenGL或WebGL等3D渲染环境中，离屏渲染也被广泛使用。例如，开发者可能会创建一个离屏缓冲区（Framebuffer
Object, FBO），在这个缓冲区里绘制3D场景，然后再将渲染结果呈现到屏幕上。这对于实现各种效果（如反射、阴影、模糊等）非常有用。
总的来说，离屏渲染是一个强大且灵活的工具，能提供更优雅和高效的渲染解决方案。但是，它也需要更多的内存和处理能力，所以在使用时需要权衡其利弊。

2. OffscreenCanvas 的基本使用示例如下：

• 首先，我们需要在主线程上创建 OffscreenCanvas，并传送给 worker：

var offscreen = document.querySelector('canvas').transferControlToOffscreen();
var worker = new Worker('worker.js');
worker.postMessage({
    canvas: offscreen }, [offscreen]);

• 接下来，在 worker 内部，我们可以像通常一样操作 Canvas：

self.onmessage = function(event) {
   
  var offscreen = event.data.canvas;
  var ctx = offscreen.getContext('2d');

  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, offscreen.width, offscreen.height);
};

3. 企业使用案例：

• 初始化需要绘制的canvas实例

initCanvas() {
   
this.canvas = this.$refs[`canvas${
     this.cameraIndex