The IgniteUI™ grid, or igGrid, provides exceptional performance out-of-the box. Going beyond the default settings, however, gives you an opportunity to further increase the grid’s performance ability (without sacrificing functionality) in special cases.
Before learning about ways to adjust the grid to fine-tune performance, first get acquainted with some the underlying building blocks of the grid.
Rendering and Re-Rendering
Since the grid’s rendering lifecycle is entirely on the client, rendering and re-rendering of data incurs most of the processing overhead. Rendering boils down to generating HTML markup for the data source values, and appending this markup to the HTML data table. Once data is rendered and the grid needs to rebind itself (regardless of the source of rebind – explicit API call, a sorting/filtering operation through the UI, etc.), then the existing content of the grid must be cleared.
Clearing the grid involves carefully removing data, bound events or established references associated with each DOM element before removing it from the DOM tree. This clean-up process is usually an involved set of operations that affects performance, and is described in greater detail below.
Further, the grid supports two rendering modes. The first mode is a custom, high-performance rendering mode, and the second is using the Infragistics Templating Engine.
Data binding does introduce extra overhead, but the performance impact is negligible. Most modern browsers come equipped with native JSON parsing, which means that all JSON parsing, traversal, and transformation happen in a small fraction of the total processing time.
If the data source contains data values which are not directly suitable for rendering to the user, you often need to format the data for more appropriate display. The igGrid control includes a very rich set of format strings (patterns) available for both numbers and dates.
Grid features such as filtering, paging, sorting and the like do have an impact on grid performance. The processing time and memory overhead for operations such as filtering or sorting can be broken down into three parts:
- Perform the business logic (such as sorting or filtering data)
- Clear the existing records in the grid
- This operation can be intensive, if done properly to avoid memory leaks
- Render the new records in the grid
Enabling/Disabling Features (Initial Feature Setup and Rendering)
Some features tend to affect performance more than others. The differentiation arises because some features add additional UI elements and require additional processing behind the scenes during initialization. As an example, the sorting header indicators or the whole filter row (when mode=”simple”) are among the features that require some work during initialization. However, the performance penalty is usually a small fraction of the total processing time for rendering/re-rendering the grid.
The following section describes in detail each of the igGrid widget options and how they affect performance.
Performance-Related Widget Properties (Options)
virtualization (default: false)
Virtualization is a unique feature of the igGrid control that is simply stated as a technique that only renders visible parts of the grid to the user. Existing DOM elements are reused as the user scrolls the grid. When the grid is scrolling to view more data, new data is added to the grid in real time. “Real time” refers to the fact that no server-side requests are involved as all the data is waiting on the client not just the data shown upon initial rendering.
Using this approach, the rendering overhead, both time and memory usage, remains constant regardless of the number of records that are data-bound. The user experience still remains the same as if users are viewing all data at once. By enabling virtualization, a significant performance boost is available in terms of speed, CPU utilization, and memory.
Keep in mind that since virtualization takes control on the whole UI rendering, it could require an extra step at deployment or during development. You may need to define the average row height (avgRowHeight), which is tightly dependent on the height setting of the grid (virtualization cannot function if a height is not set on the grid).
Usually the avgRowHeight defines the number of visible records on the grid. For example:
- Grid height: 600, avgRowHeight: 30 => number of visible records in the viewport: 20
- Grid height: 600, avgRowHeight: 60 => number of visible records in the viewport: 10
Usually the grid is smart enough to render and fit the virtual UI without an explicit need for an avgRowHeight, but the details are important to consider.
Therefore consider that the bigger your grid height and the larger amount of visible records you have loaded at a time, the greater the likelihood that real-time scrolling performance will suffer. On the contrary, the smaller the height of the grid combined with a smaller number of visible records at a time results in faster scrolling.
Infragistics Templating Engine (rowTemplate, columns.template)
When rowTemplate (columns.template) is set (null by default), the Infragistics Templating Engine is used to render the contents of the grid.
When rowTemplate (columns.template) is disabled, a high performance approach is used to render the data by first adding strings consisting of the data and generated markup into an array. Then the array’s join method is called to produce the final grid markup. Using this approach, combined with the absence of template parsing overhead, results in a better performance than Infragistics Templating Engine. Avoiding the use of Infragistics Templating Enging can achieve approximately a 25% to 50% performance boost to the grid.
autoAdjustHeight (default: true)
If autoAdjustHeight is enabled (default), the height which is set on the grid (if any), is applied on the topmost grid container DIV. Then, if features such as paging or filtering are enabled, all other inner container sizes are subsequently calculated in order to calculate the scrolling container height of the element which holds all data rows.
This calculation is an expensive operation in most modern browsers (primarily FireFox and Internet Explorer), because it causes a reflow of the document. The DOM property which causes the reflow, simply by accessing it, is offsetHeight. Therefore, you can significantly increase the initial rendering time of the igGrid control by setting autoAdjustHeight to false.
Then autoAdjustHeight is disabled, the height specified as option during initialization is applied directly to the scrolling data container. Once the height is a known value then all other elements are added resulting in the final height of the grid. The ultimate height of the grid can more than the actual height setting depending on whether features such as paging or filtering enabled or whether fixedHeaders is enabled, and so on.
Figure 1: autoAdjustHeight - depicted
autoFormat (default: “date”)
By default, date values are automatically formatted before rendering. Other options for the autoFormat option are true, and false. When set to true the grid formats both date and number values, while false does not format any data values. The performance overhead of enabling or disabling autoFormat is relatively small.
alternateRowStyles (default: true)
When alternateRowStyles is enabled (default), every odd row receives a different style than every even row. This is implemented by setting a specific class name to every odd row. The performance overhead of enabling this feature is relatively small.
mode (Filtering) (default: simple)
When you have filtering enabled, and the filtering mode is set to simple. The filtering feature renders a filter row below the grid headers, which implies that there is a dedicated editor present for every column. As the number of columns increases, the performance benefit of using the advanced mode as compared to simple, could be significant.
Under advanced mode there is no filter row rendered on the grid and all filtering is achieved through the advanced filter dialog. This dialog is opened by clicking on a filter icon, which is rendered in the column header next to the sorting indicator
applySortedColumnCss (Sorting) (default: true)
When a column is sorted, by default all cells in that column get a specific CSS class applied to them to enable styling to signify a sorted column. In some circumstances, the grid’s performance may improve if this option is disabled. The overhead of enabling this option is usually very small.
- If you need to load more than 1,000 records at the a time in the grid and you select not to use paging or any similar feature, it is strongly advised that you enable row virtualization.
- If you do not need custom templates, then do not set rowTemplate or columns.template options, because they are implicilty using the Infragistics Templating Engine.
- If you must configure the grid with more than 20 columns, consider enabling column virtualization. By default, when virtualization is set to true it applies to both rows and columns.
- If you have grid filtering enabled in simple mode, and your grid renders more than 20 columns, consider using the advanced filtering mode. Advanced filtering only renders filtering editors on demand.
- If your data source contains thousands or millions of records and you would like to render all currently bound local data at once, the best way to achieve this is to enable paging.
- Even if you enable virtualization, be careful about the amount of data you transfer to the client. Large data sets sent to the client may turn out to be the bottleneck of your page. For example, the rough JSON size for 10,000 records for 5 columns is over 2 MB of uncompressed data for a single request. To accommodate this type of configuration you can enable paging with a large page size (ex: 1,000 records per page) and enable virtualization. This approach ensures that large amounts of JSON data are not transferred to the client at once. Additionally you benefit from having virtualization enabled on a per-page level basis.
- As often as possible enable gzip compression in your web server. This is a general guideline that will affect both download times, and bandwidth consumption.
- If your application does not impose specific height constraints on the grid, to set the autoAdjustHeight option to false as often as possible. Disabling this option guarantees that no additional reflows are required by the browser to calculate and size the inner containers of the grid.
- If you are not binding the grid to numeric or date columns, for which you need additional formatting, set autoFormat to false as often as possible. In the end the performance difference may be minimal, but if you are trying to fine-tune the grid for performance you may want to consider this option.