Make feed less heavy
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 803
- Forks
- 68
- PR merge metrics
- No merged PRs in 30d
Description
The feed is currently a big sluggish, I suspect because:
- It keeps creating new iframes and canvases. After you have viewed 4 pages of dweets, your window will have 40 iframes in the DOM, with 40 large canvases!
- When a new page of 10 dweets loads, 10 iframes are created _all at the same time_, and the first frame of each dweet is rendered too. This can make time-to-see-next-dweet quite large.
My suggestion:
- Keep a pool of maybe 20 iframes, and _re-use_ the old ones.
So for example, when we load dweet 21, we would actually re-use the iframe and canvas and dweet card HTML from the first dweet, which is now way off the top of the screen.
(We could do this by getting the `clientHeight` of the old dweet card, and changing that box into an empty div. Then we can set the new values into the old dweet card, and append the dweet card at the bottom of the page.)
(The pool size may need to adapt to the display, for example if someone has a monitor the same height as the Empire State Building.)
- Ideally, load the data for the next 10 dweets pre-emptively, but don't do anything with it. Wait until a dweet scrolls (nearly) into view, before creating/stealing its iframe. Wait until it is actually in view before rendering its first frame.
- Optional extra: Let me limit the pool size to 1, so the size of the DOM will be as small as realistically possible. (This would be a suitable mode for old phones with very little memory.)
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the feed's dweet-card rendering and scroll-loading entry points, then inspect how iframes, canvases, and card elements are created. The requested behavior is a bounded, reusable pool with deferred iframe creation and first-frame rendering; optional completion also supports a pool size of one. Verify behavior after several pages of scrolling and on a small display.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100