长页面多模块调接口优化

背景：

查询近3年数据之类的，接口就会有大量数据需要查询做聚合，因此接口响应较慢。同时前端页面有大量不同维度展示的图表，渲染阻塞时间过长，用户体验较差，长时间loading，导致无法交互。因此前端做了一个懒加载功能。

实现：

1. 首先控制图表宽高固定，多次查询只触发重绘，修改数据即可，减少重排

具体实现：

表格宽高固定，内容做文字超出隐藏，显示省略号。

2. 页面接口当滚动到可视区域时再进行调用，且来回滚动不会重复调用。

利用 IntersectionObserver监听指定元素需要出现在可视区域

具体实现：

// elementArray：是需要监听的页面dom元素组，建议使用一个div包裹住需要监听的dom元素
// callback: 是回调函数
const monitorVisualArea = (elementArray, callback) => {
    // 创建JS交叉观察函数
    var observer = new IntersectionObserver((mutaions) => {
        // 创建IntersectionObserver对象
        if (mutaions[0].isIntersecting) {
            // 传入参数并调用回调函数，这个参数根据自己的需要定义
            callback(mutaions[0].target.id)
        }
    });
    for (let i = 0; i < elementArray.length; i++) {
        // 需要监听的元素
        observer.observe(elementArray[i]);
    }
}

// 放到vue的原型链上，就可以使用 this.$monitorVisualArea 调取该方法
Vue.prototype.$monitorVisualArea = monitorVisualArea

获取需要监测的dom集合，传入 callback 方法，实行自己需要的动作：

// 尽量将需要监测的元素起一个相同的class或者用一个特殊class 的div包裹 document.querySelector(".xxx").children
const elementArray = document.querySelector(".table-part");
this.$monitorVisualArea(elementArray, this.loadHandler)


methods: {
    loadHandler(id) {
      // 如果不包含该id，就push进去 并调取对应初始化的接口
      if(!this.list.includes(id)) {
        this.list.push(id)
        this[`load${id}`]()
      }
    },
}

用了一个懒方法，将loadData方法拼接了容器对应的id，这样判断到没有加载过就push进去记录，再调用对应方法，若重复滚动判断到push过该id，也就不会重复调用了。