⚡ Bolt: [performance improvement] Prevent GC allocation and unnecessary DOM reflows in scroll event

.jules/bolt.md

@@ -69,3 +69,7 @@
 ## 2026-06-02 - Redundant hardware detection calls
 **Learning:** Calling `performanceManager.detectHardware()` repeatedly to check `isMobile` forces unnecessary recalculations of performance scores, CPU core counts, device memory, and connection types, wasting CPU cycles during initialization and UI interactions.
 **Action:** Always use the cached `performanceManager.hardware` object (e.g., `performanceManager.hardware.isMobile`) instead of invoking `detectHardware()` directly when checking system capabilities outside of the initial setup.
+
+## 2025-05-30 - Avoid forEach inside requestAnimationFrame
+**Learning:** Using Array iteration methods like `.forEach()` inside a `requestAnimationFrame` loop creates a new closure (function object) every single frame, leading to high garbage collection (GC) pressure and micro-stutters.
+**Action:** Replace `.forEach()`, `.map()`, and similar methods with standard `for` loops inside `requestAnimationFrame` loops or high-frequency event handlers. Also add dirty checks before modifying `classList` inside these loops to avoid unnecessary DOM mutation work.

src/scripts/script.js

@@ -3808,8 +3808,22 @@ document.addEventListener('DOMContentLoaded', () => {
                     }
                 }
 
-                navBtns.forEach(b => b.classList.remove('nav-active'));
-                activeBtn.classList.add('nav-active');
+                /**
+                 * ⚡ Bolt Performance Optimization
+                 * 💡 What: Replaced `.forEach()` with a `for` loop and added dirty checking for `.classList` updates.
+                 * 🎯 Why: `.forEach()` creates a new closure every frame, causing GC thrashing. Unconditional `.classList.remove()` and `.add()` can trigger unnecessary DOM mutation events even if the class is already set/removed.
+                 * 📊 Impact: Eliminates GC allocation per frame and reduces redundant DOM operations.
+                 */
+                for (let i = 0; i < navBtns.length; i++) {
+                    const btn = navBtns[i];
+                    if (btn.classList.contains('nav-active')) {
+                        btn.classList.remove('nav-active');
+                    }
+                }
+                if (!activeBtn.classList.contains('nav-active')) {
+                    activeBtn.classList.add('nav-active');
+                }
+
                 ticking = false;
             });
         }, { passive: true });