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

perf: prevent layout thrashing on document drag

Browse source 
Swaps the order of DOM reads (getBoundingClientRect) and writes (classList.add) in the dragging onMove handler to prevent forced synchronous layouts.
This commit is contained in:
Horizontal42 2026-08-12 22:07:34 +03:00
parent e99e0eee55
commit 6ceca0c2b0
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/main.ts
View file

@ -112,13 +112,6 @@ function setupDocInteraction(el: HTMLElement, doc: DocMeta, list: HTMLElement, d
const startY = e.clientY; const startY = e.clientY;
let cachedItems: { el: HTMLElement, top: number, bottom: number }[] | null = null; let cachedItems: { el: HTMLElement, top: number, bottom: number }[] | null = null;
const onMove = (ev: MouseEvent) => { const onMove = (ev: MouseEvent) => {
if (!dragging) {
if (Math.abs(ev.clientY - startY) < 4) return;
dragging = true;
suppressClick = true;
el.classList.add("dragging");
document.body.style.cursor = "grabbing";
}
if (!cachedItems) { if (!cachedItems) {
const domItems = [...list.querySelectorAll<HTMLElement>(".doc-item")]; const domItems = [...list.querySelectorAll<HTMLElement>(".doc-item")];
cachedItems = domItems.map((item) => { cachedItems = domItems.map((item) => {
@ -126,6 +119,13 @@ function setupDocInteraction(el: HTMLElement, doc: DocMeta, list: HTMLElement, d
return { el: item, top: rect.top, bottom: rect.bottom }; return { el: item, top: rect.top, bottom: rect.bottom };
}); });
} }
if (!dragging) {
if (Math.abs(ev.clientY - startY) < 4) return;
dragging = true;
suppressClick = true;
el.classList.add("dragging");
document.body.style.cursor = "grabbing";
}
let over: HTMLElement | undefined; let over: HTMLElement | undefined;
for (const item of cachedItems) { for (const item of cachedItems) {
item.el.classList.remove("drag-over"); item.el.classList.remove("drag-over");