Repository navigation
Millions? #4
Description
Hi @developit, was looking through the list of Preact Libraries & Add-ons and was struck by the phrasing that this library can handle "millions". I went to the demo to try with my browser, which took a while to load, I figured because it was generating a lot of data, but turns out it was only 100k rows... I'm skeptical this can handle the amount advertised.
Most of my skepticism is due to my experiments with HyperList a vanilla-js virtual scrolling tool, that has a demo w/ 2 million rows. This was incredibly hard to test and won't even work in some browsers due to max element height issues. Basically if you want a native scrollbar, you cannot have millions of rows working across various browsers. React Virtualized "solves" this, but not in an elegant way and severely breaks scrolling with the mouse (tries to offset more items based on where you are in the vertical scroll).
Just looking for clarification here. Is this library doing something different making it capable of rendering "millions", or is it just a marking claim that should be adjusted?
Thanks for your time!
Activity
developit commentedon Feb 6, 2017
Should probably be adjusted, since its using the native scrolling and has any limitations that has. I think the demo can do 1M rows given the small item height (22px). The millions of rows claim is true in the sense of supporting arbitrarily sized datasets (within the limits of JS Array size), but it's limited by the scrollbars as you noted.
I'm fine just adjusting the wording. I don't think anyone should be building UIs that show a million of anything, that would usually be an indication of broken UX.
tbranyen commentedon Feb 6, 2017
Yeah, I'm going to adjust the HyperList repository as well. Really it'd only be useful to do millions if you had a very specific, targeted, use case. TBQH I'm only being critical here because the code base is so incredibly tiny that I wanted to see it handle 2 million or more. It took me a while to get HyperList to hit 2 million and it was purely for demonstration purposes. If you try and render the demo it on a browser that can't handle it it will error out to the console.
developit commentedon Feb 6, 2017
Due to array limitations, or just the scrolling?
nojvek commentedon Apr 13, 2018
It can do 2 million just fine (for chrome). The scroll offsets can be a bit misleading though since
Although the way @developit was previously building array data was quite inefficient.
building an array with length means v8/charka can allocate a single contiguous memory, rather than multiple allocations and copies as the size keeps on growing.
But you are correct, max-height for webkit has a limit. It's a pretty crazy limit though.
at 10px you are looking at 13.4 million rows.
Max array size is 2^32-1, so about 4.3 billion rows can be inside an array.
If you wanted to be even crazier, you could use ArrayBuffer to represent data and use all available memory on machine, upto 9 petabytes and preact would still do its thing.
tbranyen commentedon Apr 13, 2018
@nojvek max height for Chrome is closer to 10 million pixels before artifacts show up. I don't know where you got a 134 million pixel count from, but that is easily debunked in practice and no where close to reality.
I'm also not sure why you think you can address 9 petabytes in the JS Heap, when limits are pretty small. You can measure the limits in Chrome by using
console.memory.jsHeapSizeLimitwhich is around 2GB on my 16GB machine.