perf: optimize workspace responsiveness via SVG caching and coalesced bounds checking (#6956)

* perf: optimize workspace responsiveness via SVG caching and coalesced bounds checking

This commit implements several performance optimizations:
- Implements memoization for base64Encode in musicutils.js to reduce SVG processing overhead.
- Adds an icon cache in palette.js to speed up category switching and search.
- Coalesces checkBounds calls in blocks.js during dragging using requestAnimationFrame.
- Removes redundant setTimeout throttle in activity.js for lower render latency.

* fix: remove duplicate escapeHTML method in ReflectionMatrix

Author: sapnilbiswas

js/activity.js

@@ -5010,42 +5010,8 @@ class Activity {
         let lastRefreshReport = performance.now();
 
         this.refreshCanvas = () => {
-            if (this.blockRefreshCanvas) {
-                return;
-            }
-
-            const start = window.__ENABLE_REFRESH_PROFILING__ ? performance.now() : 0;
-
-            this.blockRefreshCanvas = true;
             this.stageDirty = true;
             this.update = true;
-
-            const that = this;
-            setTimeout(() => {
-                that.blockRefreshCanvas = false;
-                that.stageDirty = true;
-
-                if (window.__ENABLE_REFRESH_PROFILING__) {
-                    const duration = performance.now() - start;
-                    refreshCount++;
-                    totalRefreshTime += duration;
-                    maxRefreshTime = Math.max(maxRefreshTime, duration);
-
-                    if (refreshCount % 25 === 0) {
-                        const now = performance.now();
-                        const cps = (25 / (now - lastRefreshReport)) * 1000;
-                        console.log(
-                            `refreshCanvas | Avg: ${(totalRefreshTime / refreshCount).toFixed(
-                                2
-                            )}ms | Max: ${maxRefreshTime.toFixed(2)}ms | Rate: ${cps.toFixed(
-                                1
-                            )} calls/sec`
-                        );
-                        maxRefreshTime = 0;
-                        lastRefreshReport = now;
-                    }
-                }
-            }, 5);
         };
 
         /*

js/blocks.js

@@ -1018,7 +1018,7 @@ class Blocks {
 
             if (this._deferCheckBoundsCount === 0 && this._checkBoundsPending) {
                 this._checkBoundsPending = false;
-                this.checkBounds();
+                this.scheduleCheckBounds();
             }
         };
 
@@ -2539,7 +2539,7 @@ class Blocks {
                 if (this._deferCheckBoundsCount > 0) {
                     this._checkBoundsPending = true;
                 } else {
-                    this.checkBounds();
+                    this.scheduleCheckBounds();
                 }
             } else {
                 console.debug("No container yet for block " + myBlock.name);
@@ -2565,7 +2565,7 @@ class Blocks {
                 if (this._deferCheckBoundsCount > 0) {
                     this._checkBoundsPending = true;
                 } else {
-                    this.checkBounds();
+                    this.scheduleCheckBounds();
                 }
             } else {
                 console.debug("No container yet for block " + myBlock.name);

js/palette.js

@@ -9,6 +9,8 @@
 // License along with this library; if not, write to the Free Software
 // Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA
 
+const _paletteIconCache = new Map();
+
 /* global
    docById, LEADING, DEFAULTPALETTE, MULTIPALETTES, platformColor,
    PALETTEICONS, MULTIPALETTEICONS, SKIPPALETTES, toTitleCase,
@@ -45,8 +47,20 @@ const paletteBlockButtonPush = (blocks, name, arg) => {
 // loadPaletteMenuItemHandler is the event handler for the palette menu.
 
 const makePaletteIcons = (data, width, height) => {
+    const key = `${data}_${width}_${height}`;
+    let src;
+    if (_paletteIconCache.has(key)) {
+        src = _paletteIconCache.get(key);
+    } else {
+        src = "data:image/svg+xml;base64," + window.btoa(base64Encode(data));
+        if (_paletteIconCache.size > 500) {
+            _paletteIconCache.clear();
+        }
+        _paletteIconCache.set(key, src);
+    }
+
     const img = new Image();
-    img.src = "data:image/svg+xml;base64," + window.btoa(base64Encode(data));
+    img.src = src;
     if (width) img.width = width;
     if (height) img.height = height;
     return img;

js/utils/musicutils.js

@@ -15,6 +15,8 @@
    _, last, DRUMNAMES, NOISENAMES, VOICENAMES, INVALIDPITCH, CUSTOMSAMPLES
 */
 
+const _b64Cache = new Map();
+
 /*
    Global Locations
     js/utils/utils.js
@@ -4133,9 +4135,16 @@ const GetNotesForInterval = tur => {
  * @returns {string} - The Base64 encoded string.
  */
 function base64Encode(str) {
+    if (_b64Cache.has(str)) {
+        return _b64Cache.get(str);
+    }
     const encoder = new TextEncoder();
     const uint8Array = encoder.encode(str);
     const binaryString = String.fromCharCode(...uint8Array);
+    if (_b64Cache.size > 1000) {
+        _b64Cache.clear();
+    }
+    _b64Cache.set(str, binaryString);
     return binaryString;
 }
 

js/widgets/reflection.js

@@ -737,7 +737,6 @@ class ReflectionMatrix {
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
     }
-
     /**
      * Sanitizes HTML content using DOMParser to prevent XSS.
      * Removes unsafe attributes and ensures links are safe.