Browse Source

replaceUndefinedAttributes 5x faster with caching (#4463)

(and probably comparatively even faster with more on-screen elements)

Test page:
[https://github.com/evnchn/nicegui-speed-investigation](https://github.com/evnchn/nicegui-speed-investigation)

Tested on /native/after_conn/basic
Before change: 

![image](https://github.com/user-attachments/assets/b6992390-84bd-4edf-91ee-1a815bb0c726)


After change: 

![image](https://github.com/user-attachments/assets/a77279b5-198d-4782-a5b7-8821b232d531)


For /native/after_conn/js, speed increase roughly lines up with
https://github.com/zauberzeug/nicegui/discussions/4457#discussion-8067069

I am lazy to take more screenshots 😅

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>
Chan Kei Ching 2 months ago
parent
commit
c89c66fa93
1 changed files with 3 additions and 9 deletions
  1. 3 9
      nicegui/static/nicegui.js

+ 3 - 9
nicegui/static/nicegui.js

@@ -19,11 +19,7 @@ function parseElements(raw_elements) {
   );
 }
 
-function replaceUndefinedAttributes(elements, id) {
-  const element = elements[id];
-  if (element === undefined) {
-    return;
-  }
+function replaceUndefinedAttributes(element) {
   element.class ??= [];
   element.style ??= {};
   element.props ??= {};
@@ -35,7 +31,6 @@ function replaceUndefinedAttributes(elements, id) {
     default: { ids: element.children || [] },
     ...(element.slots ?? {}),
   };
-  Object.values(element.slots).forEach((slot) => slot.ids.forEach((id) => replaceUndefinedAttributes(elements, id)));
 }
 
 function getElement(id) {
@@ -318,7 +313,7 @@ window.onbeforeunload = function () {
 };
 
 function createApp(elements, options) {
-  replaceUndefinedAttributes(elements, 0);
+  Object.entries(elements).forEach(([_, element]) => replaceUndefinedAttributes(element));
   setInterval(() => ack(), 3000);
   return (app = Vue.createApp({
     data() {
@@ -381,7 +376,6 @@ function createApp(elements, options) {
           const loadPromises = Object.entries(msg)
             .filter(([_, element]) => element && (element.component || element.libraries))
             .map(([_, element]) => loadDependencies(element, options.prefix, options.version));
-
           await Promise.all(loadPromises);
 
           for (const [id, element] of Object.entries(msg)) {
@@ -389,8 +383,8 @@ function createApp(elements, options) {
               delete this.elements[id];
               continue;
             }
+            replaceUndefinedAttributes(element);
             this.elements[id] = element;
-            replaceUndefinedAttributes(this.elements, id);
           }
         },
         run_javascript: (msg) => runJavascript(msg.code, msg.request_id),