optimize js mutation callbacks

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log for SD.Next
 
-## Update for 2024-05-15
+## Update for 2024-05-16
 
 - **Features**:
   - **ModernUI** preview of the new [ModernUI](https://github.com/BinaryQuantumSoul/sdnext-modernui)  
@@ -116,6 +116,7 @@
   - Updated all system requirements  
   - UI log monitor will auto-reconnect to server on server restart  
   - UI styles includes indicator for active styles  
+  - UI reduce load on browser  
   - Secondary sampler add option "same as primary"  
   - Change attention mechanism on-the-fly without model reload, thanks @Disty0  
   - Update stable-fast with support for torch 2.2.2 and 2.3.0, thanks @Aptronymist

TODO.md

@@ -64,6 +64,7 @@ For more details see: [Changelog](https://github.com/vladmandic/automatic/blob/d
 - animatediff-sdxl <https://github.com/huggingface/diffusers/pull/6721>
 - async lowvram: <https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/14855>
 - fp8: <https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/14031>
+- profiling: <https://github.com/lllyasviel/stable-diffusion-webui-forge/discussions/716>
 - init latents: variations, img2img
 - diffusers public callbacks  
 - include reference styles

javascript/progressBar.js

@@ -59,9 +59,11 @@ function setProgress(res) {
     const el = document.getElementById(elId);
     if (el) {
       el.innerText = (res ? `${job} ${perc} ${eta}` : 'Generate');
-      el.style.background = res && (progress > 0)
-        ? `linear-gradient(to right, var(--primary-500) 0%, var(--primary-800) ${perc}, var(--neutral-700) ${perc})`
-        : 'var(--button-primary-background-fill)';
+      if (!window.waitForUiReady) {
+        el.style.background = res && (progress > 0)
+          ? `linear-gradient(to right, var(--primary-500) 0%, var(--primary-800) ${perc}, var(--neutral-700) ${perc})`
+          : 'var(--button-primary-background-fill)';
+      }
     }
   }
 }

javascript/script.js

@@ -96,27 +96,35 @@ let executedOnLoaded = false;
 const ignoreElements = ['logMonitorData', 'logWarnings', 'logErrors', 'tooltip-container', 'logger'];
 const ignoreClasses = ['wrap'];
 
+let mutationTimer = null;
+let validMutations = [];
 async function mutationCallback(mutations) {
-  let validMutations = mutations;
-  validMutations = validMutations.filter((m) => m.target.nodeName !== 'LABEL');
-  validMutations = validMutations.filter((m) => ignoreElements.indexOf(m.target.id) === -1);
-  validMutations = validMutations.filter((m) => m.target.id !== 'logWarnings' && m.target.id !== 'logErrors');
-  validMutations = validMutations.filter((m) => !m.target.classList?.contains('wrap'));
+  let newMutations = mutations;
+  if (newMutations.length > 0) newMutations = newMutations.filter((m) => m.target.nodeName !== 'LABEL');
+  if (newMutations.length > 0) newMutations = newMutations.filter((m) => ignoreElements.indexOf(m.target.id) === -1);
+  if (newMutations.length > 0) newMutations = newMutations.filter((m) => m.target.id !== 'logWarnings' && m.target.id !== 'logErrors');
+  if (newMutations.length > 0) newMutations = newMutations.filter((m) => !m.target.classList?.contains('wrap'));
+  if (newMutations.length > 0) validMutations = validMutations.concat(newMutations);
   if (validMutations.length < 1) return;
 
-  if (!executedOnLoaded && gradioApp().getElementById('txt2img_prompt')) { // execute once
-    executedOnLoaded = true;
-    executeCallbacks(uiLoadedCallbacks);
-  }
-  if (executedOnLoaded) { // execute on each mutation
-    executeCallbacks(uiUpdateCallbacks, mutations);
-    scheduleAfterUiUpdateCallbacks();
-  }
-  const newTab = getUICurrentTab();
-  if (newTab && (newTab !== uiCurrentTab)) {
-    uiCurrentTab = newTab;
-    executeCallbacks(uiTabChangeCallbacks);
-  }
+  if (mutationTimer) clearTimeout(mutationTimer);
+  mutationTimer = setTimeout(async () => {
+    if (!executedOnLoaded && gradioApp().getElementById('txt2img_prompt')) { // execute once
+      executedOnLoaded = true;
+      executeCallbacks(uiLoadedCallbacks);
+    }
+    if (executedOnLoaded) { // execute on each mutation
+      executeCallbacks(uiUpdateCallbacks, mutations);
+      scheduleAfterUiUpdateCallbacks();
+    }
+    const newTab = getUICurrentTab();
+    if (newTab && (newTab !== uiCurrentTab)) {
+      uiCurrentTab = newTab;
+      executeCallbacks(uiTabChangeCallbacks);
+    }
+    validMutations = [];
+    mutationTimer = null;
+  }, 50);
 }
 
 document.addEventListener('DOMContentLoaded', () => {