a bit better performance

.gitignore

@@ -61,3 +61,6 @@ dwsync.xml
 intermediate
 publish
 .idea
+
+konva.js
+konva.min.js

src/Node.ts

@@ -2317,28 +2317,23 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   }
 
   _getProtoListeners(eventType) {
-    let listeners = this._cache.get(ALL_LISTENERS);
-    // if no cache for listeners, we need to pre calculate it
-    if (!listeners) {
-      listeners = {};
+    const allListeners = this._cache.get(ALL_LISTENERS) ?? {};
+    let events = allListeners?.[eventType];
+    if (events === undefined) {
+      //recalculate cache
+      events = [];
       let obj = Object.getPrototypeOf(this);
       while (obj) {
-        if (!obj.eventListeners) {
-          obj = Object.getPrototypeOf(obj);
-          continue;
-        }
-        for (var event in obj.eventListeners) {
-          const newEvents = obj.eventListeners[event];
-          const oldEvents = listeners[event] || [];
-
-          listeners[event] = newEvents.concat(oldEvents);
-        }
+        const hierarchyEvents = obj.eventListeners?.[eventType] ?? [];
+        events.push(...hierarchyEvents);
         obj = Object.getPrototypeOf(obj);
       }
-      this._cache.set(ALL_LISTENERS, listeners);
+      // update cache
+      allListeners[eventType] = events;
+      this._cache.set(ALL_LISTENERS, allListeners);
     }
 
-    return listeners[eventType];
+    return events;
   }
   _fire(eventType, evt) {
     evt = evt || {};

test/sandbox.html

@@ -37,20 +37,21 @@
       });
       const layer = new Konva.Layer();
       stage.add(layer);
-      const rect = new Konva.Rect({
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-        fill: 'red',
-        filters: [Konva.Filters.Blur],
-        blurRadius: 10,
-      });
-      layer.add(rect);
-      rect.cache();
-      setInterval(() => {
-        rect.blurRadius(rect.blurRadius() + 1);
-      }, 100);
+      console.time('load');
+      for (var i = 0; i < 30000; i++) {
+        const shape = new Konva.Circle({
+          x: Math.random() * stage.width(),
+          y: Math.random() * stage.height(),
+          radius: 10,
+          draggable: true,
+          fill: Konva.Util.getRandomColor(),
+        });
+        layer.add(shape);
+      }
+      console.timeEnd('load');
+      console.time('draw');
+      layer.draw();
+      console.timeEnd('draw');
     </script>
   </body>
 </html>