perf: tidy svg frame bg render pass

packages/excalidraw/renderer/staticSvgScene.ts

@@ -720,26 +720,15 @@ export const renderSceneToSvg = (
     return;
   }
 
-  const renderedFrameBackgrounds = new Set<string>();
+  const nonIframeElements = elements.filter((el) => !isIframeLikeElement(el));
-  const maybeRenderFrameBackground = (
+  const frameBackgroundByElementId = new Map<
-    element: NonDeletedExcalidrawElement | ExcalidrawFrameLikeElement,
+    ExcalidrawElement["id"],
-  ) => {
+    ExcalidrawFrameLikeElement
-    if (
+  >();
-      !renderConfig.frameRendering.enabled ||
-      (!renderConfig.frameRendering.outline && !renderConfig.exportingFrame)
-    ) {
-      return;
-    }
-
-    const frame =
-      renderConfig.exportingFrame ||
-      (isFrameLikeElement(element)
-        ? element
-        : getContainingFrame(element, elementsMap));
 
+  const renderFrameBackgroundNode = (frame: ExcalidrawFrameLikeElement) => {
     if (
       !frame ||
-      renderedFrameBackgrounds.has(frame.id) ||
       !frame.backgroundColor ||
       isTransparent(frame.backgroundColor)
     ) {
@@ -777,19 +766,52 @@ export const renderSceneToSvg = (
     rect.setAttribute("stroke", "none");
 
     svgRoot.appendChild(rect);
+  };
+
+  if (
+    renderConfig.frameRendering.enabled &&
+    (renderConfig.frameRendering.outline || renderConfig.exportingFrame)
+  ) {
+    const renderedFrameBackgrounds = new Set<string>();
+    if (renderConfig.exportingFrame) {
+      renderFrameBackgroundNode(renderConfig.exportingFrame);
+      renderedFrameBackgrounds.add(renderConfig.exportingFrame.id);
+    }
+
+    const maybeQueueFrameBackground = (
+      element: NonDeletedExcalidrawElement | ExcalidrawFrameLikeElement,
+    ) => {
+      const frame = isFrameLikeElement(element)
+        ? element
+        : getContainingFrame(element, elementsMap);
+
+      if (
+        !frame ||
+        renderedFrameBackgrounds.has(frame.id) ||
+        !frame.backgroundColor ||
+        isTransparent(frame.backgroundColor)
+      ) {
+        return;
+      }
+
+      frameBackgroundByElementId.set(element.id, frame);
       renderedFrameBackgrounds.add(frame.id);
     };
 
-  if (renderConfig.exportingFrame) {
+    nonIframeElements.forEach((element) => {
-    maybeRenderFrameBackground(renderConfig.exportingFrame);
+      if (!element.isDeleted) {
+        maybeQueueFrameBackground(element);
+      }
+    });
   }
 
   // render elements
-  elements
+  nonIframeElements.forEach((element) => {
-    .filter((el) => !isIframeLikeElement(el))
-    .forEach((element) => {
     if (!element.isDeleted) {
-        maybeRenderFrameBackground(element);
+      const frameBackground = frameBackgroundByElementId.get(element.id);
+      if (frameBackground) {
+        renderFrameBackgroundNode(frameBackground);
+      }
       if (
         isTextElement(element) &&
         element.containerId &&