CODEWITHSUNDEEP
javascriptarraysangulartypescriptloops
Pratiksha Kale
Pratiksha Kale

Reputation: 304

Angular - How can i optimize my code for improving load time ? Current load time is 2.45sec

I'm trying to optimize the speed (happens to make my code faster). How can I optimize below piece of code so that load time get optimize further. And if possible, please suggest what I should usually keep in mind. As of now Finish time = 2.45sec.

TS

export class AppComponent implements OnInit {
  searchKeywords: string;
  CoffeeItemList: any = [];
  type: string;
  search: string;
  selectedType = '';
  showLoader: boolean;
  empty = false;
  data: any = [];

  // tslint:disable-next-line:max-line-length
  constructor(private getDataListingService: DataListingService) {}
  ngOnInit(): void {
    this.getGlobalSearchList('');
    this.getAllData();
    this.getSmartSearchValues('');
    if (this.CoffeeItemList.length === 0) {
      this.empty = true;
      }
  }
  getAllData() {
    this.showLoader = true;
    this.getDataListingService.getAllDataLists().subscribe(value => {
      this.CoffeeItemList = value.data;
      this.showLoader = false;
    });
  }
  getGlobalSearchList(type: string) {
    this.selectedType = type;
    this.CoffeeItemList = [];
    this.getDataListingService.getAllDataLists().subscribe(value => {
        this.data = value.data;
        console.log(this.data);
        // tslint:disable-next-line:prefer-for-of
        for (let i = 0; i < this.data.length; i++) {
            if (this.data[i].type === type) {
                this.CoffeeItemList.push(this.data[i]);
            }
        }
    });
}
getSmartSearchValues(search: string) {
  if (search === '' ) {
      this.getAllData();
      return false;
  }
  if (search.length >= 3) {
    this.getDataListingService.searchList(search).subscribe(value => {
        this.data = value.data;
        this.CoffeeItemList = value.data;
        // check selected type either coffee, mobile or ALL.
        if (this.selectedType && this.selectedType !== '' ) {
            this.CoffeeItemList = [];
            // tslint:disable-next-line:prefer-for-of
            for (let i = 0; i < this.data.length; i++) {
                if (this.data[i].type === this.selectedType) {
                    this.CoffeeItemList.push(this.data[i]);
                }
            }
        }
    });
  }
}
}

Upvotes: 0

Views: 706

Answers (3)

Shuja Ahmed
Shuja Ahmed

Reputation: 752

Based on the code you have shared:

  1. You need to add some sort of pagination to your 'getAllDataLists' & 'searchList' methods i.e. you always get results in chunks instead of getting larger data results to render on the UI.

  2. The following methods when called are performing API calls that can all be combined into 1 single API call to reduce the memory load and reduce wait time for user to see results/data being rendered on the page.

    this.getGlobalSearchList('');
this.getAllData();
this.getSmartSearchValues('');

  3. Optimize your API call e.g. send the 'selectedType' in the API itself to already get filtered results from the backend instead of adding a check of if (this.selectedType && this.selectedType !== '' )

Upvotes: 1

Swoox
Swoox

Reputation: 3740

First of all you call getAllDataLists twice why? Can't one of these subscribe be made redundant?

Second try to filter out more data cause atleast 1 second for a call is alot of data getAllDataLists should be filter before you load all the data into your application. Either it's to much data so you should check your network tab. Or the html is to complicated and load way to much data and that's why your aplication is getting so slow.

Also I see you're making the same mistakes with subscription? You know it will trigger everytime data get changed? So with your current setup and if you subscribe on every keyup you will create 100 of subsciptions that never finish and keep poling for changes.

https://stackoverflow.com/a/60389896/7672014

Upvotes: 1

Ilija Iličić
Ilija Iličić

Reputation: 507

I can see that you call your service getDataListingService three times in ngOnInit() and every time you make a request and, I suppose, you collect data and then you work on data.

I'd like to see your HTML file as well. Maybe you don't need to make that much requests on init.

Upvotes: 1

Related Questions