

High-Performance Infinite List in JavaScript - roeierez
http://roeierez.github.io/infinite-list/

======
anonymoushn
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.

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

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

~~~
zachrose
Finally, a use for the HTTP SEARCH method?

------
unwind
This seems neat and advanced. Didn't try it since I'm not on a mobile device
at the moment though.

The submission could have used the word "scrolling" to make it clear this is
about UI lists.

I thought it was about an infinite list _data type_ , some variant of a
generator or something.

------
roeierez
Very High performance infinite list for mobile devices that besides GPU
acceleration uses concepts like recycling DOM elements and minimize rendering
tasks on low frame rate. All for the purpose of smooth scrolling.

~~~
shultays
I don't know much about html, what do you do in html for GPU acceleration? Is
not it enabled by default? Or there are some things that the programmer should
be aware of that highly impacts rendering due to GPU?

~~~
roeierez
This refers to a technique where each item is rendered on a different layer in
the page. Because of that, when moving an item to a new position it does not
require 'painting' the affected area. There are some style attributes that
causes the browser to create new layer for the HTML element like
'translate3d'. Tests proves that browser uses GPU for Compositing these layers
which is a lot faster when the CPU does this job. explained here more briefly:
[https://www.chromium.org/developers/design-documents/gpu-
acc...](https://www.chromium.org/developers/design-documents/gpu-accelerated-
compositing-in-chrome)

------
electrichead
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!

------
ArthurClemens
Just this morning I released a Mithril infinite list. It supports flexible
heights, list/grid, and handles batches of results (basically "pages"):
[https://github.com/ArthurClemens/mithril-
infinite](https://github.com/ArthurClemens/mithril-infinite)

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

~~~
roeierez
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.

~~~
madeofpalk
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

~~~
roeierez
got it, thanks.

------
devin
Well done. Thanks for posting.

