Konva批量渲染

前言

Konva作为优秀的Canvas渲染引擎之一，其内部存在很多优化策略，这些优化策略就是构建其高效的基石，批量渲染机制就是其中之一。批量渲染就是将多次更新操作合并为一次，减少渲染的次数。批量渲染机制在前端领域的应用非常广泛，像Vue、React等框架中都存在，例如Vue异步队列渲染等。

本篇文章探究Konva的渲染流程，Konva版本是v9.2.1。

Konva批量渲染

在之前的Konva基本处理流程文章中，基本处理流程中并没有图形相关渲染的处理，实际上这部分的处理都在Stage、Layer等对象的add实例方法中触发的。

以下面的案例进行流程分析：

      const stage = new Konva.Stage({
        container: "root",
        width: window.innerWidth,
        height: window.innerHeight,
      });

      const layer = new Konva.Layer();

      const WIDTH = 300;
      const HEIGHT = 300;
      function generateNode() {
        return new Konva.Circle({
          x: WIDTH * Math.random(),
          y: HEIGHT * Math.random(),
          radius: 50,
          fill: "red",
          stroke: "black",
        });
      }
      // 创建10个圆形图形
      for (var i = 0; i < 10; i++) {
        layer.add(generateNode());
      }
      stage.add(layer);

Layer、Stage容器类都具备add实例方法，相关的处理逻辑就需要具体分析。首先看Layer类的add实例方法处理逻辑，Layer继承自Container，其处理逻辑就是Container的实例方法，其处理逻辑具体如下：

add(...children) {
  ...
  const child = children[0];
  this.getChildren().push(child);
  ...
  this._requestDraw();
  
}

将图形对象添加到layer对象中，然后调用requestDraw实例方法，该方法的逻辑如下：

_requestDraw() {
  if (Konva$2.autoDrawEnabled) {
    const drawNode = this.getLayer() || this.getStage();
    drawNode === null || drawNode === void 0 ? void 0 : drawNode.batchDraw();
  }
}

如果Konvak开启autoDrawEnabled渲染属性，即自动渲染时就会调用layer对象或者stage对象的batchDraw实例方法，即批量渲染。layer对象的batchDraw实例方法的逻辑如下：

Util = {
  requestAnimFrame(callback) {
    animQueue.push(callback);
    if (animQueue.length === 1) {
      window.requestAnimationFrame(function () {
        const queue = animQueue;
        animQueue = [];
        queue.forEach(function (cb) { cb(); });
      });
    }
  }
}
batchDraw() {
  if (!this._waitingForDraw) {
    this._waitingForDraw = true;
    Util.requestAnimFrame(() => {
      this.draw();
      this._waitingForDraw = false;
    });
  }
  return this;
}

从上面代码可知，完全可以知道Konva批量渲染机制的大概处理流程：

• 当第一次渲染时_waitingForDraw为false，故而执行后续逻辑，其中_waitingForDraw被设置为true
• 将回调存入到animQueue队列中，此时队列中元素个数1，此时就会使用requestAnimationFrame延迟当前的绘制处理到浏览器下一次的浏览器渲染时
• 此时流程就会执行其他同步代码逻辑，包含图形对象的创建添加、更新图形对象相关属性等逻辑，此时上一次触发的渲染回调并延迟还没有被执行，_waitingForDraw为true，所以不会触发再次渲染
• 直至浏览器执行requestAnimationFrame方法，才会将_waitingForDraw设置为false，从而触发下一轮的更新渲染，所以只有上一次Konva渲染逻辑执行完成才会开启下一轮渲染

从这个流程出发，再去看Stage的add实例方法，相关逻辑如下：

add(layer) {
  ...
  super.add(layer);
  ...
  // draw layer and append canvas to container
  layer.draw();
  if (Konva$2.isBrowser) {
    this.content.appendChild(layer.canvas._canvas);
  }
  ...
}

Stage的add实例方法的主要逻辑如下三点：

• 调用Container类的add实例方法，即layer的add实例方法相同的逻辑，但是节点的batchDraw是Stage对象的，从源码逻辑可知本质上还是调用Layer对象的batchDraw
• Layer对应的draw调用，即渲染图形，batchDraw本质上就是调用该实例方法
• 将SceneCanvas对应的canvas图层到Stage的content节点上

无论是Stage还是Layer触发的渲染逻辑最后都是调用Layer的batchDraw，实际上在Konva中还有很多触发渲染的逻辑点，而batchDraw内部主要是调用Layer的draw方法来实现具体的渲染工作，具体逻辑如下：

draw() {
  // 绘制图形到SceneCanvas
  this.drawScene();
  // 绘制图形到HitCanvas
  this.drawHit();
}

实际上后续图形的绘制实际上是调用每个Shape的相应方法实现的，这里的处理逻辑就不展开。这里需要额外说明的是：Canvas渲染元素是全量渲染，即每次都需清空画布并重新绘制所有图形，实际上存在局部渲染的优化手段，但是在Konva中并没有相关机制，渲染方式是全量渲染，即内部会遍历所有图形对象一一绘制

总结

Konva对于图形的更新渲染逻辑与初始化时渲染逻辑是相同的，最后都会通过batchDraw来实现绘制逻辑，只是触发的来源不同而已。关于Konva的批量渲染机制需要注意如下几点：

• 使用requestAnimationFrame来延迟渲染逻辑
• 使用队列来存放实际的渲染逻辑，队列中渲染单元是以Layer图层对象为单位的，即animQueue = [Layer渲染逻辑, Layer渲染逻辑, …]
• 只有上一次的requestAnimationFrame回调处理完成后，才会开启下一轮渲染处理，以此实现整体渲染的自动处理，也可以手动调用Layer对象draw对象手动触发渲染
• Konva默认开启了自动渲染处理逻辑，即Konva.autoDrawEnabled = true，开启了自动渲染处理就无需手动调用Layer的draw相关方法

Konva的架构设计可以让开发者进行图形粒度的控制，开发者可以应用很多优化策略，比如：

• 开发者完全可以关闭自动渲染处理，通过分组以及手动触发渲染来实现
• 通常情况下是layer级别的渲染，但是Konva的架构设计也支持Group、Shape级别的渲染调用，即仅仅渲染对应图形以及分组而不是整体全量渲染，实际上Konva内部只要继承自Node的容器类以及图形类都执行渲染调用，即存在draw方法
• 离屏缓存cache机制

虽然可以应用多种优化策略保证效率，但是Konva底层并没有局部渲染机制，每一次更新操作触发的都是全量渲染，即重绘当前所有图形。局部渲染是通过clip等手段来实现只绘制变更区域的机制，对于大数据量下图形渲染非常有效，但相应的增加额外的判断逻辑。