restructure and less wasted time while rendering

main.js

@@ -27,6 +27,8 @@ const pools = {
 
 };
 
+const stears = [];
+
 /** Stear class */
 export class Stear {
 
@@ -42,6 +44,13 @@ export class Stear{
     constructor(elem) {
         this.elem = elem;
         elem.style.position = "relative";
+        stears.push(this);
+    }
+    destroy() {
+        let i = stears.indexOf(this);
+        if (i == -1) return;
+        stears.splice(i, 1);
+        delete this;
     }
 
     /**
@@ -145,8 +154,7 @@ export class Stear{
      */
     static addAnimation(steps, name = "stearAnimation_" + counter++) {
         Stear.addGlobalStyleText(`@keyframes ${name} {
-${
-Object.entries(steps).map(([k,d])=>
+${Object.entries(steps).map(([k, d]) =>
             `   ${k} {
 ${Object.entries(d).map(d => "      " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")}
     }`).join("\n")
@@ -204,7 +212,7 @@ ${Object.entries(json).map(d => "    " + toCssAttr(d[0]) + ": " + d[1] + ";").jo
         Object.entries(pools).forEach(([k, d]) => {
             d.lang = lang;
         });
-        this.globalRenderRequest();
+        stears.forEach(s => s.rerenderGlobal());
     }
 
     /**
@@ -494,6 +502,8 @@ export class class_ {
     #find;
     #doBuild;
 
+    #dynamicState = 0;
+
     /**
      * Generate a new Stear render Node.
      * 
@@ -534,6 +544,7 @@ export class class_ {
     set childs(childs) {
         if (!this.#doBuild) return;
         this.#childs = Array.isArray(childs) ? childs : [childs];
+        this.#dynamicState = 0;
     }
 
     /**
@@ -555,6 +566,20 @@ export class class_ {
         }
     }
 
+    async #syncBuild(args) {
+        for (let i = 0; i < this.#childs.length; i++) {
+            let elem = this.#childs[i];
+
+            if (Array.isArray(elem)) {
+                for (let j = 0; j < elem.length; j++) {
+                    if (elem[j] instanceof class_) await elem[j].build(args);
+                }
+            } else {
+                if (elem instanceof class_) await elem.build(args);
+            }
+        }
+    }
+
     /**
      * Build Stear Structure
      * 
@@ -562,11 +587,15 @@ export class class_ {
      */
     async build(args) {
         if (!this.#doBuild) return;
+        if (this.#dynamicState < 0) return void await this.#syncBuild(args);
         this.#build = [];
         for (let i = 0; i < this.#childs.length; i++) {
             let elem = this.#childs[i];
 
-            if (typeof elem == "function") elem = (await elem(...args))??[];
+            if (typeof elem == "function") {
+                elem = (await elem(...args)) ?? [];
+                this.#dynamicState = 2;
+            }
 
             if (Array.isArray(elem)) {
                 for (let j = 0; j < elem.length; j++) {
@@ -578,6 +607,17 @@ export class class_ {
                 this.#build.push(elem);
             }
         }
+        if (this.#dynamicState <= 0) this.#dynamicState = -1;
+    }
+
+    #syncRender() {
+        let out = [];
+        for (let i = 0; i < this.#build.length; i++) {
+            const elem = this.#build[i];
+            if (typeof elem != "string" && !(elem instanceof LanguagePoolString)) {
+                out[i] = elem.render;
+            }
+        }
     }
 
     /**
@@ -587,15 +627,21 @@ export class class_ {
      */
     get render() {
         if (!this.#doBuild) return this.#elem;
-        this.#elem.innerHTML = "";
+        if (this.#dynamicState < -1) {
+            this.#syncRender();
+            return this.#elem;
+        }
+        let out = [];
         for (let i = 0; i < this.#build.length; i++) {
             const elem = this.#build[i];
             if (typeof elem == "string" || elem instanceof LanguagePoolString) {
-                this.#elem.appendChild(document.createTextNode(String(elem)));
+                out[i] = document.createTextNode(String(elem));
             } else {
-                this.#elem.appendChild(elem.render);
+                out[i] = elem.render;
             }
         }
+        this.#elem.replaceChildren(...out);
+        if (this.#dynamicState < 0) this.#dynamicState = -2;
         return this.#elem;
     }
 
@@ -606,6 +652,11 @@ export class class_ {
         return this.#elem;
     }
 
+    async rerender(args = []) {
+        await this.build(args);
+        this.render;
+    }
+
     /**
      * Returns find Object
      *