背景:
查询近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,也就不会重复调用了。