lionleaf / lionleaf/dwitter

Make feed less heavy

Open
#393 6 comments 1 reaction 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.