diff options
Diffstat (limited to 'frontend-vanilla/src/main.ts')
| -rw-r--r-- | frontend-vanilla/src/main.ts | 26 |
1 files changed, 14 insertions, 12 deletions
diff --git a/frontend-vanilla/src/main.ts b/frontend-vanilla/src/main.ts index 2be9354..75707ac 100644 --- a/frontend-vanilla/src/main.ts +++ b/frontend-vanilla/src/main.ts @@ -340,18 +340,20 @@ export function renderItems() { function checkReadItems(scrollRoot: HTMLElement) { const containerRect = scrollRoot.getBoundingClientRect(); - store.items.forEach((item) => { - if (item.read) return; - - const el = document.querySelector(`.feed-item[data-id="${item._id}"]`); - if (el) { - const rect = el.getBoundingClientRect(); - // Mark as read if the bottom of the item is above the top of the container - if (rect.bottom < containerRect.top) { - updateItem(item._id, { read: true }); - } + // Batch DOM query: select all feed items at once instead of O(n) individual + // querySelector calls with attribute selectors per scroll tick. + const allItems = scrollRoot.querySelectorAll('.feed-item'); + for (const el of allItems) { + const id = parseInt(el.getAttribute('data-id')!); + const item = store.items.find(i => i._id === id); + if (!item || item.read) continue; + + const rect = el.getBoundingClientRect(); + // Mark as read if the bottom of the item is above the top of the container + if (rect.bottom < containerRect.top) { + updateItem(item._id, { read: true }); } - }); + } } // Polling fallback for infinite scroll (matches V1 behavior) @@ -395,7 +397,7 @@ if (typeof window !== 'undefined') { } } - }, 1000); + }, 3000); } // ... (add this variable at module level or inside renderSettings if possible, but module level is safer for persistence across clicks if renderSettings re-runs? No, event flow is synchronous: click button -> click file input. User selects file. Change event fires. |
