前端加载请求数据太慢

原因

数据量太大，一万多条，用于地图可视化渲染

解决方案

• 分页：后端api接口增加分页，前端分页接收数据同时逐步渲染
• 缓存：HTTP缓存/浏览器缓存（只第一次加载慢一些）

方法一：分页

1.后端（springboot+mybatis+pagehelper）
pom.xml

 		<!-- 分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.1.2</version>
        </dependency>

controller

注意，PageHelper的两条语句尽量紧挨着查询服务语句，否则容易报错

PageHelper.startPage(pageNum, pageSize);//新增
List<NetworkHeatmapLiveapp> list = userService.findNetworkHeatmapLiveapp(record);
PageInfo<NetworkHeatmapLiveapp> pageInfo = new PageInfo<>(list);//新增
return JSON.toJSONString(pageInfo);//将之前返回的list修改为返回pageInfo

2.前端

如果是十万条数据，每页还是一千的话，时间间隔应该更长

.vue

	initHeatMapLiveApp () {
      let pageSize = 1000;//每页1000行数据
      let pageNum = 1;//第1页
      let dataList = [];
      this.getDataList(pageNum, pageSize,dataList);
    },
    //递归请求，间隔100ms
    getDataList (pageNum, pageSize,dataList) {
      this.$post(
        url,
        { pageNum: pageNum, pageSize: pageSize },
        data => {
          let res = data["list"];
          let pageTotal = data["pages"];
          if (res.length == 0) {
            return;
          }
          try {
            let group = res.map((item) => {
              return {
                lng: item.longitude,
                lat: item.latitude,
                count: item.value
              }
            })
            dataList=[...dataList,...group];
            pageNum++;
            if (pageNum <= pageTotal) {
              this.heatMapCallback(dataList);//逐步渲染
              setTimeout(this.getDataList(pageNum, pageSize,dataList), 100);//分页请求
            } else {
              return;
            }
          } catch (e) { }
        },
        error => {
          console.log(error);
        }
      );
    },