如何优化ASP.NET Core MVC应用获取SQL Server带字节数组产品的加载速度

一、数据库层优化 #

• 添加索引：为Products表的typeOfProduct字段创建非聚集索引，你的查询大量基于该字段过滤，索引能避免全表扫描，大幅提升查询速度。
• 分离二进制图片存储：不要将image二进制数据直接存在Products表中，二进制大对象会增加表的体积和查询IO开销。建议将图片存储到服务器文件系统或对象存储服务，数据库仅存储图片的访问路径（如/images/products/xxx.jpg）。

二、数据查询逻辑优化 #

• 简化查询逻辑：你的switch语句存在重复代码，可简化为动态匹配（注意处理"Race chips"到"Chip tuning"的特殊映射），同时优先使用异步方法避免阻塞线程：

  public async Task<List<Product>> GetProductsAsync(string filter)
  {
      var query = context.Products.AsQueryable();
      if (!string.IsNullOrWhiteSpace(filter))
      {
          var targetType = filter switch
          {
              "Race chips" => "Chip tuning",
              _ => filter
          };
          query = query.Where(x => x.typeOfProduct == targetType);
      }
      return await query.ToListAsync();
  }
  

• 实现分页加载：不要一次性返回所有产品，尤其是默认情况下返回全表数据。添加分页参数（页码、每页条数），使用Skip()和Take()限制返回数据量，比如每页返回10-20条，大幅减少单次请求的数据传输量。
• 投影查询（按需取字段）：如果列表页不需要展示全部字段（比如description），使用Select()只查询需要的字段，减少数据读取量：

  query = query.Select(x => new 
  {
      x.ID,
      x.name,
      x.price,
      x.typeOfProduct,
      x.image // 未分离图片时保留，分离后替换为图片URL字段
  });
  

三、图片加载优化 #

• 替换Base64嵌入方式：Base64编码会使图片体积增大约30%，且一次性加载所有Base64图片会拖慢页面。改为通过URL引用图片，配合浏览器缓存机制提升重复访问速度。
• 图片压缩与缩略图：为产品图片生成不同尺寸的缩略图，列表页使用小尺寸缩略图（如300x300），点击产品详情再加载高清原图，减少列表页的图片加载体积。
• 前端懒加载：实现图片懒加载，仅当图片进入浏览器可视区域时才加载，减少初始页面加载的资源请求量。

四、前端与缓存优化 #

• 添加前端加载状态：比如骨架屏、加载动画，避免用户误以为页面卡顿，提升体验。
• 数据缓存：对查询结果进行缓存，比如使用内存缓存或分布式缓存，相同分类的产品请求在一定时间内直接读取缓存，无需重复查询数据库。

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