From f429a1c83c0b4090cd26cb51b6a4bf0f072be205 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 7 Mar 2026 16:26:00 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Use=20DocumentFragment=20fo?=
=?UTF-8?q?r=20batched=20DOM=20insertions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- In `public/index.html`'s `loadFiles()` function, DOM elements for each changed file were being appended sequentially to the container inside a `forEach` loop.
- Introduced `DocumentFragment` to batch all file item insertions. The individual `fileDiv`s are appended to the fragment, and then the fragment is appended to the container in one operation.
- This optimization eliminates O(N) layout thrashing and reflows, improving rendering performance for repositories with numerous staged/unstaged files.
Co-authored-by: PrakharMNNIT <73683289+PrakharMNNIT@users.noreply.github.com>
---
public/index.html | 11 ++++++++++-
1 file changed, 10 insertions(+), 1 deletion(-)
diff --git a/public/index.html b/public/index.html
index 44fbbc0..33cb4c7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1155,6 +1155,13 @@ No Staged Changes
container.innerHTML = '';
+ // ⚡ Bolt: Performance optimization
+ // Using a DocumentFragment batches all DOM element creations in memory.
+ // We append each file div to the fragment, then append the entire fragment
+ // to the DOM once at the end. This prevents O(N) layout thrashing and reflows
+ // that occur when appending elements sequentially inside the loop.
+ const fragment = document.createDocumentFragment();
+
// Enhanced file processing with better icons and metadata
data.files.forEach((file, index) => {
const fileId = file.replace(/[^a-zA-Z0-9]/g, '_');
@@ -1248,8 +1255,10 @@ No Staged Changes
`;
- container.appendChild(fileDiv);
+ fragment.appendChild(fileDiv);
});
+
+ container.appendChild(fragment);
} catch (error) {
document.getElementById('fileList').innerHTML = `