Tips To Improve API Performance

Here are some tips to improve the performance of huge data page and virtual scrolling concept in angular.

Some tips to improve the performance of huge data request via an API.

 

Improve API response time

 

Sometimes we can observe that API returns the response in more than 10 seconds. So below are some tips to improve the performance or way to reduce the response time.

1. Add cluster and Non-cluster indexes
   Whenever we increase the load on the server, indexes improve the performance. As we all know that we can add one cluster index and more than one non-cluster indexes in the table.
   
   A database index is somewhat similar to this table of contents in a book. Indexing will help a database query to be retrieved fast (Because the query does not require to go through the entire table to get the data, but it will find the data blocks from the index.).
   
   So Indexing will improve the performance in search. We have to apply non-cluster index on every search field. 
   
   
2. Less joins
   Try to use less inner joins in the SQL Queries.
   
   
3. Make Dirty reads
   Set Transaction isolation level read uncommitted in procedures. it will improve the performance to get the result. you can watch difference with the help of execution plan.
   
   
4. Data Reader in place to dataAdapter/dataSet
   The DataReader is a better choice for applications that require optimized read-only and forward-only data access. The sooner you load the data off the DataReader, close the DataReader, and close the database connection, the better performance you get.
   
   
5. For loop in place of foreach
   If you want to traverse the collection then foreach is fine. If you want to execute some operation then please use for loop. for loop increases the performance.
   
   
6. lower Complexity
   Try to use lower complexity in the logic. As soon as complexity is higher(eg n*n, n*n*n ) performance degrades. please don't use nested for loops
   
   
7. If there is lot of records then we can implement paging in SQL server. it will improve performance. 
8. We can also implement the SQL paging to improve the performance. we can send pageSize and pageNumber as a parameter in the APIs.

Sometimes we face performance issues due to rendering UI. Like API returns the results in 2 sec but UI is taking more than 10 sec to render or page stucks due to rendering of large number of records. So I am representing the way to render any number of records without stucking the page. 

 

angular(UI) rendering logic for more than 10K records. If we are not using the paging then we can use the virtual scrolling. I am demonstrating the implementation of virtual scrolling.

 

In this approach, we will not render all records in the UI. we will render certain number of records in Ui, After that as user will scroll down, records will render accordingly.

 

component.ts page code

 

Define the certain variables.

public pageSize=10;
public skip=0;
public view=new Array(this.pageSize).fill({}).map(x=>({}));

Method for binding the data in grid, 

public bindGrid(px) {
    const currentView = px.slice(this.skip, this.skip + this.pageSize);
    const removeCount = this.view.length - currentView.length;
    if (removeCount > 0) {
        this.view.splice(currentView.length - 1, removeCount);
    }
    currentView.forEach((item, index) => {
        if (!this.view[index]) {
            this.view[index] = {};
        }
        Object.assign(this.view[index], item);
    });
    this.gridview = {
        data: this.view,
        total: px.length
    }
}

HTML page code

<kendo-grid [data]="gridview"
   [skip]="skip"
   [pageSize]="pageSize"
   [scrollable]="'virtual'"
[height]="500" />

Conclusion

 

Blogs are an interesting way to share your thoughts with the rest of the world. This blog represents the way to improve the performance to getting the result from API and rendering a large number of records in UI with the help of kendo-grid.

 

Happy coding :)