Angular中点击按钮如何更快刷新<div>内容，消除内容切换延迟？

延迟根因 #

当前代码的执行逻辑是串行发送2次HTTP请求：点击按钮后先请求GetDateTimeByTimeZone获取时区时间，等该接口返回后才会调用Dashboard接口拉取div需要的最新内容，两次请求的网络耗时叠加，加上只有接口返回后才会更新视图，就会出现旧内容停留数秒的情况。

优化方案 #

• 优先消除串行请求 #

  时区数据无需每次点击按钮时实时请求，可以在页面初始化阶段提前调用GetDateTimeByTimeZone接口，将结果缓存到本地变量，点击按钮时直接用缓存的时区数据调用Dashboard接口，直接减少一次HTTP请求耗时。
  如果业务允许时区误差，甚至可以直接用前端本地时间计算起止日期，完全省去GetDateTimeByTimeZone请求，速度提升最明显。

• 点击后立刻给用户反馈，避免旧内容停留 #

  点击按钮的第一时间就清空div旧内容、展示加载状态，不要等接口返回后才更新视图，用户感知上会流畅很多，参考修改后的代码：

  // 先在组件中声明加载状态和div内容绑定变量
  isLoading = false;
  divContent: any = null;
  
  reload() {
    // 点击后立刻更新视图状态
    this.isLoading = true;
    this.divContent = null;
    this.SelectedDate = ' ';
  
    this.CommonService.GetDateTimeByTimeZone().subscribe(tz => {
      let ds: Input = {
        StartDate: moment(this.timezoneDate).format("YYYY-MM-DDT00:00:00.000[Z]"),
        EndDate: moment(this.timezoneDate).format("YYYY-MM-DDT23:59:59.999[Z]")
      }
      this.Dashboard(ds, false).subscribe(res => {
        // 拿到数据立刻更新内容
        this.divContent = res;
        this.isLoading = false;
        // 如果存在视图更新不及时的问题，手动触发Angular变更检测
        // this.cdr.markForCheck();
      })
    }, error => {
      this.isLoading = false;
      Swal.fire('', this.es.adminErrorMsgList[39].message, 'error')
    });
  }
  

  对应div部分的代码调整：

  <div *ngIf="!isLoading; else loadingTpl">{{divContent}}</div>
  <ng-template #loadingTpl>加载中...</ng-template>
  
  <button type="button" class="left-btn pull-right" (click)="reload()">cancel</button>
  

  可以把按钮原来的data-dismiss="modal"属性去掉，弹窗关闭逻辑放到Dashboard接口回调完成后再执行，避免弹窗动画阻塞主线程影响请求速度。

• 其他辅助优化 #

  如果Dashboard接口本身响应耗时较高，可以给接口加相同参数的请求缓存，短时间内重复请求直接返回缓存结果；也可以让后端优化接口查询逻辑，加数据库索引减少查询耗时。

内容的提问来源于stack exchange，提问作者Daffodil s