mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
google-labs-jules[bot]andPR0M3TH3AN
a0f893ace6
- Refactor `AmbientBackground` to use `ResizeObserver` instead of polling layout in animation loop. - Implement async chunking for `ExploreDataService` to prevent main thread blocking during heavy calculations. - Throttle `UrlHealthController` video probes to a maximum of 3 concurrent requests to prevent resource exhaustion. - Document optimization tasks in `OPTIMIZATION_TASKS.md`. Co-authored-by: PR0M3TH3AN <[email protected]>
51 lines
2.7 KiB
Markdown
51 lines
2.7 KiB
Markdown
# Optimization Task Stubs
|
|
|
|
The following tasks were identified and implemented to resolve high CPU/GPU usage and potential crashes on the website.
|
|
|
|
## Completed Tasks
|
|
|
|
### 1. Optimize Ambient Background Animation
|
|
**Problem:** The `AmbientBackground` controller was calling `resizeCanvas` inside the `requestAnimationFrame` loop. This function accessed `getBoundingClientRect()`, causing synchronous layout thrashing (forced reflow) on every frame, leading to high CPU/GPU usage.
|
|
**Fix:**
|
|
- Refactor `js/ui/ambientBackground.js` to use `ResizeObserver`.
|
|
- Only update canvas dimensions when the element actually resizes.
|
|
- Remove layout reads from the animation loop.
|
|
|
|
### 2. Async Chunking for Explore Data Service
|
|
**Problem:** `ExploreDataService` performed heavy synchronous iterations over large datasets (Watch History and Video Tags) on the main thread. This could cause the UI to freeze (long tasks) during initialization or updates.
|
|
**Fix:**
|
|
- Refactor `buildWatchHistoryTagCounts` and `buildTagIdf` in `js/services/exploreDataService.js`.
|
|
- Implement processing in chunks (e.g., 500 items).
|
|
- Yield to the main thread using `setTimeout` between chunks to allow user interaction and frame rendering.
|
|
|
|
### 3. Throttle URL Health Video Probes
|
|
**Problem:** The `UrlHealthController` spawned a `<video>` element for every video card to probe connectivity. When loading a grid of 50+ videos, this caused a storm of simultaneous media decoding requests, leading to resource exhaustion and browser instability.
|
|
**Fix:**
|
|
- Refactor `js/ui/urlHealthController.js`.
|
|
- Implement a concurrency limiter (queue) for `probeUrlWithVideoElement`.
|
|
- Limit active video probes to a maximum of 3 concurrent instances.
|
|
|
|
## Future Optimization Tasks
|
|
|
|
### 4. Virtualize Video List Rendering
|
|
**Description:** Implement virtual scrolling (windowing) for the main video grid.
|
|
**Benefit:** Reduces DOM node count and memory usage when displaying thousands of videos.
|
|
**Action:**
|
|
- Create a `VirtualScroller` component.
|
|
- Only render video cards that are currently in the viewport (plus a buffer).
|
|
|
|
### 5. Move Heavy Computation to Web Worker
|
|
**Description:** Move the tag IDF and Watch History analysis entirely off the main thread.
|
|
**Benefit:** Zero impact on UI responsiveness during data refreshes.
|
|
**Action:**
|
|
- Create `js/workers/exploreData.worker.js`.
|
|
- Move `ExploreDataService` logic into the worker.
|
|
- Use `postMessage` to send video data and receive calculated stats.
|
|
|
|
### 6. Optimize Image Loading with `loading="lazy"` & `decoding="async"`
|
|
**Description:** Ensure all thumbnails and avatars use modern browser lazy loading.
|
|
**Benefit:** Faster initial page load and lower bandwidth usage.
|
|
**Action:**
|
|
- Audit `VideoCard` and `VideoModal` templates.
|
|
- Ensure `<img>` tags have `loading="lazy"` and `decoding="async"`.
|