High-Performance Infinite List in JavaScript

#1

Post by roeierez » Mon, Jun 15, 2015, 5:44 AM UTC

High-Performance Infinite List in JavaScript
roeierez.github.io

Re: High-Performance Infinite List in JavaScript

#2

Post by roeierez » Mon, Jun 15, 2015, 5:45 AM UTC

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.

Re: High-Performance Infinite List in JavaScript

#3

Post by cheeaun » Mon, Jun 15, 2015, 5:47 AM UTC

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

Re: High-Performance Infinite List in JavaScript

#4

Post by roeierez » Mon, Jun 15, 2015, 5:54 AM UTC

cheeaun wrote: 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.

Re: High-Performance Infinite List in JavaScript

#5

Post by unwind » Mon, Jun 15, 2015, 7:26 AM UTC

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.

Re: High-Performance Infinite List in JavaScript

#6

Post by devin » Mon, Jun 15, 2015, 7:35 AM UTC

Well done. Thanks for posting.

Re: High-Performance Infinite List in JavaScript

#7

Post by anonymoushn » Mon, Jun 15, 2015, 7:47 AM UTC

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.

Re: High-Performance Infinite List in JavaScript

#8

Post by madeofpalk » Mon, Jun 15, 2015, 7:51 AM UTC

roeierez wrote: post #4

cheeaun wrote: 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.

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

Re: High-Performance Infinite List in JavaScript

#9

Post by M4v3R » Mon, Jun 15, 2015, 8:19 AM UTC

anonymoushn wrote: post #7

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.

Re: High-Performance Infinite List in JavaScript

#10

Post by wereHamster » Mon, Jun 15, 2015, 8:33 AM UTC

anonymoushn wrote: post #7

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.