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 UI Grid 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 and jQquery offer a 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 jQuery and Angular, 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 and jQuery 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 UI Grid, Angular UI Grid 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.About Ideas2IT,Are you looking to build a great product or service? Do you foresee technical challenges? If you answered yes to the above questions, then you must talk to us. We are a world-class custom .NET development company. We take up projects that are in our area of expertise. We know what we are good at and more importantly what we are not. We carefully choose projects where we strongly believe that we can add value. And not just in engineering but also in terms of how well we understand the domain. Book a free consultation with us today. Let’s work together.
%20ChatDB_%20Transforming%20How%20You%20Interact%20with%20Enterprise%20Data.png)
%20Catalyzing%20Next-Gen%20Drug%20Discovery%20with%20Artificial%20Intelligence.png)
%20AI%20Agents_%20Digital%20Workforce%2C%20Reimagined.png)
%20How%20Generative%20AI%20Is%20Revolutionizing%20Customer%20Experience.png)
%20Leading%20LLM%20Models%20Comparison_%20What%E2%80%99s%20the%20Best%20Choice%20for%20You_.png)
%20Generative%20AI%20Strategy_%20A%20Blueprint%20for%20Business%20Success.png)
%20Mastering%20LLM%20Optimization_%20Key%20Strategies%20for%20Enhanced%20Performance%20and%20Efficiency.png)
.png)
.png)
.png)
.webp)
