Spring REST API复杂数据渲染性能优化方案问询（Angular+Oracle架构）

项目技术栈 #

• UI：Angular
• 后端：Java 8 + Spring
• 数据库：Oracle

当前问题详情 #

1. /mainAPI：返回国家列表及对应城市列表，响应耗时7~13秒
2. /detailsAPI：点击城市链接触发，返回该城市下的社区列表（含500条人员数据）、子社区列表（含500条人员数据），响应耗时8~15秒
3. 业务需求：支持用户录入并保存人员手机号、年龄等信息

数据层级结构 #

List countries (/mainAPI)
    List cities (/mainAPI)
        List colonies (/detailsAPI)
            List people (500) (/detailsAPI)
            List Sub colonies (/detailsAPI)
                List people (500) (/detailsAPI)

现有备选方案 #

• 方案1：通过单个API返回全量数据并实现分页，但不清楚如何处理多层嵌套列表的分页逻辑
• 方案2：调用/detailsAPI后将数据转为扁平结构，再基于扁平数据实现分页

额外优化建议 #

API层面优化 #

1. 数据库查询优化

   • 给Oracle数据库的关联字段（如国家ID、城市ID、社区ID等）添加合适的索引，避免全表扫描
   • 优化SQL语句，减少不必要的关联层级；利用Oracle的FETCH FIRST n ROWS ONLY语法实现数据库端分页，避免后端内存分页带来的性能损耗
   • 人员数据采用延迟加载：仅当用户展开社区/子社区节点时，才请求对应人员列表，而非一次性返回全部数据

2. API拆分与异步并行请求

   • 将/mainAPI拆分为/countries和/cities?countryId=xxx，先加载国家列表，再根据选中的国家加载对应城市，减少单次请求的数据量
   • 把/detailsAPI拆分为/colonies?cityId=xxx和/subColonies?colonyId=xxx，前端用Angular的forkJoin并行请求社区和子社区数据，缩短整体响应等待时间

3. 缓存策略落地

   • 后端用Spring Cache结合Redis缓存国家、城市这类低频变更数据，设置合理的过期时间，避免重复查询数据库
   • 前端利用Angular的HttpInterceptor实现请求缓存，或用localStorage缓存已加载的国家/城市数据，减少重复API调用

前端渲染优化 #

1. 虚拟滚动处理

   • 使用Angular CDK的虚拟滚动组件（CdkVirtualScrollViewport），仅渲染当前视口内的列表项，即使数据量过千也能保证流畅渲染
   • 嵌套列表（如社区下的人员列表）单独设置虚拟滚动，避免一次性渲染所有嵌套节点

2. 懒加载与分段加载

   • 初始仅加载国家和城市列表，社区、子社区及人员数据在用户点击展开时再请求加载
   • 人员列表采用分段加载，每次加载20~50条，滚动到底部时自动触发下一页请求

3. 扁平数据结构优化

   • 若采用方案2的扁平结构，将人员数据按城市ID-社区ID-子社区ID分组存储，前端通过分组键快速定位数据，避免多层嵌套遍历的性能损耗

嵌套列表分页实现思路（针对方案1） #

1. 层级递进分页

   • 按数据层级拆分分页逻辑：先对国家分页，选中国家后对其下的城市分页，选中城市后对社区分页，以此类推。每层API仅返回当前页的数据及子层级的总数，前端根据总数生成分页控件
   • 后端API接收参数如level=country&page=1&size=10，根据层级返回对应分页数据

2. 全局扁平分页+多维度过滤

   • 将所有人员数据扁平化为{country, city, colony, subColony, personInfo}结构，后端提供支持按国家、城市、社区等维度过滤的分页API（如/people?cityId=xxx&page=1&size=20）
   • 这种方式无需处理嵌套分页，逻辑更简单，同时便于前端实现多维度筛选功能

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