When developing modern frontends, one of the key requirements is world class performance. We consider it to be one of the key UX criteria. Google thinks its important enough that it penalises pages that are slow.
We religiously look at the page weight as one of the factors to improve performance. And data heavy grids often contribute to page weight. So, we keep benchmarking various popular grids before each project.
Over the years, we have used everything from jQuery Datatable to more recent libraries like Angular UI Grid. In this blog, we are not trying to answer which one is the best every single time. Different use cases merit different choices. One could argue that Angular UI Grid and jQuery Datatable offer lot of built-in features out of the box such as sorting, column pinning, etc. and that is always useful when you are staring down some stringent timelines.
However, in our case, we needed a simple read-only grid where each row height aligned automatically to accommodate the contained text. We weren’t required to build any other features like infinite scroll, etc. We also needed to build a simple sorting logic for each of the column in the grid. Considering all the work we have done with Angular, we first went with Angular UI and we even tried implementing the same grid using jQuery Datatable. But, after all that, we decided to build a custom grid ourselves. Why did we do that? The one-word answer is performance!
Though, the grid developed using Angular UI Grid and jQuery Datatable, in theory, was simple and read-only, the grid was not performant on various browsers. As the number of rows in the table increase, the performance of the grid suffered. Pagination could only do so much. We tried tweaking Angular UI Grid and jQuery Datatable to eke performance out of them. We were marginally successful. Eventually, due to the simplicity of the grid we required, we implemented the grid ourselves using vanilla js and jQuery. It was perceivably faster.
As proper science, we took a task of benchmarking the performance so that we do not just rely on perception. We took a standard data set of 100 rows and 10 columns and measured the rendering time taken by the browser for each of the aforementioned solutions. The browser of choice was Chrome, because it has a beautiful feature of throttling CPU which can emulate older devices or even heavy load. After benchmarking, the average rendering times for each grid were in line with the perception.
The table below compares the performance of a similar grid designed using jQuery Datatable, Angular UI and custom grid, in both normal and 6x CPU throttled conditions.
Verdict: As you can see from the performance comparison above, the custom grid is a clear winner! And, pay attention to the performance under CPU throttled conditions.
So, for this particular use-case, where you are especially not looking for too many customized features, you could always resort to building a custom grid that does only what is required and not one bit more.