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相关方法

局部渲染是通过clip等手段来实现绘制变更区域的机制,对于大数据量下图形渲染非常有效,但相应的增加额外的判断逻辑。需要注意的是Konva底层并没有相关的局部渲染机制,每一次更新操作触发的都是全量渲染。不可否认是局部渲染可以大大提高渲染性能,但是其增加了计算逻辑,有些场景下可能比全量渲染性能还差。

那么Konva对于大数据量下相关场景的渲染处理就很差吗?实际上并不是,Konva的架构设计可以让开发者进行图形粒度的控制,开发者可以应用很多优化策略,比如:

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

你可能感兴趣的:(图形渲染相关,javascript,ecmascript,konva,批量渲染,batchDraw)