6 ms·

High-Performance Infinite List in JavaScript

28 points by roeierez 11y ago

cheeaun 11y ago
So this is only for touch-based devices? Trying scrolling with the mouse/trackpad, nothing happens :(
- roeierez 11y ago
  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 11y ago
    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 11y ago
      got it, thanks.
  - BruceM 11y ago
    It'd be interesting to see this as a desktop thing!
    - roeierez 11y ago
      Then it is added to the Roadmap. you can expect it in a couple of weeks.
roeierez 11y ago
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 11y ago
  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 11y ago
    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-accelerated-compositing-in-chrome https://www.chromium.org/developers/design-documents/gpu-acc...
unwind 11y ago
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.
devin 11y ago
Well done. Thanks for posting.
anonymoushn 11y ago
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.
- M4v3R 11y ago
  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.
  - anonymoushn 11y ago
    That would be cool! Right now the Facebook news feed does not provide a search feature.
- wereHamster 11y ago
  I wonder how you plan to support the browsers 'find' feature on an infinite list.
  - cultureulterior 11y ago
    This is also a problem on mobile wikipedia. I wonder if a feature for this shouldn't be added to browsers
    - zachrose 11y ago
      Finally, a use for the HTTP SEARCH method?
  - anonymoushn 11y ago
    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.
electrichead 11y ago
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 11y ago
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

28 points by roeierez 11y ago

cheeaun 11y ago

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

roeierez 11y ago
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 11y ago
  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 11y ago
    got it, thanks.
- BruceM 11y ago
  It'd be interesting to see this as a desktop thing!
  - roeierez 11y ago
    Then it is added to the Roadmap. you can expect it in a couple of weeks.

roeierez 11y ago

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 11y ago
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 11y ago
  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-accelerated-compositing-in-chrome https://www.chromium.org/developers/design-documents/gpu-acc...

unwind 11y ago

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.

devin 11y ago

Well done. Thanks for posting.

anonymoushn 11y ago

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.

M4v3R 11y ago
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.
- anonymoushn 11y ago
  That would be cool! Right now the Facebook news feed does not provide a search feature.
wereHamster 11y ago
I wonder how you plan to support the browsers 'find' feature on an infinite list.
- cultureulterior 11y ago
  This is also a problem on mobile wikipedia. I wonder if a feature for this shouldn't be added to browsers
  - zachrose 11y ago
    Finally, a use for the HTTP SEARCH method?
- anonymoushn 11y ago
  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.

electrichead 11y ago

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 11y ago

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