From 1362f00d39e90aef8a8338887222541a5a992178 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 18 Feb 2026 21:52:21 +0000 Subject: Fix theme performance regressions affecting mobile scroll The new theme CSS files introduced several patterns that cause scroll jank and memory pressure, especially on mobile: - terminal.css: Full-viewport fixed pseudo-element with repeating gradient scanlines forced GPU compositing on every scroll frame. Now limited to desktop only with will-change layer promotion. - codex.css/sakura.css: text-rendering: optimizeLegibility on body triggered expensive kerning/ligature computation on all text. - codex.css: font-feature-settings forced text shaper on every glyph. - codex.css: hyphens: auto required dictionary lookups during layout. - style.css: transition: all on buttons and sidebar links caused unnecessary animation work during scroll hover state changes. - main.ts: checkReadItems did O(n) individual querySelector calls per scroll tick; switched to single querySelectorAll batch query. - Polling interval reduced from 1s to 3s (scroll handler already covers the normal case, polling is just a robustness fallback). https://claude.ai/code/session_0187FXrbScDSWfbNEk9SfJaj --- frontend-vanilla/src/main.ts | 26 ++++++++++++++------------ frontend-vanilla/src/polling.test.ts | 6 +++--- frontend-vanilla/src/regression.test.ts | 4 ++-- frontend-vanilla/src/style.css | 4 ++-- 4 files changed, 21 insertions(+), 19 deletions(-) (limited to 'frontend-vanilla/src') 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. diff --git a/frontend-vanilla/src/polling.test.ts b/frontend-vanilla/src/polling.test.ts index fa4b62f..44ad7da 100644 --- a/frontend-vanilla/src/polling.test.ts +++ b/frontend-vanilla/src/polling.test.ts @@ -44,8 +44,8 @@ describe('Infinite Scroll Polling', () => { json: async () => [] } as Response); - // Wait for interval (1000ms) + buffer - await new Promise(resolve => setTimeout(resolve, 1100)); + // Wait for interval (3000ms) + buffer + await new Promise(resolve => setTimeout(resolve, 3100)); // Check if apiFetch was called expect(apiFetch).toHaveBeenCalledWith(expect.stringContaining('/api/stream')); @@ -58,7 +58,7 @@ describe('Infinite Scroll Polling', () => { Object.defineProperty(scrollRoot, 'clientHeight', { value: 200, configurable: true }); Object.defineProperty(scrollRoot, 'scrollTop', { value: 100, configurable: true }); - await new Promise(resolve => setTimeout(resolve, 1100)); + await new Promise(resolve => setTimeout(resolve, 3100)); expect(apiFetch).not.toHaveBeenCalled(); }); diff --git a/frontend-vanilla/src/regression.test.ts b/frontend-vanilla/src/regression.test.ts index 972b221..7f72ed5 100644 --- a/frontend-vanilla/src/regression.test.ts +++ b/frontend-vanilla/src/regression.test.ts @@ -202,8 +202,8 @@ describe('Scroll-to-Read Regression Tests', () => { // Dispatch scroll on WINDOW, not mainContent window.dispatchEvent(new Event('scroll')); - // Wait for potential debounce/poll - await new Promise(resolve => setTimeout(resolve, 1100)); + // Wait for potential debounce/poll (3000ms interval + buffer) + await new Promise(resolve => setTimeout(resolve, 3100)); // Expect it to handle it expect(apiFetch).toHaveBeenCalledWith(expect.stringContaining('/api/item/12345'), expect.objectContaining({ diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css index 0f7b909..fd51eff 100644 --- a/frontend-vanilla/src/style.css +++ b/frontend-vanilla/src/style.css @@ -163,7 +163,7 @@ html { padding: 0.3rem 0.8rem; margin: 0.1rem 0; border-radius: 8px; - transition: all 0.2s ease; + transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease; font-weight: 500; font-size: 0.85rem; /* Explicitly smaller sidebar links */ @@ -703,7 +703,7 @@ button, font-family: var(--font-heading); background-color: var(--bg-color); cursor: pointer; - transition: all 0.2s; + transition: background-color 0.2s, color 0.2s, border-color 0.2s; color: var(--text-color); text-decoration: none; display: inline-block; -- cgit v1.2.3