Performance Comparison: dgrid OnDemandGrid and Dojo Grid

By on January 24, 2013 9:22 am

SitePen’s dgrid project leverages the AMD loader and other features new since Dojo 1.7 to minimize the load and rendering times of dynamic grids in web applications. In this post, we conduct tests in four common scenarios for both dgrid and DojoX DataGrid, contrasting startup, render, and destroy times in several popular browsers. We also discuss the amount of code involved in loading common components of dgrid and DojoX DataGrid.

The demos below test each grid in three phases:

  1. Startup – the time required to create the instance of the grid, define the columns and any other configuration, and display the grid with headers but no data
  2. Render – the time required to process and present the first page of data in the grid (25 items); since both grids use lazy loading, render time for the first page is representative for all pages
  3. Destroy – the time taken to remove the grid’s DOM from the document, and perform any internal cleanup


In order to offer an accurate comparison, the following practices were established for each test:

  • Both grids use identical data and are rendered in a space with the same dimensions on the page. Since DojoX DataGrid only supports dojo/data stores, the ObjectStore module is used to wrap a Memory store. This may slightly influence timing of render tests, but it is still a legitimate factor when comparing the two implementations.
  • The steps have been verified to ensure that both grids are in the same state at the end of each of the three steps, as described above.
  • Testing is done sequentially: first the dgrid is tested, then the DojoX DataGrid.
  • For each operation, the start time is noted, the actions are performed, and the elapsed time is calculated. A total time is also included, representing the sum of the startup and render times, as the performance of these two operations combined is a common concern.
  • The time taken to load modules is not included in these performance comparisons. Payload size is discussed later, in the context of built layers.
  • All tests were run on the same machine, running Windows 7, with the exception of IE8 testing, which was conducted within a Windows XP VM on that machine. However, it is important to note that the objective of these tests is to compare the timings between the grid implementations on each browser, not necessarily to compare timings between browsers/platforms themselves.

All the demo pages are available for you to run, with the results displayed both on the page and in the browser console. The startup, render, and destroy tests all run immediately in sequence, so it’s likely you won’t actually see the grids on the page. However, the demo pages are also constructed such that you can easily copy the source code and pick apart the tests on your own Web server.

The first test is for a very basic grid. A Memory store is created with simple items containing only a name and a unique id. For a basic grid configured to only display the name field, the times to startup, render and destroy the grid are as follows:

 
 
Startup
Render
Total
Destroy
Firefox 16
dgrid DataGrid
8ms 24ms
24ms 50ms
32ms 74ms
0ms 4ms
Chrome 23
dgrid DataGrid
8ms 16ms
13ms 24ms
21ms 40ms
0ms 2ms
Internet Explorer 9
dgrid DataGrid
6ms 18ms
22ms 34ms
28ms 52ms
1ms 2ms
Internet Explorer 8
dgrid DataGrid
10ms 60ms
70ms 100ms
80ms 160ms
0ms 10ms

Run demo

Most grids include more columns and data. The second demonstration uses a larger store with more complex items, rendered in 6 columns; the times to startup, render the first 25 rows, and destroy are as follows:

 
 
Startup
Render
Total
Destroy
Firefox 16
dgrid DataGrid
10ms 29ms
44ms 78ms
54ms 107ms
1ms 4ms
Chrome 23
dgrid DataGrid
9ms 19ms
39ms 48ms
48ms 67ms
0ms 3ms
Internet Explorer 9
dgrid DataGrid
6ms 17ms
60ms 57ms
66ms 74ms
2ms 3ms
Internet Explorer 8
dgrid DataGrid
10ms 50ms
170ms 160ms
180ms 210ms
0ms 10ms

Run demo

Subrows can be used to further organize data such that each item’s data is presented across multiple table rows. The results of tests using the same data as the previous example in a grid with subrows are as follows:

 
 
Startup
Render
Total
Destroy
Firefox 16
dgrid DataGrid
10ms 26ms
47ms 77ms
57ms 103ms
1ms 4ms
Chrome 23
dgrid DataGrid
9ms 19ms
40ms 47ms
49ms 66ms
1ms 2ms
Internet Explorer 9
dgrid DataGrid
6ms 23ms
62ms 62ms
68ms 85ms
2ms 4ms
Internet Explorer 8
dgrid DataGrid
10ms 70ms
140ms 130ms
150ms 200ms
0ms 10ms

Run demo

ColumnSets (known as Views in the DojoX DataGrid) allow for even more complex organization of data. In addition to supporting subrows, they also support arranging data into sets of columns with independent horizontal scrolling. The results of tests using the same data as the previous example in a grid with two columnsets/views are as follows:

 
 
Startup
Render
Total
Destroy
Firefox 16
dgrid DataGrid
16ms 36ms
67ms 135ms
83ms 171ms
1ms 5ms
Chrome 23
dgrid DataGrid
10ms 22ms
56ms 73ms
66ms 95ms
2ms 4ms
Internet Explorer 9
dgrid DataGrid
9ms 23ms
98ms 101ms
107ms 124ms
3ms 5ms
Internet Explorer 8
dgrid DataGrid
10ms 60ms
271ms 310ms
281ms 370ms
10ms 20ms

Run demo

From the tests above, although results vary across browsers, we can easily conclude that dgrid shows the most significant advantage in terms of startup and destroy times, which are consistently over twice as fast as the startup times of the DojoX DataGrid. The relation between render times ranges between staying on par between the two implementations, and being up to twice as fast on modern browsers, especially in simple scenarios.

However, the results above reflect only the processing time through stages of the grids’ lifecycles. It is also important to consider the time and bandwidth required to load the necessary modules. The architecture of dgrid leaves it up to the developer to choose which mixins, column plug-ins, extensions, and utilities to load. On the other hand, DataGrid includes more functionality by default, which requires loading more code and performing more initial setup.

In a production environment, code for any modules used in an application should be built into layers using Dojo’s build system. The table below lists the size (in bytes) of the built code for layers containing the following modules and their dependencies:

  • dgrid’s OnDemandGrid
  • OnDemandGrid plus features equivalent to those DataGrid includes by default (namely the Keyboard, Selection, and ColumnSet mixins, as well as the ColumnReorder and ColumnResizer extensions)
  • DojoX DataGrid
  dgrid dgrid + features DataGrid
Minified 53,524 129,080 264,522
Minified + GZipped 18,815 42,597 80,707

For additional information about performing custom builds with dgrid, refer to our previous post on dgrid and Dojo’s nano build.

Bear in mind the objective of this post and these tests is to compare dgrid and DataGrid as accurately as possible, not the browsers or versions. You may wish to conduct additional tests with tools such as JSLitmus or benchmark.js.

Conclusion

dgrid performs more efficiently than DataGrid, which was one of the primary goals in its design. In addition, its modern architecture allows it to be easily extended and serve as a foundation for a wide variety of UI applications.

Comments