javascript - Angular - 如何优化代码以缩短加载时间？当前加载时间为 2.45 秒

Question

我正在尝试优化速度(碰巧使我的代码更快)。如何优化下面的代码以便进一步优化加载时间。如果可能的话，请建议我通常应该记住什么。截至目前完成时间 = 2.45 秒。

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

Answer 1

我可以看到您在 ngOnInit() 中调用您的服务 getDataListingService 三次，每次发出请求时，我想您都会收集数据，然后处理数据。

我还想查看您的 HTML 文件。也许您不需要在 init 上发出那么多请求。