Boosting JavaScript Tree Grid Performance with Virtualization
Tags: javascript, webdev, performance, productivity
Published: 2021-06-14 11:55:34

---
title: Boosting JavaScript Tree Grid Performance with Virtualization
published: true
date: 2021-06-11 10:00:04 UTC
tags: javascript, webdev, performance, productivity
canonical_url: https://www.syncfusion.com/blogs/post/boosting-javascript-tree-grid-performance-virtualization.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Boosting-JavaScript-Tree-Grid-Performance-with-Virtualization-672x372.png
---

Syncfusion [JavaScript Tree Grid](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid "Link to JavaScript Tree Grid") is a feature-rich control used to visualize self-referential hierarchical (or tree-like structure) data effectively in a tabular format. Its rich feature set includes many functionalities like data binding; editing; sorting; filtering; paging; exporting to Excel, CSV, and PDF formats; aggregating rows; and more. In this blog, we will see how to improve the performance of the JavaScript Tree Grid by enabling virtualization in it.

## Need for virtualization

The number of rows and columns in Tree Grid is the same as the number of DOM ([document object model](https://en.wikipedia.org/wiki/Document_Object_Model "Link to Document Object Model Wikipedia page"))  elements. Working with large DOM elements will often create performance lag, as the browser engines are incapable of handling large DOM elements. Regardless of how efficiently a component processes huge volumes of data, the browser’s engine needs to deliver a smooth webpage performance while working with large DOM elements. That’s why we created the **virtualization** feature in our JavaScript Tree Grid component.

Let’s see how the virtualization feature enhances the performance of the JavaScript Tree Grid control!

If you look at the following image, especially the vertical scrollbar, it appears that all of the records (25,000) are loaded with 25,000 DOM row elements.

![Virtualization in JavaScript Tree Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Virtualization-in-JavaScript-Tree-Grid.png)<figcaption>Virtualization in JavaScript Tree Grid</figcaption>

However, the Tree Grid will render only 150 row elements of the DOM. It won’t render the other row elements during the initial rendering, because the viewport is relatively small and limited. As a result, we lighten the browser’s load by minimizing the DOM elements and rendering elements only when we need them.

The Tree Grid renders the rows on demand when a user scrolls. Hence, it looks like a normal scrolling feature, but actually, the rows are rendered on-demand.

## Types of virtualization

We provide the following two modes of virtualization:

1. Virtual scrolling: Loads the row elements when the user begins to scroll.
2. Infinite scrolling: Loads the row elements when the scroll bar reaches the end of the page.

Now I’ll go over the behavior of each of these modes.

## Virtual scrolling

To provide a better experience, we render elements not only for the current viewport but also for the upcoming viewport. For example, we will render the set of row elements for the next three pages along with the current viewport.

To set up the row virtualization, you need to set the [enableVirtualization](https://ej2.syncfusion.com/documentation/api/treegrid/#enablevirtualization "Link to enablevirtualization property of JavaScript TreeGrid") property to true and the content height by [height](https://ej2.syncfusion.com/documentation/api/treegrid/#height "Link to height property of JavaScript TreeGrid") property.

By default, the Tree Grid renders 50 row elements for a viewport. You can customize this by using the **pageSize** property in the [pageSettings](https://ej2.syncfusion.com/documentation/api/treegrid/#pagesettings "Link to pageSettings property of JavaScript TreeGrid").

![Virtual Scrolling in JavaScript Tree Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Virtual-Scrolling-in-JavaScript-Tree-Grid.gif)<figcaption>Virtual Scrolling in JavaScript Tree Grid</figcaption>

**Note:** For more information, refer to the [Row Virtualization in JavaScript Tree Grid documentation](https://ej2.syncfusion.com/documentation/treegrid/virtual/#row-virtualization "Link to Row Virtualization in JavaScript Tree Grid documentation") and [demo](https://stackblitz.com/edit/hmczae-u9iwno?file=index.ts "Link to Row Virtualization in JavaScript Tree Grid demo on StackBlitz").

## Infinite scrolling

Most of us are familiar with how scrolling works on the Facebook webpage. This is a good example of infinite scrolling mode.

Whenever the user moves the scrollbar to the end of its track, Tree Grid will start to load the next set of row elements until all the records are rendered.

To use Infinite scrolling, set the [enableInfiniteScrolling](https://ej2.syncfusion.com/documentation/api/treegrid/#enableinfinitescrolling "Link to enableInfiniteScrolling property of JavaScript TreeGrid") property to true and inject the InfiniteScroll module in the Tree Grid.

![Infinite Scrolling in JavaScript Tree Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Infinite-Scrolling-in-JavaScript-Tree-Grid.gif)<figcaption>Infinite Scrolling in JavaScript Tree Grid</figcaption>

**Note:** For more information, refer to the [Infinite Scrolling in JavaScript Tree Grid documentation](https://ej2.syncfusion.com/documentation/treegrid/infinite-scroll/#infinite-scrolling "Link to Infinite Scrolling in JavaScript TreeGrid documentation") and [demo](https://stackblitz.com/edit/hmczae-dc7xrx?file=index.ts "Link to Infinite Scrolling in JavaScript TreeGrid demo on StackBlitz").

## Advantage of using virtualization in JavaScript Tree Grid

Finally, let’s look at the performance metrics of the JavaScript Tree Grid loading time for 25K records with and without virtualization. These performance metrics are also available in the sample demo link to which I linked previously.

| **Without Virtualization (Normal Scrolling)** | **Virtual Scrolling** | **Infinite Scrolling** |
| 6994 ms | 644 ms | 912 ms |

With virtualization, the JavaScript Tree Grid loading time is drastically reduced. So, make use of this wonderful feature and enhance your app performance.

## Conclusion

Thanks for reading! Now, you know how to further boost the performance of the [JavaScript Tree Grid](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid "Link to JavaScript Tree Grid") with the virtualization concept. This feature helps us reduce the loading time and memory used, too. Check out our [JavaScript Tree Grid online demos](https://ej2.syncfusion.com/demos/#/material/tree-grid/virtual-scrolling.html "Link to JavaScript Tree Grid online demos") and [documentation](https://ej2.syncfusion.com/documentation/treegrid/virtual/ "Link to Virtualization in JavaScript TreeGrid documentation") for detailed explanations and the facts you need to proceed further.

If you do not have a Syncfusion license, and you would like to try the Tree Grid component, you can download our [free trial](https://www.syncfusion.com/downloads/essential-js2/confirm "Link to the free evaluation of the Syncfusion Essential Studio for JavaScript").

The Syncfusion Tree Grid control is available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-tree-grid "Link to Blazor Tree Grid"), ASP .NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid "Link to ASP.NET Core Tree Grid"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid "Link to ASP.NET MVC Tree Grid"), [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/tree-grid "Link to ASP.NET Web Forms Tree Grid")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid "Link to JavaScript Tree Grid"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-tree-grid "Link to Angular Tree Grid"), [React](https://www.syncfusion.com/react-ui-components/react-tree-grid "Link to React Tree Grid"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-tree-grid "Link to Vue Tree Grid"), [UWP](https://www.syncfusion.com/uwp-ui-controls/treegrid "Link to UWP Tree Grid"), [WPF](https://www.syncfusion.com/wpf-ui-controls/treegrid "Link to WPF Tree Grid"), and [WinUI](https://www.syncfusion.com/winui-controls/treegrid "Link to WinUI Tree Grid") platforms. Try out these high-performance controls and leave your feedback in the comments section given below!

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/account/login "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Understanding Hierarchical and Self-Referential JSON Data Binding in Tree Grid](https://dev.to/karthickramasamy08/understanding-hierarchical-and-self-referential-json-data-binding-in-tree-grid-46mm-temp-slug-6522182 "Link to Understanding Hierarchical and Self-Referential JSON Data Binding in Tree Grid blog")
- [Bind Remote Data and Enable Virtual Scrolling in JavaScript Pivot Table](https://dev.to/syncfusion/how-to-bind-remote-data-and-enable-virtual-scrolling-in-javascript-pivot-table-3ah7 "Link to How to Bind Remote Data and Enable Virtual Scrolling in JavaScript Pivot Table blog")
- [Bulk Edit Columns in JavaScript DataGrid](https://dev.to/syncfusion/how-to-bulk-edit-columns-in-javascript-datagrid-3jkb "Link to How to Bulk Edit Columns in JavaScript DataGrid blog")
- [JavaScript Spreadsheet Chart Feature Overview](https://dev.to/karthickramasamy08/javascript-spreadsheet-chart-feature-overview-503h-temp-slug-180120 "Link to JavaScript Spreadsheet Chart Feature Overview blog")