三门县正规营销型网站建设地址,中铁建设集团有限公司华北分公司,购物网站开发方案,网站建设 公司 常见问题背景#xff1a;
查询近3年数据之类的#xff0c;接口就会有大量数据需要查询做聚合#xff0c;因此接口响应较慢。同时前端页面有大量不同维度展示的图表#xff0c;渲染阻塞时间过长#xff0c;用户体验较差#xff0c;长时间loading#xff0c;导致无法交互。因此前…背景
查询近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也就不会重复调用了。
