Item browser performance improvements (mcmonkeyprojects#908)

bman654 · mcmonkey4eva · web-flow · commit 41aa98643667 · 2025-07-24T03:00:07.000-07:00
* image browser performance improvement - set initial aspect ratio of thumbnails

In most cases, we know the aspect ratio of the image we will be using as
the thumbnail.  By setting this aspect ratio when creating the thumbnail
element, we can avoid the reflow that occurs when the image loads.

In my test where I click Refresh while viewing folder c (in the a/b/c tree)
where c has 635 files and I have the profiler running (which slows things down)
this reduces the time from click to finish by about 20% (from 8s to 6.5s).  With debugger closed, the click-to-finish time is about 5s.

* Avoid repetitive reflow when triggering lazyload elements

* Defer adding title to an item until the mouse enters the item.

Converting HTML to text is expensive, and 99% of the time not needed.

* only set scrollOffset if the user had been scrolled.

* Optimize the fetching and updating during initial load and on refresh.

* Only render the files once after the folder tree has been fetched and expanded (original code was rendering files each fetch...so could be many many times)
* Only fetch the folders/files once if refreshing the root folder (original code was fetching 2x)
* Only fetch the folders/files twice if refreshing a subfolder (original code was fetching (1 + 1 * subfolderDepth).

* clean and simplify

* remove stray css edits

---------

Co-authored-by: Alex "mcmonkey" Goodwin &lt;git_commits@alexgoodwin.dev&gt;
diff --git a/src/wwwroot/css/genpage.css b/src/wwwroot/css/genpage.css
@@ -366,6 +366,8 @@ body {
 }
 .image-preview-text {
     font-family: var(--font-monospace);
+    min-width: 100%;
+    max-width: 0;
 }
 .current_model_view {
     display: inline-block;
diff --git a/src/wwwroot/js/genpage/gentab/imagehistory.js b/src/wwwroot/js/genpage/gentab/imagehistory.js
@@ -149,7 +149,8 @@ function describeImage(image) {
     let imageSrc = image.data.src.endsWith('.html') ? 'imgs/html.jpg' : `${image.data.src}?preview=true${allowAnimToggle}`;
     let searchable = `${image.data.name}, ${image.data.metadata}, ${image.data.fullsrc}`;
     let detail_list = [escapeHtml(image.data.name), formattedMetadata.replaceAll('<br>', '&emsp;')];
-    return { name, description, buttons, 'image': imageSrc, 'dragimage': dragImage, className: parsedMeta.is_starred ? 'image-block-starred' : '', searchable, display: name, detail_list };
+    let aspectRatio = parsedMeta.sui_image_params?.width && parsedMeta.sui_image_params?.height ? parsedMeta.sui_image_params.width / parsedMeta.sui_image_params.height : null;
+    return { name, description, buttons, 'image': imageSrc, 'dragimage': dragImage, className: parsedMeta.is_starred ? 'image-block-starred' : '', searchable, display: name, detail_list, aspectRatio };
 }
 
 function selectImageInHistory(image, div) {
diff --git a/src/wwwroot/js/genpage/helpers/browsers.js b/src/wwwroot/js/genpage/helpers/browsers.js
@@ -5,11 +5,11 @@ class BrowserUtil {
      * Make any visible images within a container actually load now.
      */
     makeVisible(elem) {
-        for (let subElem of elem.querySelectorAll('.lazyload')) {
-            let top = subElem.getBoundingClientRect().top;
-            if (top >= window.innerHeight + 512 || top == 0) { // Note top=0 means not visible
-                continue;
-            }
+        let elementsToLoad = Array.from(elem.querySelectorAll('.lazyload')).filter(e => {
+            let top = e.getBoundingClientRect().top;
+            return top != 0 && top < window.innerHeight + 512; // Note top=0 means not visible
+        });
+        for (let subElem of elementsToLoad) {
             subElem.classList.remove('lazyload');
             if (subElem.tagName == 'IMG') {
                 if (!subElem.dataset.src) {
@@ -95,6 +95,7 @@ class GenPageBrowserClass {
         this.rerenderPlanned = false;
         this.updatePendingSince = null;
         this.wantsReupdate = false;
+        this.noContentUpdates = false;
         this.checkIsSmall();
     }
 
@@ -142,6 +143,7 @@ class GenPageBrowserClass {
      * Clicks repeatedly into a path to fully open it.
      */
     clickPath(path) {
+        this.noContentUpdates = true;
         let tree = this.tree;
         if (!tree.isOpen) {
             tree.clickme(() => {
@@ -150,6 +152,8 @@ class GenPageBrowserClass {
             return;
         }
         if (path.length == 0) {
+            this.noContentUpdates = false;
+            this.rerender();
             return;
         }
         let split = path.split('/');
@@ -158,6 +162,8 @@ class GenPageBrowserClass {
                 continue;
             }
             if (!(part in tree.children)) {
+                this.noContentUpdates = false;
+                this.rerender();
                 return;
             }
             tree = tree.children[part];
@@ -168,6 +174,8 @@ class GenPageBrowserClass {
                 return;
             }
         }
+        this.noContentUpdates = false;
+        this.rerender();
     }
 
     /**
@@ -177,6 +185,9 @@ class GenPageBrowserClass {
         refreshParameterValues(true, () => {
             this.chunksRendered = 0;
             let path = this.folder;
+            this.folder = '';
+            let depth = this.depth;
+            this.noContentUpdates = true;
             this.update(true, () => {
                 this.clickPath(path);
             });
@@ -326,7 +337,7 @@ class GenPageBrowserClass {
             span.onclick = (e) => {
                 this.select(tree.fileData, null);
             };
-            tree.clickme = (callback) => span.onclick(null);
+            tree.clickme = (callback) => this.select(tree.fileData, callback);
         }
         else {
             let clicker = (isSymbol, callback) => {
@@ -431,11 +442,16 @@ class GenPageBrowserClass {
                 if (this.format.startsWith('Big')) { factor = 15; div.classList.add('image-block-big'); }
                 else if (this.format.startsWith('Giant')) { factor = 25; div.classList.add('image-block-giant'); }
                 else if (this.format.startsWith('Small')) { factor = 5; div.classList.add('image-block-small'); }
-                div.style.width = `${factor + 1}rem`;
-                img.addEventListener('load', () => {
-                    let ratio = img.width / img.height;
-                    div.style.width = `${(ratio * factor) + 1}rem`;
-                });
+                if (desc.aspectRatio) {
+                    div.style.width = `${(desc.aspectRatio * factor) + 1}rem`;
+                }
+                else {
+                    div.style.width = `${factor + 1}rem`;
+                    img.addEventListener('load', () => {
+                        let ratio = img.width / img.height;
+                        div.style.width = `${(ratio * factor) + 1}rem`;
+                    });
+                }
                 let textBlock = createDiv(null, 'image-preview-text');
                 textBlock.innerText = desc.display || desc.name;
                 if (this.format == "Small Thumbnails" || textBlock.innerText.length > 40) {
@@ -486,7 +502,7 @@ class GenPageBrowserClass {
                 div.appendChild(menu);
             }
             if (!this.format.includes('Cards')) {
-                div.title = stripHtmlToText(desc.description);
+                div.addEventListener('mouseenter', () => div.title = stripHtmlToText(desc.description), { once: true });
             }
             div.dataset.name = file.name;
             img.classList.add('lazyload');
@@ -717,14 +733,18 @@ class GenPageBrowserClass {
         this.headerCount.innerText = files.length;
         this.headerBar.appendChild(this.headerCount);
         this.buildTreeElements(this.folderTreeDiv, '', this.tree);
-        this.buildContentList(this.contentDiv, files);
-        this.folderTreeDiv.scrollTop = folderScroll;
-        browserUtil.makeVisible(this.contentDiv);
-        if (scrollOffset) {
-            this.contentDiv.scrollTop = scrollOffset;
-        }
         applyTranslations(this.headerBar);
-        applyTranslations(this.contentDiv);
+        if (!this.noContentUpdates) {
+            this.buildContentList(this.contentDiv, files);
+            browserUtil.makeVisible(this.contentDiv);
+            if (scrollOffset) {
+                this.contentDiv.scrollTop = scrollOffset;
+            }
+            applyTranslations(this.contentDiv);
+        }
+        if (folderScroll) {
+            this.folderTreeDiv.scrollTop = folderScroll;
+        }
         this.everLoaded = true;
         if (this.builtEvent) {
             this.builtEvent();

Original file line number	Diff line number	Diff line change
`@@ -366,6 +366,8 @@ body {`
`366`	`366`	`}`
`367`	`367`	`.image-preview-text {`
`368`	`368`	`font-family: var(--font-monospace);`
	`369`	`+ min-width: 100%;`
	`370`	`+ max-width: 0;`
`369`	`371`	`}`
`370`	`372`	`.current_model_view {`
`371`	`373`	`display: inline-block;`
Original file line number	Diff line number	Diff line change
`@@ -149,7 +149,8 @@ function describeImage(image) {`
`149`	`149`	let imageSrc = image.data.src.endsWith('.html') ? 'imgs/html.jpg' : `${image.data.src}?preview=true${allowAnimToggle}`;
`150`	`150`	let searchable = `${image.data.name}, ${image.data.metadata}, ${image.data.fullsrc}`;
`151`	`151`	`let detail_list = [escapeHtml(image.data.name), formattedMetadata.replaceAll('<br>', '&emsp;')];`
`152`		`- return { name, description, buttons, 'image': imageSrc, 'dragimage': dragImage, className: parsedMeta.is_starred ? 'image-block-starred' : '', searchable, display: name, detail_list };`
	`152`	`+ let aspectRatio = parsedMeta.sui_image_params?.width && parsedMeta.sui_image_params?.height ? parsedMeta.sui_image_params.width / parsedMeta.sui_image_params.height : null;`
	`153`	`+ return { name, description, buttons, 'image': imageSrc, 'dragimage': dragImage, className: parsedMeta.is_starred ? 'image-block-starred' : '', searchable, display: name, detail_list, aspectRatio };`
`153`	`154`	`}`
`154`	`155`
`155`	`156`	`function selectImageInHistory(image, div) {`