Live data from Hacker News

High-Performance Infinite List in JavaScript

roeierez.github.io

11–20 of 24 posts

Re: High-Performance Infinite List in JavaScript

#11
post #4

Earlier quoted context omitted.

for now yes. If you say you need it for desktop I am willing to add this support, it should be easy. to see the scrolling effect now you can simply drag or flick the list even from desktop.

Small recommendation - make the demo more obvious. I skimmed through the article looking for it and couldn't find it until I hit Cmd + F

got it, thanks.

Re: High-Performance Infinite List in JavaScript

#12
post #4
post #3

So this is only for touch-based devices? Trying scrolling with the mouse/trackpad, nothing happens :(

for now yes. If you say you need it for desktop I am willing to add this support, it should be easy. to see the scrolling effect now you can simply drag or flick the list even from desktop.

It'd be interesting to see this as a desktop thing!

Re: High-Performance Infinite List in JavaScript

#13

Rendering to the DOM only what the user can see unfortunately breaks the browser's "find" feature. I hope that this technique does not become more popular than it already is. That way the rest of the web, other than Facebook's news feed, can continue to be searchable.

I wonder how you plan to support the browsers 'find' feature on an infinite list.

This is also a problem on mobile wikipedia. I wonder if a feature for this shouldn't be added to browsers

Re: High-Performance Infinite List in JavaScript

#14
All the demos items are the same height. A big problem I have seen in the past has been with items with varying height. This makes it difficult to swap in new content because you don't know the height ahead of time. It might make for a a more impressive demo if you include random text in those cards. I haven't looked through the source yet since I am on a mobile device, but if you managed to solve that pain point, great work!

Re: High-Performance Infinite List in JavaScript

#16

Rendering to the DOM only what the user can see unfortunately breaks the browser's "find" feature. I hope that this technique does not become more popular than it already is. That way the rest of the web, other than Facebook's news feed, can continue to be searchable.

This cannot be solved by the infinite list itself, because by definition it needs to throw out unneeded content (otherwise it would just grow in memory). A search field on top of the list could talk to the server and retrieve the filtered elements.

Re: High-Performance Infinite List in JavaScript

#17

Rendering to the DOM only what the user can see unfortunately breaks the browser's "find" feature. I hope that this technique does not become more popular than it already is. That way the rest of the web, other than Facebook's news feed, can continue to be searchable.

I wonder how you plan to support the browsers 'find' feature on an infinite list.

For the Facebook news feed, I think it's reasonable to expect to be able to search for text you have scrolled past. Some infinite lists, like the Twitter news feed, or the Facebook page page (I don't know, the feed of all posts of a "Facebook page") work like this. They just leave all the text in the DOM.

Re: High-Performance Infinite List in JavaScript

#18
post #9

Rendering to the DOM only what the user can see unfortunately breaks the browser's "find" feature. I hope that this technique does not become more popular than it already is. That way the rest of the web, other than Facebook's news feed, can continue to be searchable.

This kind of component in my mind is usually used in web applications, which then will also supply own search for you, which should be more robust than your browser find feature.

That would be cool! Right now the Facebook news feed does not provide a search feature.

Re: High-Performance Infinite List in JavaScript

#19

Rendering to the DOM only what the user can see unfortunately breaks the browser's "find" feature. I hope that this technique does not become more popular than it already is. That way the rest of the web, other than Facebook's news feed, can continue to be searchable.

This cannot be solved by the infinite list itself, because by definition it needs to throw out unneeded content (otherwise it would just grow in memory). A search field on top of the list could talk to the server and retrieve the filtered elements.

Does this thing actually throw out not-in-view items entirely, and then ask the server for them again when the user scrolls up? That would be surprising. The memory overhead of the out-of-view items, after they are removed from the DOM, is probably pretty small.

Re: High-Performance Infinite List in JavaScript

#20

Earlier quoted context omitted.

This cannot be solved by the infinite list itself, because by definition it needs to throw out unneeded content (otherwise it would just grow in memory). A search field on top of the list could talk to the server and retrieve the filtered elements.

Does this thing actually throw out not-in-view items entirely, and then ask the server for them again when the user scrolls up? That would be surprising. The memory overhead of the out-of-view items, after they are removed from the DOM, is probably pretty small.

You are right, the pages data that is fetched from the server is kept in memory for future rendering, which usually does not cause memory problems. It is up to the user how to implement search, either by searching in-memory, or change the query and reload the list.
Post reply on HN