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

【问题标题】：Angular - How can i optimize my code for improving load time ? Current load time is 2.45secAngular - 如何优化我的代码以缩短加载时间？当前加载时间为 2.45 秒
【发布时间】：2020-06-09 01:22:40
【问题描述】：

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

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

【问题讨论】：

您的 API 调用将在这里增加很多延迟。如果您想专注于提高 Angular 的效率，请以受控模拟而不是可变请求为基准。
您的getSmartSearchValues(search: string) 将在每个键上被调用，而不是您可以在用户停止键入时执行类似操作，它将搜索和过滤数据，因此它将避免searchList 的额外API 调用。参考这个blog.sodhanalibrary.com/2016/10/…
另外，您目前在可观察对象之外的ngOnInit中检查this.CoffeeItemList.length，因此检查时可能未定义。
@hrdkisback 我们怎么知道每次按键都会调用它？
@KurtHamilton stackoverflow.com/questions/60262481/… ;)

标签： javascript arrays angular typescript loops

【解决方案1】：

根据您分享的代码：

您需要在“getAllDataLists”和“searchList”方法中添加某种分页功能，即始终以块的形式获取结果，而不是获取更大的数据结果以在 UI 上呈现。
以下方法在调用时执行 API 调用，所有这些调用都可以组合为 1 个 API 调用，以减少内存负载并减少用户查看页面上呈现的结果/数据的等待时间。
```
this.getGlobalSearchList('');
this.getAllData();
this.getSmartSearchValues('');
```
优化您的 API 调用，例如在 API 本身中发送 'selectedType' 以已经从后端获得过滤结果，而不是添加检查 if (this.selectedType && this.selectedType !== '' )

【讨论】：

【解决方案2】：

首先你给getAllDataLists打了两次电话，为什么？不能将其中一个订阅设为多余吗？

第二次尝试过滤掉更多数据，因为在将所有数据加载到应用程序之前，至少 1 秒的调用是大量数据getAllDataLists 应该被过滤掉。要么是太多数据，所以你应该检查你的网络标签。或者 html 很复杂，并且要加载大量数据，这就是您的应用程序变得如此缓慢的原因。

我还看到您在订阅方面犯了同样的错误？您知道每次数据更改都会触发它吗？因此，在您当前的设置下，如果您订阅每个 keyup，您将创建 100 个永远不会完成的订阅，并不断轮询更改。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：