需求背景
城投利差工具是一款基于债券利差分析的专项工具，支持用户通过灵活筛选条件生成多维度利差曲线（如区域、行业、企业等），并联动展示图表与数据表。
核心功能模块：
左侧待选区域：包含用户自定义曲线与系统预设曲线，支持批量操作。
右侧展示区域：已展示曲线区域、动态渲染用户选中的曲线图表（ECharts折线图）及明细数据表（支持导出）。
顶部功能栏：提供筛选条件配置，支持搜索曲线条件快速生成或添加曲线。
开发遇到的难点
- 大量并发请求带来的问题
- 批量添加曲线时的性能问题
- 待选曲线和已展示曲线的交互，以及批量操作的性能问题
大量并发请求的问题
一条曲线对应一条数据，所以批量操作或者首次进入时都有可能出现大量的并发请求排队，会迅速消耗网络资源(端口、连接池)。
问题：如果前端不加限制，会一次性触发最多50个请求，多出的请求排队等待，会阻塞其他请求，影响页面的响应。
优化方案：
- 前端对大批量的并发请求做了限制，一次最多发6个请求。
- 另外交互方面，首先会给页面加上loading遮罩层，等待所有请求结束，放开loading，可以有效避免额外操作带来的复杂问题。
具体实现：通过计数和阻塞队列来实现。当请求数大于限制数时，会通过一个await Promise阻止继续往下执行；等到有请求完成，计数减一，然后执行阻塞队列中的Promise，才会继续发其他请求。
能实现阻塞的原理：利用微任务来阻塞JS线程的执行。
优化成果
通过前端手动限制并发请求数量：
- 减少了请求排队数量，避免阻塞其他请求。(虽然http1.1还是要等上一个请求结束才能响应下一次请求，但至少这个高优先级的请求插进来了)
- 减少了并发Promise的数量，降低了内存占用。这部分内存占用其实不是很多，毕竟最多就50个。
- 页面流畅度提升，loading 体验优化，防止用户在请求未完成时触发额外操作。
NOTE
具体看这里
批量添加曲线时的性能问题
- 全量渲染改为增量渲染
问题：树节点存储了太多信息，进入页面时如果接口一次性把数据都返回，加载过慢(6-8s)。
优化方案：
- 由全量返回改成了按需加载：操作树时调接口获取数据存储到前端。
- 交互优化：操作树时，有一个全局的loading遮罩层，无法进行其他交互的；等操作完成之后再关闭loading。提供了较为良好的交互体验。
- 懒加载：树节点展开时才请求相关数据
优化成果：
- 接口的响应速度从6-8s降低到了1s以内
- 体现到前端就是页面的loading时间降低到了1s左右。
- 批量操作时请求响应速度的优化
问题：左侧“待选曲线”树与右侧“已展示曲线”树支持批量操作，一次性添加大量节点时，网络传输以及响应速度耗时较长，页面响应延迟。如果批量操作的节点过多，接口甚至会超时。
优化方案：
- 与后端协商优化接口，仅传递节点 ID，避免大数据量传输，接口从redis读数据 减少了和数据库的交互。
优化成果：
- 批量操作时，页面等待时间明显减短。从之前的等待十来秒到毫秒级的响应。
其他性能问题
React 组件优化
- 适当使用 React.memo 避免无谓渲染。
- 使用 useMemo、useCallback 缓存计算逻辑。
- 使用visible/display替换三元，避免不必要的 re-render，减少性能开销。
表格切换卡顿优化
问题原因：tab切换时重新渲染了表格组件(三元)
优化成果：tab切换时表格的卡顿时间从5-6s左右降低到了1s以内，渲染速度提高了50%左右。