Improve search and rendering performance on the cheats index page#5
Open
Rion-Kaneshiro wants to merge 1 commit intoTeeKay87:masterfrom
Open
Improve search and rendering performance on the cheats index page#5Rion-Kaneshiro wants to merge 1 commit intoTeeKay87:masterfrom
Rion-Kaneshiro wants to merge 1 commit intoTeeKay87:masterfrom
Conversation
Contributor
|
@Rion-Kaneshiro is attempting to deploy a commit to the pcgmr87-7705's projects Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hey, thanks for maintaining this collection. It's been super useful.
I noticed the index page at
list/index.htmlbecomes very sluggish during searches (typing a single letter freezes the UI for a noticeable moment), so I dug intoapp.jsand made a few changes to address it. All existing functionality is preserved (favorites, modal, deep-linking via hash, URL params, keyboard shortcuts).What was slow
With ~2,400 entries in
cheatslist.json, every keystroke triggered:cardsGrid.innerHTML = ''followed by cloning all matching entries as DOM cards<img>requesting cover art at?w=1024&thumb=false, so a fresh render fires up to 2,400 image requests at 1024px widthNo debounce on the input meant this happened on every single character typed.
Changes
?w=384for the grid,?w=1024is still used for the modal hero image. Roughly 80% less bandwidth and decode time per card.loading="lazy"+decoding="async"on every cover so the browser only fetches/decodes images near the viewport.cache: 'no-store'from the data fetches so the 2.8MBcheatslist.jsoncan actually be cached between page loads.idLower/titleLoweron each entry during load. These are referenced infilterEntries()and were being computed (or were absent) in the hot path.Testing
python3 -m http.server#PPSA01521-01.000.000still work, the back button behaves, and URL params (?q=...&view=favorites) round-trip properlyPossible follow-ups (not in this PR)
cheatslist.jsonso the full dataset doesn't re-download when generation hashes matchHappy to split this into smaller commits or adjust anything if you'd prefer a different approach. Cheers!