长页面多模块调接口优化

背景:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/824837.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2021年全国大学生电子设计竞赛D题——基于互联网的摄像测量系统(一)

01 D题实现效果演示 视频参考微信原文&#xff1a;2021年全国大学生电子设计竞赛D题——基于互联网的摄像测量系统&#xff08;一&#xff09; 02 D题任务要求 &#xff08;D题原文件参见本文附录&#xff09; 设计并制作一个图中所示的基于互联网的摄像测量系统。图中边长…

【Python】异常处理结构

文章目录 1.python异常2.try_except异常处理结构3.try... 多个except异常处理4.try_except_else异常处理结构5.try_except_finally异常处理结构6.常见报错类型 在运行代码时&#xff0c;总是遇到各种异常&#xff0c;且出现异常时&#xff0c;脚本就会自动的的停止运行&#xf…

时序分析基本知识点

【FPGA开发/IC开发之时序约束最全面的归纳总结】时序路径基本概念及时序约束分析方法_时序约束指令-CSDN博客

就业班 第三阶段(nginx) 2401--4.17 day1 nginx1

负载均衡集群 1、集群是什么&#xff1f; 1 集群&#xff08;cluster&#xff09;技术是一种较新的技术&#xff0c;通过集群技术&#xff0c;可以在付出较低成本的情况下获得在性能、可靠性、灵活性方面的相对较高的收益&#xff0c;其任务调度则是集群系统中的核心技术。 …

频率分辨率

频率分辨率是描述频谱分析能力的一个重要指标。它指的是频谱分析仪在频率轴上的最小可区分的频率间隔。 更具体地说: 频率分辨率描述了频谱分析中能够分辨出的最小频率差。例如,如果频率分辨率为1 Hz,就意味着该分析仪能够将相隔1 Hz的两个频率成分区分开来。 频率分辨率受到…

FinalShell 远程连接 Linux(Ubuntu)系统

Linux 系列教程&#xff1a; VMware 安装配置 Ubuntu&#xff08;最新版、超详细&#xff09;FinalShell 远程连接 Linux&#xff08;Ubuntu&#xff09;系统Ubuntu 系统安装 VS Code 并配置 C 环境 ➡️➡️➡️提出一个问题&#xff1a;为什么使用 FinalShell 连接&#xff0…

Unity Android 2022 Release-Notes

&#x1f308;Unity Android 2022 Release-Notes 本文信息收集来自自动搜集工具&#x1f448; 版本更新内容2022.3.17Android: Added Auto Rotation behavior to the Orientation section.(UUM-44021)2022.3.16Android: Fixed ad banner disappearance after suspend/resume.(…

AI时代,智能体成下一个爆点

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经从科幻小说中的概念变成了现实生活中的重要角色。AI大模型技术&#xff0c;作为人工智能领域的一项重要突破&#xff0c;如今已不再是一个新鲜词汇&#xff0c;而是正在深刻改变着我们的生活方式和工作模…

初识ansible服务及ansible主机清单配置

目录 1、什么是自动化批量管理 2、自动化工具ansible架构 3、ansible服务专用术语对照表 4、设置主机清单&#xff08;inventory&#xff09; 4.1实验环境准备 4.2配置主机清单 4.2.1分组基本格式 4.2.2指定用户名&#xff0c;密码。端口 4.2.3子组 4.3查看 4.3.1看…

LeetCode———144—— 二叉树的前序遍历

目录 ​编辑 1.题目 2.解答 1.首先计算二叉树的节点个数&#xff1a; 2.以先序遍历&#xff08;Preorder Traversal&#xff09;的方式遍历一个二叉树&#xff0c;并将遍历到的节点的值存储在一个整数数组中 3.最终代码 1.题目 . - 力扣&#xff08;LeetCode&#xff09; 给…

java中如何将各种日期时间转换成LocalDateTime,(时间转换)

//假如是时间戳 "createTimeLong": 1679287522749,long createTimeLong Long.parseLong(axl800TestResByExamTO.getCreateTimeLong()); // 将时间戳转换为Instant对象Instant instant Instant.ofEpochMilli(createTimeLong); // 转换为LocalDateTime对象LocalDate…

牛客周赛 Round 39题解

题目讲解&#xff1a;牛客周赛39讲题直播回放_哔哩哔哩_bilibili 题号标题已通过代码通过率我的状态A小红不想做炸鸡块粉丝粉丝题点击查看1978/2610未通过B小红不想做鸽巢原理点击查看1172/8606未通过C小红不想做完全背包&#xff08;easy&#xff09;点击查看1261/3574未通过…

软件看门狗:让服务永不宕机

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 缘起 看门狗WatchDog是个硬件领…

双碳目标下基于“遥感+”集成技术的碳储量、碳排放、碳循环、温室气体等多领域监测与模拟

以全球变暖为主要特征的气候变化已成为全球性环境问题&#xff0c;对全球可持续发展带来严峻挑战。2015年多国在《巴黎协定》上明确提出缔约方应尽快实现碳达峰和碳中和目标。2019年第49届 IPCC全会明确增加了基于卫星遥感的排放清单校验方法。随着碳中和目标以及全球碳盘点的现…

Verilog中#的2种作用

在Verilog中&#xff0c;#有2种作用。 第一种作用是指定时间延时&#xff0c;如#10&#xff0c;表示延时10个时间单位&#xff1b; 第二种作用在模块定义时指定常量型参数的默认值&#xff0c;在模块实例化时传递常量型参数的指定值。 module uart_tx //采用#()形式定义常量型…

[stm32]DMA使用

自动重装和M2M(软件trig)不能一起使用&#xff0c;否则会停不下来 void MyDMA_Init(uint32_t AddrA,uint32_t AddrB,uint16_t Size){RCC_AHBPeriphClockCmd(RCC_AHBPeriph_DMA1,ENABLE);DMA_InitTypeDef DMA_InitStructure;DMA_InitStructure.DMA_PeripheralBaseAddrAddrA;//外…

爬楼梯(c)

文章目录 描述分析思路关键代码运行结果 描述 给定一个整数数组 cost &#xff0c;其中 cost[i]是从楼梯第i 个台阶向上爬需要支付的费用&#xff0c;下标从0开始。-旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶 要求&#xff1a;请你计算并返回达到楼梯顶部的…

在使用lombok的@Slf4j时,启动项目报错。java:找不到符号

问题背景&#xff1a; 在使用lombok的Slf4j时&#xff0c;启动项目报错。 java&#xff1a;找不到符号符号&#xff1a; 方法info(java.lang.String,java.lang.String)位置&#xff1a; 类型为org.apache.ibatis.logging.Log的变量 log解决方式&#xff1a; 在如图所示位置加…

mysql的常用配置

1. 设置MySQL字段名不区分大小写 [mysqld] lower_case_table_names1 2. GROUP BY 字段不需要在 SELECT 查询中出现 在 SQL 中&#xff0c;通常要求在 SELECT 语句中的 GROUP BY 字段也必须出现在 SELECT 字段列表中&#xff0c;这是为了确保查询的一致性&#xff0c;并且遵循…

Rust开发笔记 | IDE选择与Rust工具链配置指南

在当代编程语言中&#xff0c;Rust以其独特的内存管理和类型系统&#xff0c;提供了无与伦比的安全性和性能&#xff0c;尤其在系统编程领域表现突出。选择合适的集成开发环境&#xff08;IDE&#xff09;和配置正确的工具链&#xff0c;对于提升Rust开发效率至关重要。本文将为…