Horizontal42/summarum
1
0
Fork 0
mirror of https://github.com/Horizontal42/summarum.git synced 2026-11-11 01:02:01 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf: use DocumentFragment in renderDocList

Browse source 
Refactors renderDocList to use a DocumentFragment for batching element
insertions, preventing multiple reflows and repaints in the loop.

Co-authored-by: Horizontal42 <75383519+Horizontal42@users.noreply.github.com>
This commit is contained in:
google-labs-jules[bot] 2026-07-08 09:14:15 +00:00
parent 1b61ec35cc
commit 1dbcab67f5
2 changed files with 6 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.jules/bolt.md Normal file
View file

@ -0,0 +1,3 @@
## 2024-07-08 - Use DocumentFragment to batch DOM inserts
**Learning:** Batching DOM insertions using DocumentFragment reduces repaints and layout recalculations. While the exact performance impact relies on environment details (e.g. vitest+jsdom drops time by ~25%), it's a standard and safe optimization for large loops.
**Action:** Apply DocumentFragment before loops that append many elements to a live DOM container.

4
src/main.ts
View file

@ -97,6 +97,7 @@ function reorderDoc(srcId: string, targetId: string): void {
function renderDocList(): void {
const list = $("#doc-list");
list.replaceChildren();
const frag = document.createDocumentFragment();
for (const doc of data.docs) {
const el = document.createElement("div");
el.className = "doc-item" + (doc.id === data.activeId ? " active" : "") + (doc.pinned ? " pinned" : "");
@ -191,8 +192,9 @@ function renderDocList(): void {
saveAppData(data);
});
el.appendChild(del);
list.appendChild(el);
frag.appendChild(el);
}
list.appendChild(frag);
}
function switchDoc(id: string): void {