Angular - Как я могу оптимизировать мой код для улучшения времени загрузки? Текущее время загрузки составляет 2,45 с

Question

Я пытаюсь оптимизировать скорость (случается, чтобы сделать мой код быстрее). Как я могу оптимизировать часть кода ниже, чтобы оптимизировать время загрузки. И, если возможно, пожалуйста, предложите, что я должен иметь в виду. На данный момент Фини sh время = 2,45 с c.

ТС

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]);
                }
            }
        }
    });
  }
}
}

Answer 1

Я вижу, что вы вызываете свой сервис getDataListingService три раза в ngOnInit () и каждый раз, когда вы делаете запрос и, я полагаю, вы собираете данные, а затем работаете с данными.

Я бы тоже хотел увидеть ваш файл HTML. Может быть, вам не нужно делать столько запросов на init.

Answer 2

На основе кода, которым вы поделились:

1. Вам необходимо добавить какую-либо нумерацию страниц в ваши методы 'getAllDataLists' & 'searchList', т.е. вы всегда получаете результаты в виде кусков, а не больших данных результаты, отображаемые в пользовательском интерфейсе.

2. Следующие методы при вызове выполняют вызовы API, которые можно объединить в один вызов API, чтобы уменьшить загрузку памяти и сократить время ожидания для просмотра результатов пользователем / данные отображаются на странице.

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

3. Оптимизируйте вызов API, например, отправьте «selectedType» в самом API, чтобы уже получать отфильтрованные результаты из серверной части вместо добавления проверки if (this.selectedType && this.selectedType !== '' )

Answer 3

Прежде всего, вы звоните getAllDataLists дважды, почему? Разве одна из этих подписок не может быть сделана избыточной?

Вторая попытка отфильтровать больше данных, потому что по крайней мере 1 секунда для вызова - много данных getAllDataLists должен быть отфильтрован перед загрузкой всех данных в ваше приложение , Либо это слишком много данных, поэтому вы должны проверить вкладку сети. Или html - сложный и загружающий путь к большому количеству данных, и поэтому ваше приложение становится таким медленным.

Также я вижу, что вы совершаете те же ошибки с подпиской? Вы знаете, это будет срабатывать каждый раз, когда данные меняются? Таким образом, с вашими текущими настройками, и если вы будете подписываться на каждый брелок, вы создадите 100 подписок, которые никогда не заканчиваются sh и продолжаете запрашивать изменения.

{ ссылка }