:card_index: Virtual List that only renders visible items. Supports millions of rows.
by developitJavaScript
Last 12 weeks · 0 commits
2 of 6 standards met
Is it my understanding from reading the code that overscan will "align" the {startIndex, endIndex} to modulo overscan. However, I can't really see how this reduces any work in the DOM - if a continuous scroll operation results in adding 10 rows, sync mode would add them one by one (in the worst case) and overscan mode would add something like 10 rows in one operations. That sounds to me like the same "amortized" amount of work. Could you please elaborate on why this approach is more performant in terms of DOM operations? Note: I do see an obvious perf optimization in not reconciling the entire visible viewport on each scroll event - but if I understand it correctly that is only VDOM work.
Repository: developit/preact-virtual-list. Description: :card_index: Virtual List that only renders visible items. Supports millions of rows. Stars: 232, Forks: 24. Primary language: JavaScript. Languages: JavaScript (100%). License: MIT. Homepage: https://jsfiddle.net/developit/qqan9pdo/ Latest release: 0.3.1 (9y ago). Open PRs: 1, open issues: 6. Last activity: 6y ago. Community health: 42%. Top contributors: developit.
What if I don't know row height? Or its variable for all rows?
Has been tested in a sandbox with link, package.json is taken from unistore's and here are the changes : added node 4 -> 10 in .travis.yml no more rollup config & all kind of other dependencies that were used for the old build system added bundlesize (744B) eslint with developit config unit & e2e test setup with jest (wip) example folder and example command to launch it