I first started playing around with virtual scrolling/rendering using angular1.x and ng-repeat. I made a directive that would calculate the scroll position, pull records from an array and then the render them in the viewport. I am a big supporter of angular, but it was not the correct tool for this project. Angular 1.x had too much overhead and caused the scrolling to be slow and jerky. (I will be doing a test using Angular 2 very soon) I then built a quick test using plain JS with some Jquery selectors and was able to scroll through 300K records without any performance issues.
The few lines of Javascript above turned into a 8000 line JS component for a large financial application. The goal of the program was to allow financial users to work in their preferred environment “Excel”. The program mimics Excel’s functionality while allowing users to pull and push live data from a number of different systems. Users can analyze, sort, filter, pivot and edit financial data in a flexible data driven environment. The system allows users to have multiple grids/sheets open and have them all be updated in real time via websockets.
» JavaScript, Uncategorized » Virtual Scrolling/Rendering
About the Author: heathstein
