前言
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 containerlayer.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() {// 绘制图形到SceneCanvasthis.drawScene();// 绘制图形到HitCanvasthis.drawHit();
}
实际上后续图形的绘制实际上是调用每个Shape的相应方法实现的，这里的处理逻辑就不展开。这里需要额外说明的是：Canvas渲染元素是全量渲染，即每次都需清空画布并重新绘制所有图形，实际上存在局部渲染的优化手段，但是在Konva中并没有相关机制，渲染方式是全量渲染，即内部会遍历所有图形对象一一绘制
总结
Konva对于图形的更新渲染逻辑与初始化时渲染逻辑是相同的，最后都会通过batchDraw来实现绘制逻辑，只是触发的来源不同而已。关于Konva的批量渲染机制需要注意如下几点：
- 使用requestAnimationFrame来延迟渲染逻辑
- 使用队列来存放实际的渲染逻辑，队列中渲染单元是以Layer图层对象为单位的，即animQueue = [Layer渲染逻辑, Layer渲染逻辑, …]
- 只有上一次的requestAnimationFrame回调处理完成后，才会开启下一轮渲染处理，以此实现整体渲染的自动处理，也可以手动调用Layer对象draw对象手动触发渲染
- Konva默认开启了自动渲染处理逻辑，即Konva.autoDrawEnabled = true，开启了自动渲染处理就无需手动调用Layer的draw相关方法
局部渲染是通过clip等手段来实现绘制变更区域的机制，对于大数据量下图形渲染非常有效，但相应的增加额外的判断逻辑。需要注意的是Konva底层并没有相关的局部渲染机制，每一次更新操作触发的都是全量渲染。
