Using the virtualization mechanism to improve the performance of the Grid

Consider a scenario wherein the service returns a large dataset that needs to be displayed in the Grid. For example, say the dataset has about 10,000 records. As explained earlier, a table row is created for each record in the DataSource object. In this case, there are 10,000 records, and creating a table row (tr) for each record would make the browser run out of memory. Creating 10,000 DOM nodes and then appending the same into the document tree would consume a lot of memory. One way to tackle this problem is to use virtualization. In virtualization, only a fixed set of nodes are created and when the user scrolls over the Grid, the existing nodes are updated to show the next set of records in DataSource. This way, we not only optimize the use of the browser memory by reusing the DOM node, but we also provide a smooth experience to the user while scrolling through a massive list.

How to do it…

The first step to virtualization...