如何优化Leaflet地图中多次JSON请求导致的加载缓慢问题

针对你遍历数百个iris编码重复请求API导致加载慢的问题，给你几个实用的优化方向：

• 批量请求合并
  先查下这两个API是否支持批量参数传递，比如允许一次传入多个iris编码（比如用?codes=IRIS1,IRIS2,IRIS3这种格式），这样一次请求就能拿到多个数据，直接替代几百次循环请求。如果官方API不支持批量，建议自己搭个简单的中转服务：前端把所有需要的iris编码一次性发给中转服务，中转服务批量调用官方API后把结果合并返回，能大幅减少前端的跨域请求次数。

• 本地缓存请求结果
  把已经请求到的iris数据存在localStorage或者sessionStorage里，用iris编码作为唯一key，存储对应的统计数据和轮廓数据（转成JSON字符串存）。下次加载地图时先检查缓存，存在就直接用，不用再发重复请求。如果数据有更新需求，可以加个缓存有效期，定期清理旧缓存。

• 并行请求替代串行循环
  如果必须单个请求，别在循环里等一个请求完成再发下一个。把所有请求的Promise放进数组，用Promise.all()一次性发送（注意浏览器并发请求数限制，一般是6-8个，超过的话可以分批处理，比如每批发8个，等这批完成再发下一批，避免请求队列阻塞）。

• 按需懒加载
  不要一开始就加载所有iris数据，而是根据地图视野按需加载。监听Leaflet的moveend事件，通过map.getBounds()获取当前地图的边界范围，然后只请求落在这个范围内的iris数据。用户拖动地图时再加载新区域的数据，初始加载的数据量会大幅减少。

• 数据静态化预处理
  如果你的数据集更新不频繁，直接提前把所有iris的统计数据和轮廓数据下载下来，合并成一个GeoJSON或者JSON文件，放在自己的服务器上。前端直接请求这个静态文件，不用每次调用官方API，不仅加载快，还能避开官方API的速率限制。

• 过滤不必要的返回字段
  检查API是否支持字段过滤参数，比如只请求你需要的统计字段和轮廓坐标，不要让API返回多余的冗余数据，减小响应体的大小，提升数据解析速度。

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