Angular15对接.NET Core6 API传输11MB数据耗时超1分钟，如何优化？

传输11MB数据时，Angular前端请求耗时超1分钟，但使用Postman调用同一接口仅需1秒。以下是客户端相关代码：

服务代码 #

getMinuteByMinute(filters: IMbMTargetFiltersModel) : Observable<IMinuteByMinuteModel>{
    return this.http.post<IMinuteByMinuteModel>(`${this.apiURLXmlValid}/minute-by-minute`, filters); 
}

订阅代码 #

this.xmlValidationService.getMinuteByMinute(filters)
  .pipe(takeUntil(this.endSubscribe$))
  .subscribe({
    next: (item) => {
      console.log(item);
    },
    error: (err: HttpErrorResponse) => {          
      this.messageServices.add({
        severity: 'error',
        summary: 'Erro',
        detail: 'Error loading minute by minute data'
      })
    }
});

优化方案 #

• 启用HTTP压缩
  后端配置Gzip或Brotli压缩，大幅减少传输体积。在.NET Core的Program.cs中添加如下配置：

  builder.Services.AddResponseCompression(options =>
  {
      options.EnableForHttps = true;
      options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[] { "application/json" });
  });
  
  // 在路由中间件之后启用压缩
  app.UseResponseCompression();
  

  前端无需额外配置，浏览器会自动解压响应内容。

• 排查HTTP拦截器影响
  检查Angular项目中是否存在自定义HTTP拦截器（如日志、Token注入等），暂时禁用所有拦截器进行测试，确认是否是拦截器的额外逻辑拖慢了请求处理流程。

• 优化JSON序列化与解析

  • 后端调整System.Text.Json配置，关闭格式化、忽略循环引用以提升序列化效率：

    builder.Services.AddControllers()
        .AddJsonOptions(options =>
        {
            options.JsonSerializerOptions.WriteIndented = false;
            options.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles;
        });
    

  • 前端暂时注释掉console.log(item)，复杂数据结构的控制台打印可能阻塞主线程，影响响应完成的感知时间。

• 采用分块流式传输
  若业务允许，将数据拆分为分块传输。后端返回IAsyncEnumerable<T>实现流式输出，前端通过HttpClient指定responseType: 'stream'逐步接收数据，避免一次性加载大体积数据到内存。

• 排除浏览器环境干扰
  使用浏览器无痕模式测试，排除扩展插件（如广告拦截、代理工具）的影响；同时确认前后端网络环境一致，避免跨网络的额外延迟。

• 切换二进制序列化格式
  对于超大数据量，替换JSON为Protobuf或MessagePack等二进制格式，这类格式体积更小、解析速度更快。后端配置对应序列化支持，前端使用protobufjs等库处理二进制数据。

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