Hacker News Reader

The technique is called "windowing" and it's not extremely hard to implement properly. For react we have react-virtualized and react-window, and I'm sure there are other libraries for different UI frameworks.

I'm running infinite scroll in production serving thousands of photos and it works pretty well, constant 60fps, low memory consumption and you could literally scroll infinitely (given infinite content).

You have to be careful about which types of content you remove, though, to avoid breaking the browser’s Find. (Reddit is an example of a site that currently does this wrong.)

Do you know of any sites that do it correctly?

I've created various pages that sorta unrenders content, but all of them break the browser's find.

I don’t, sorry. If regular pagination is at all an option for you, that’s a safe and user-friendly choice.

This site does it: http://www.goodlist.co/

If you inspect you will notice that previous invisible items are represented by a single large div who's height increases as more items are scrolled out of view.

> previous invisible items are represented by a single large div

… breaking the browser’s Find. Also, things jump around the page as you scroll down. That site does it decidedly wrong.

I spent a lot of time on Reddit and have never seen infinite scroll on it except when I had the 3rd party plugin "Reddit Enhancement Suite" installed. Is it in the new layout they pushed out recently, or do you have RES installed?

The new layout for profile pages is where I noticed this problem. No RES.

At least Firefox does unload images outside the viewport. But it still has to store layout information of all the preceding elements to determine their placement in the document

Right now nightly says (9k posts)

    │  ├──434.20 MB (48.20%) -- top(<anonymized-4294967585>, id=4294967297)
    │  │  ├──429.00 MB (47.62%) -- active/window(<anonymized-4294967585>)
    │  │  │  ├──292.77 MB (32.50%) -- layout
    │  │  │  │  ├──109.99 MB (12.21%) ++ computed-values
    │  │  │  │  ├───77.96 MB (08.65%) ++ style-structs
    │  │  │  │  ├───71.80 MB (07.97%) ++ frames
    │  │  │  │  ├───23.33 MB (02.59%) ++ (8 tiny)
    │  │  │  │  └────9.70 MB (01.08%) ── text-runs
    │  │  │  ├──121.27 MB (13.46%) ++ dom
    │  │  │  ├────9.52 MB (01.06%) ── property-tables
    │  │  │  └────5.44 MB (00.60%) ++ (2 tiny)

Reloading the page with only 100 posts:

    │   ├───6.14 MB (04.16%) -- top(<anonymized-4294969763>, id=4294967297)
    │   │   ├──4.98 MB (03.38%) -- active/window(<anonymized-4294969763>)
    │   │   │  ├──2.82 MB (01.91%) ++ layout
    │   │   │  └──2.17 MB (01.47%) ++ (4 tiny)
    │   │   └──1.16 MB (00.78%) ++ js-zone(0x21964428000)

So at least in this case it's actually Layout and DOM nodes that dominate memory consumption, not the images or javascript.

I think Discourse does a nice job. It changes the URL in the address bar as you scroll down to viewed post ID, and I believe (but can't check now) that is has entire content loaded in the page, and just does the rendering of the viewport as you go down. Don't know how it handles 'JS disabled' case, though.

Discourse is one of my go-to examples of a terrible site that I will actively avoid. The find in page is terrible. It makes it impossible to find anything ever. Octoprint moved its documentation there and I'm really unhappy about it.

I like most things about discourse except the scrolling/loading. If you skip around with the bar on the side it's always loading where you skip to, which is fine, except it only loads what's in the viewport, no posts before/after, so if you skip back to a loaded part but you're off by one post, it does the loading thing again. Just feels weird.

Also I just double checked and it loads content as you scroll which I usually don't want for a forum.

I usually don't complain about the find feature with most infinite scroll sites but only because they don't hijack it. The find feature for discourse is AWFUL just awful.

There's an option on Tumblr desktop settings to disable endless scrolling. It's still terrible that it's only desktop mode, but it's still usable like that on mobile.

I don't actually log into tumblr itself. It's just I'll often stumble upon a blog through a search or a link, and every time I see a tumblr infinite scrolling theme (i think it's the default one?) I want to scream. The worst ones are the ones were even single posts have infinite scrolling. Ugh.

I don't use any social media to actually read much of anything I'm already following. I use all RSS feeds. No bloated interface. No blackhole of content. The RSS reader I use (inoreader) is technically infinite scrolling now that I think about it, but it's the only instance I don't mind because I usually read it on my desktop, I never scroll back up (I star anything interesting), and who searches new articles?, and there's a good search for finding things again which I almost never use.