深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
文章目录
- 一、分批渲染
- 1、setTimeout定时器分批渲染
- 2、使用requestAnimationFrame()改进渲染
- 2.1、什么是requestAnimationFrame
- 2.2、为什么使用requestAnimationFrame而不是setTimeout或setInterval
- 2.3、requestAnimationFrame的优势和适用场景
- 二、滚动触底加载数据
- 三、Element-Plus虚拟化表格
- 四、自定义虚拟滚动列表
- 1、视图结构
- 2、基本思路
- 3、具体计算
- 4、实现代码
- 五、使用el-table-infinite-scroll插件
- 1、el-table-infinite-scroll(vue3)
- 2、el-table-infinite-scroll(vue2)
- 六、使用Web Workers处理数据
- 七、借助服务端渲染(SSR)
处理大量数据的渲染对于前端开发来说是一项挑战,但也是提升网页性能和用户体验的重要环节。要有效解决这一问题,可以采用虚拟滚动(Virtual Scrolling)、分批渲染(Incremental Rendering)、使用Web Workers处理数据、利用前端分页(Pagination)、借助服务端渲染(SSR)来优化大量数据的处理。其中,虚拟滚动是一种非常有效的技术,它通过只渲染用户可见的列表项来极大减少DOM操作和提高性能。这种方式不仅提升了滚动的流畅度,也减轻了浏览器的负担,尤其适用于长列表数据的展示。
一、分批渲染
分批渲染或称增量渲染,是指将数据分成若干批次进行处理和渲染,每次只处理一小部分数据,通过逐步完成整体渲染的方式,避免了一次性处理大量数据造成的卡顿现象。
实现分批渲染通常可以通过requestAnimationFrame()或setTimeout()等异步API分配任务,确保在每个渲染帧中只处理足够少的数据,避免阻塞主线程。
1、setTimeout定时器分批渲染
//发送请求
onMounted(() => {getData()
})//获取数据
const getData = () => {fetch('http://124.223.69.156:3300/bigData').then(res => res.json()).then(data => {let newData = chunksData(data.data)console.log(newData);}).catch(err => console.log(err));
}//数据分页
const chunksData = (arr) => {let chunkSize = 10;let chunks = [];for (let i = 0; i < arr.length; i += chunkSize) {chunks.push(arr.slice(i, i + chunkSize));}return chunks
}//setTimeout分页渲染
for (let i = 0; i < newData.length; i++) {setTimeout(() => {tableData.push(...newData[i])}, 100*i)
}
2、使用requestAnimationFrame()改进渲染
2.1、什么是requestAnimationFrame
requestAnimationFrame是浏览器用于定时循环操作的一个API,通常用于动画和游戏开发。它会把每一帧中的所有DOM操作集中起来,在重绘之前一次性更新,并且关联到浏览器的重绘操作。
2.2、为什么使用requestAnimationFrame而不是setTimeout或setInterval
与setTimeout或setInterval相比,requestAnimationFrame具有以下优势:
- 通过系统时间间隔来调用回调函数,无需担心系统负载和阻塞问题,系统会自动调整回调频率。
- 由浏览器内部进行调度和优化,性能更高,消耗的CPU和GPU资源更少。
- 避免帧丢失现象,确保回调连续执行,实现更流畅的动画效果。
- 自动合并多个回调,避免不必要的开销。
- 与浏览器的刷新同步,不会在浏览器页面不可见时执行回调。
2.3、requestAnimationFrame的优势和适用场景
requestAnimationFrame最适用于需要连续高频执行的动画,如游戏开发,数据可视化动画等。它与浏览器刷新周期保持一致,不会因为间隔时间不均匀而导致动画卡顿。
const renderData = (page) => {if(page >= newData.length) returnrequestAnimationFrame(() => {tableData.push(...newData[page])page++renderData(page)})
}renderData(0)
二、滚动触底加载数据
前端分页是处理大量数据渲染的另一种常见策略,它通过每次只向用户展示一部分数据,让用户通过分页控件浏览完整的数据集。
实现前端分页首先需要从后端一次性获取完整数据,然后根据设定的每页数据量在前端进行切分,每次仅加载和渲染当前页的数据。这种方式减轻了单次渲染的负担,但增加了数据管理的复杂性。
//发送请求
onMounted(() => {getData()
})//获取数据
const getData = () => {fetch('http://124.223.69.156:3300/bigData').then(res => res.json()).then(data => {let newData = chunksData(data.data)//保存所有数据totalData.push(newData)//渲染第一页面数据renderData()}).catch(err => console.log(err));
}//数据分页
const chunksData = (arr) => {let chunkSize = 10;let chunks = [];for (let i = 0; i < arr.length; i += chunkSize) {chunks.push(arr.slice(i, i + chunkSize));}return chunks
}//渲染数据
const renderData = () => {if(totalData.length == 0) return//添加第一页数据tableData.push(...totalData[0])//删除第一页数据totalData.shift()
}
监听滚动事件,触底触底时触发renderData事件,继续加载下一页数据。
三、Element-Plus虚拟化表格
Element Plus 提供 的Virtualized Table 虚拟化表格
在前端开发领域,表格一直都是一个高频出现的组件,尤其是在中后台和数据分析场景。 但是,对于 Table V1来说,当一屏里超过 1000 条数据记录时,就会出现卡顿等性能问题,体验不是很好。
通过虚拟化表格组件,超大数据渲染将不再是一个头疼的问题。
即使虚拟化的表格是高效的,但是当数据负载过大时,网络和内存容量也会成为您应用程序的瓶颈。
因此请牢记,虚拟化表格永远不是最完美的解决方案,请考虑数据分页、过滤器等优化方案。
<template><div style="width: 100%;height: 100%"><el-auto-resizer><template #default="{ height, width }"><el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed /></template></el-auto-resizer></div>
</template><script setup>
import { onMounted, reactive } from 'vue';
const tableData = reactive([])
const columns = [{key: 'id',dataKey: 'id',title: 'ID',width: 140
},
{key: 'name',dataKey: 'name',title: 'Name',width: 140,
},
{key: 'value',dataKey: 'value',title: 'Value',width: 140,
}]//获取数据
onMounted(() => {getData()
})const getData = () => {fetch('http://124.223.69.156:3300/bigData').then(res => res.json()).then(data => {tableData.push(...data.data)}).catch(err => console.log(err));
}
</script>
四、自定义虚拟滚动列表
虚拟滚动是通过仅渲染用户当前可视区域内的元素,当用户滚动时动态加载和卸载数据,从而实现长列表的高效渲染。这种方法能显著减少页面初始化时的渲染负担,加快首次渲染速度。
虚拟滚动实现的核心在于计算哪些数据应当被渲染在屏幕上。这涉及到监听滚动事件,根据滚动位置计算当前可视范围内的数据索引,然后仅渲染这部分数据。还需要处理好滚动条的位置和大小,确保用户体验的一致性。
1、视图结构
- viewport:可视区域的容器
- list-area:列表项的渲染区域
<div class="viewport" ref="viewport"><div class="list-area"><!-- item-1 --> <!-- item-2 --> <!-- item-n --> </div>
</div>
2、基本思路
虚拟列表的核心思路是 处理用户滚动时可视区域数据的显示 和 可视区外数据的隐藏,这里为了方便说明,引入以下相关变量:
- totalList :总列表数据
- startIndex :可视区域的开始索引
- endIndex :可视区域的结束索引
- paddingTop :可视区域的上内边距
- paddingBottom :可视区域的下内边距
当用户滚动列表时:
- 计算可视区域的 开始索引 和 结束索引
- 根据 开始索引 和 结束索引 渲染数据
- 计算 可视区域的上内边距 和下内边距 显示滚动条位置
3、具体计算
先假定可视区的高度固定为600px,每个列表项的高度固定为60px,则我们可设置和推导出:
- 可视区高度: viewportHeight = 600
- 列表项高度: itemSize = 60
- 可视区开始索引: startIndex = 0
- 可视区结束索引 :endIndex = startIndex + viewportHeight / itemSize
当用户滚动时,逻辑处理如下:
- 获取可视区滚动距离 scrollTop;
- 根据 滚动距离 scrollTop 和 单个列表项高度 itemSize 计算出 开始索引 startIndex = Math.floor(scrollTop / itemSize);
- 可视区域的上内边距 paddingTop = scrollTop;
- 可视区域的上内边距 paddingBottom = totalList * itemSize - viewportHeight - scrollTop;
- 只显示 开始索引 和 结束索引 之间的列表项;
4、实现代码
<template><div class="viewport" ref="viewport"><div class="list-area" :style="styleObject"><div v-for="(item, index) in scrollList" :key="index" class="item">index:{{ index }} id:{{ item.id }} name:{{item.name }}</div></div></div>
</template>
<script setup>
import { onMounted, reactive, ref, computed, onBeforeUnmount } from 'vue';
//总列表的数据
const totalList = reactive([])
//可视区域的开始索引
let startIndex = ref(0)
// 假设每个列表项的高度是60px
let itemSize = ref(60)
//可视区域的上内边距
let paddingTop = ref(0)
//可视区域的下内边距
let paddingBottom = ref(0)
//容器的高度
let viewportHeight = ref(600)
//容器
const viewport = ref(null)// 计算可视区域的列表数据
const scrollList = computed(() => {return totalList.slice(startIndex.value, endIndex.value);
})// 计算可视区域的高度和内边距
const styleObject = computed(() => {return {paddingTop: `${paddingTop.value}px`,paddingBottom: `${paddingBottom.value}px`,height: `${viewportHeight.value}px`}
})// 计算可视区域的结束索引
const endIndex = computed(() => {return Math.min(totalList.length, startIndex.value + Math.ceil(viewportHeight.value / itemSize.value));
})//发送请求获取数据
onMounted(() => {getData()
})//获取数据
const getData = () => {fetch('http://124.223.69.156:3300/bigData').then(res => res.json()).then(data => {let newArr = data.datatotalList.push(...newArr)initScrollListener()}).catch(err => console.log(err));
}// 监听可视区域滚动事件
const initScrollListener = () => {scrollListener()viewport.value.addEventListener('scroll', scrollListener);
}// 计算可视区域的内边距
const scrollListener = () => {// 计算可视区域滚动距离const scrollTop = viewport.value.scrollTop;// 计算可视区域的开始索引startIndex.value = Math.max(0, Math.floor(scrollTop / itemSize.value));// 计算可视区域的上内边距paddingTop.value = scrollTop;// 如果是最后一页,则不需要额外的底部填充 if (endIndex.value >= totalList.length) {paddingBottom.value = 0;} else {// 计算可视区域的下内边距paddingBottom.value = totalList.length * itemSize.value - viewportHeight.value - scrollTop;}
}// 移除可视区域滚动事件
onBeforeUnmount(() => {removeScrollListener()
})// 移除可视区域滚动事件
const removeScrollListener = () => {viewport.value.removeEventListener('scroll', scrollListener);
}<style scoped>
.viewport {width: 600px;height: 600px;overflow: auto;border: 1px solid #D3DCE6;margin: auto;
}.item {height: 59px;line-height: 60px;border-bottom: 1px solid #D3DCE6;padding-left: 20px;
}
</style>
这里可以看出,永远只渲染10条数据。随着滚动条滚动,动态渲染10条数据。
五、使用el-table-infinite-scroll插件
1、el-table-infinite-scroll(vue3)
- 安装
npm install --save el-table-infinite-scroll
- 全局引入
import ElTableInfiniteScroll from "el-table-infinite-scroll";
app.use(ElTableInfiniteScroll);
- 局部引入
<template><el-table v-el-table-infinite-scroll="load"></el-table>
</template><script setup>
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
</script>
- 组件中使用
<template><p style="margin-bottom: 8px"><span>loaded page(total: {{ total }}): {{ page }}, </span>disabled:<el-switch v-model="disabled" :disabled="page >= total"></el-switch></p><el-tablev-el-table-infinite-scroll="load":data="data":infinite-scroll-disabled="disabled"height="200px"><el-table-column type="index" /><el-table-column prop="date" label="date" /><el-table-column prop="name" label="name" /><el-table-column prop="age" label="age" /></el-table>
</template><script setup>
import { ref } from 'vue';const dataTemplate = new Array(10).fill({date: '2009-01-01',name: 'Tom',age: '30',
});const data = ref([]);
const disabled = ref(false);
const page = ref(0);
const total = ref(5);const load = () => {if (disabled.value) return;page.value++;if (page.value <= total.value) {data.value = data.value.concat(dataTemplate);}if (page.value === total.value) {disabled.value = true;}
};
</script><style lang="scss" scoped>
.el-table {:deep(table) {margin: 0;}
}
</style>
2、el-table-infinite-scroll(vue2)
- 安装
npm install --save el-table-infinite-scroll@2
- 全局引入
import Vue from "vue";
import ElTableInfiniteScroll from "el-table-infinite-scroll";
Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);
- 局部引入
<script>
import ElTableInfiniteScroll from "el-table-infinite-scroll";
export default {directives: {"el-table-infinite-scroll": ElTableInfiniteScroll,},
};
</script>
- 组件中使用
<template><el-tablev-el-table-infinite-scroll="load":data="data":infinite-scroll-disabled="disabled"height="200px"><el-table-column type="index" /><el-table-column prop="date" label="date" /><el-table-column prop="name" label="name" /><el-table-column prop="age" label="age" /></el-table>
</template><script>
const dataTemplate = new Array(10).fill({date: "2009-01-01",name: "Tom",age: "30",
});export default {data() {return {data: [],page: 0,total: 5,};},methods: {load() {if (this.disabled) return;this.page++;if (this.page <= this.total) {this.data = this.data.concat(dataTemplate);}if (this.page === this.total) {this.disabled = true;}},},
};
</script>
六、使用Web Workers处理数据
Web Workers提供了一种将数据处理操作放在后台线程的方法,这样即使处理大量或者复杂的数据,也不会阻塞UI的更新和用户的交互。
在Web Workers中处理数据,前端主线程可以保持高响应性。数据处理完成后,再将结果发送回主线程进行渲染。这对于需要复杂计算处理的大量数据尤为有用。
这里不详细描述
七、借助服务端渲染(SSR)
服务端渲染(SSR)是指在服务器端完成页面的渲染工作,直接向客户端发送渲染后的HTML内容,能显著提升首次加载的速度,对于SEO也非常友好。
虽然SSR不是直接在前端处理大量数据,但它通过减轻前端渲染压力、提前渲染页面内容来间接优化大数据处理的性能问题。结合客户端渲染,可以实现快速首屏加载与动态交互的平衡。
这里不详细描述
相关文章:
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
文章目录 一、分批渲染1、setTimeout定时器分批渲染2、使用requestAnimationFrame()改进渲染2.1、什么是requestAnimationFrame2.2、为什么使用requestAnimationFrame而不是setTimeout或setInterval2.3、requestAnimationFrame的优势和适用场景 二、滚动触底加载数据三、Elemen…...
AI时代,你的工作会被AI替代吗?
AI在不同领域的应用和发展速度是不同的。在智商方面,尤其是在逻辑推理、数据分析和模式识别等领域,AI已经取得了显著的进展。例如,在国际象棋、围棋等策略游戏中,AI已经能够击败顶尖的人类选手。在科学研究、医学诊断、股市分析等…...
Java_日志
日志技术 可以将系统执行的信息,方便的记录到指定的位置(控制台、文件中、数据库中) 可以随时以开关的形式控制日志启停,无需侵入到源代码中去进行修改。 日志技术的体系结构 日志框架:JUL、Log4j、Logback、其他实现。 日志接口…...
springcould-config git源情况下报错app仓库找不到
在使用spring config server服务的时候发现在启动之后的一段时间内控制台会抛出异常,spring admin监控爆红,控制台信息如下 --2024-06-26 20:38:59.615 - WARN 2944 --- [oundedElastic-7] o.s.c.c.s.e.JGitEnvironmentRepository : Error occured …...
MySQL serverTimezone=UTC
在数据库连接字符串中使用 serverTimezoneUTC 是一个常见的配置选项,特别是当数据库服务器和应用程序服务器位于不同的时区时。这个选项指定了数据库服务器应当使用的时区,以确保日期和时间数据在客户端和服务器之间正确传输和处理。 UTC(协…...
基于YOLOv9的PCB板缺陷检测
数据集 PCB缺陷检测,我们直接采用北京大学智能机器人开放实验室数据提供的数据集, 共六类缺陷 漏孔、鼠咬、开路、短路、杂散、杂铜 已经对数据进行了数据增强处理,同时按照YOLO格式配置好,数据内容如下 模型训练 采用YOLO…...
高考结束,踏上西北的美食之旅
高考的帷幕落下,暑期的阳光洒来,是时候放下书本,背上行囊,踏上一场充满期待的西北之旅。而在甘肃这片广袤的土地上,除了壮丽的自然风光,还有众多令人垂涎欲滴的美食等待着您的品尝。当您踏入甘肃࿰…...
人工智能 (AI) 在能源系统中应用的机会和风险
现代文明极度依赖于电力的获取。电力系统支撑着我们视为理所当然的几乎所有基本生活功能。没有电力的获取,大多数经济活动将是不可能的。然而,现有的电网系统并未设计来应对当前——更不用说未来的——电力需求。与此同时,气候变化迫切要求我…...
[AIGC] 定时删除日志文件
文章目录 需求实现脚本解释 需求 实现一个定时任务,定时删除两天前的日志文件,如果某个目录使用量超过80%,则删除文件 实现 要实现这样的要求,我们可以创建一个shell脚本,在该脚本中使用find命令查找两天前的日志文…...
C++:typeid4种cast转换
typeid typeid typeid是C标准库中提供的一种运算符,它用于获取类型的信息。它主要用于类型检查和动态类型识别。当你对一个变量或对象使用typeid运算符时,它会返回一个指向std::type_info类型的指针,这个信息包含了关于该类型名称、大小、基…...
vue3的配置和使用
vue的使用需要配置node且node版本需要在15以上。管理员方式打开cmd,输入node -v,可以查看node版本。 创建vue有以下两种方式 npm init vuelatestnpm create vuelatest创建后输入项目名,其它的输入否即可,新手可以先不用 按照要求…...
决策树划分属性依据
划分依据 基尼系数基尼系数的应用信息熵信息增益信息增益的使用信息增益准则的局限性 最近在学习项目的时候经常用到随机森林,所以对决策树进行探索学习。 基尼系数 基尼系数用来判断不确定性或不纯度,数值范围在0~0.5之间,数值越低&#x…...
短视频利器 ffmpeg (2)
ffmpeg 官网这样写到 Converting video and audio has never been so easy. 如何轻松简单的使用: 1、下载 官网:http://www.ffmpeg.org 安装参考文档: https://blog.csdn.net/qq_36765018/article/details/139067654 2、安装 # 启用RPM …...
【计算机毕业设计】基于Springboot的智能物流管理系统【源码+lw+部署文档】
包含论文源码的压缩包较大,请私信或者加我的绿色小软件获取 免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者…...
【2024】LeetCode HOT 100——图论
目录 1. 岛屿数量1.1 C++实现1.2 Python实现1.3 时空分析2. 腐烂的橘子2.1 C++实现2.2 Python实现2.3 时空分析3. 课程表3.1 C++实现3.2 Python实现3.3 时空分析4. 实现 Trie (前缀树)4.1 C++实现4.2 Python实现4.3 时空分析1. 岛屿数量 🔗 原题链接:200. 岛屿数量 经典的Fl…...
解析Java中1000个常用类:Currency类,你学会了吗?
在线工具站 推荐一个程序员在线工具站:程序员常用工具(http://cxytools.com),有时间戳、JSON格式化、文本对比、HASH生成、UUID生成等常用工具,效率加倍嘎嘎好用。程序员资料站 推荐一个程序员编程资料站:程序员的成长之路(http://cxyroad.com),收录了一些列的技术教程…...
5.x86游戏实战-CE定位基地址
免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 本次游戏没法给 内容参考于:微尘网络安全 上一个内容:4.x86游戏实战-人物状态标志位 上一个内容通过CE未知的初始值、未变动的数值、…...
istitle()方法——判断首字母是否大写其他字母小写
自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 istitle()方法用于判断字符串中所有的单词首字母是否为大写而其他字母为小写。istitle()方法的语法格式如下: str.istitle() …...
Linux实用命令练习
目录 一、常用命令 二、系统命令 三、用户和组 四、权限 五、文件相关命令 六、查找 七、正则表达式 八、输入输出重定向 九、进程控制 十、其他命令 1、远程文件复制:scp 2、locate查找 3、which命令 4、设置或显示环境变量:export 5、修…...
刷题——二叉搜索树与双向链表
二叉搜索树与双向链表_牛客题霸_牛客网 方法一: void dfs(TreeNode* pRootOfTree, TreeNode* &pre){if(pRootOfTree NULL)return;dfs(pRootOfTree->left, pre);//所有左子树if(pre)pre->right pRootOfTree;pRootOfTree->left pre;pre pRootOfTree…...
【Linux】进程优先级 | 环境变量
目录 Ⅰ. 进程优先级(Process Priority) 1. 什么是进程优先级? 2. 查看系统进程 3. 修改进程优先级 4.优先级调度原理 Ⅱ. 进程的切换(Process Switch) 1. 竞争与独立 2. 并行与并发 3. 进程抢占 4.实现切换…...
最新手动迁移WordPress方法
手动迁移WordPress网站主要步骤有:迁移文件、迁移数据库、修复数据库连接。 对于WordPress Installations,只有两个主要组件,您需要访问手动将安装迁移到新主机:文件和数据库。 迁移文件 将文件从旧主机迁移到新的最简单方法之…...
ChatGPT在程序开发中的应用:提升生产力的秘密武器
在当今飞速发展的科技时代,程序开发已经成为许多企业和个人必不可少的技能。然而,编写代码并非总是顺风顺水,面对复杂的算法、繁琐的调试、持续不断的需求变更,程序员们常常感到压力山大。在这种情况下,ChatGPT应运而生…...
AI与Python共舞:如何利用深度学习优化推荐系统?
AI与Python共舞:如何利用深度学习优化推荐系统? 当你在浏览新闻、电影或是购物平台时,那些仿佛读懂你心思的个性化推荐背后,正是AI技术与Python语言的精妙协作。今天,我们将通过一个实际案例,探索如何利用…...
URLSearchParams: 浏览器中的查询字符串处理利器
一、 概述 在Web开发中,处理URL的查询字符串是一个常见任务。URLSearchParams API 提供了一种简单而强大的方法来处理Web URL的查询参数。它是一个内置的浏览器API,允许你以名称/值对的形式轻松地创建、读取、更新和删除查询参数。 二、URLSearchParam…...
2024最新初级会计职称题库来啦!!!
16.根据增值税法律制度的规定,下列各项中,属于"提供加工、修理修配劳务"的是()。 A.修理小汽车 B.修缮办公楼 C.爆破 D.矿山穿孔 答案:A 解析:选项AB:修理有形动产(…...
Stirling PDF 部署 - 强大的PDF Web在线编辑工具箱
简介 这是一个强大的、可本地托管的、基于 Web 的 PDF 操作工具,可使用 Docker部署。它使您能够对 PDF 文件执行各种操作,包括拆分、合并、转换、重组、添加图像、旋转、压缩等。这个本地托管的 Web 应用程序已经发展到包含一套全面的功能,可…...
大数据面试题之MapReduce(3)
目录 reduce任务什么时候开始? MapReduce的reduce使用的是什么排序? MapReduce怎么确定MapTask的数量? Map数量由什么决定 MapReduce的map进程和reducer进程的ivm垃圾回收器怎么选择可以提高吞吐量? MapReduce的task数目划分 MapReduce作业执行的过程中,中…...
[leetcode]squares-of-a-sorted-array. 有序数组的平方
. - 力扣(LeetCode) class Solution { public:vector<int> sortedSquares(vector<int>& nums) {int n nums.size();vector<int> ans(n);for (int i 0, j n - 1, pos n - 1; i < j;) {if (nums[i] * nums[i] > nums[j] *…...
使用Spring Boot和Spring Data JPA进行数据库操作
使用Spring Boot和Spring Data JPA进行数据库操作 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!在现代的Web应用开发中,数据库操作是不可或缺的一…...
《昇思25天学习打卡营第17天 | 昇思MindSporeCycleGAN图像风格迁移互换》
17天 本节学习了CycleGAN图像风格迁移互换。 CycleGAN即循环对抗生成网络,该模型实现了一种在没有配对示例的情况下学习将图像从源域 X 转换到目标域 Y 的方法。该模型一个重要应用领域是域迁移,可以通俗地理解为图像风格迁移。其实在 CycleGAN 之前&a…...
SecureCRT使用SSH登录服务器报错:Key exchange failed
SecureCRT使用SSH登录Ubuntu服务器报错:Key exchange failed 原因: ssh客户端与服务器的公钥协商失败,SecureCRT客户端所指定的秘钥交换算法(KexAlgorithms ),不在服务端支持范围内。可能是服务端的sshd版…...
Oracle给用户单个表查询权限
Oracle给用户单个表查询权限 1. 创建用户 --创建用户thfj_test,密码为thfj_test create user thfj_test identified by thfj_test;2. 用户授权 --授权连接数据库权限给thfj_test grant create session to thfj_test; --授权查询表USER_INFO 的权限给thfj_test grant sele…...
[Go 微服务] Kratos 验证码业务
文章目录 1.环境准备2.验证码服务2.1 kratos 初始化验证码服务项目2.2 使用 Protobuf 定义验证码生成接口2.3 业务逻辑代码实现 1.环境准备 protoc和protoc-gen-go插件安装和kratos工具安装 protoc下载 下载二进制文件:https://github.com/protocolbuffers/protobu…...
等保2.0安全计算环境解读
等保2.0,即网络安全等级保护2.0制度,是中国为了适应信息技术的快速发展和安全威胁的新变化而推出的网络安全保护标准。相较于等保1.0,等保2.0更加强调主动防御、动态防御和全面审计,旨在实现对各类信息系统的全面保护。 安全计算环…...
Qt视频播放器(二)
文章目录 1. 安装FFmpeg库2. 创建Qt项目3. 配置项目文件CMakeLists.txt4. 实现核心FFmpeg功能`videoplayer.h``videoplayer.cpp`5. 实现QML界面`main.qml`6. 主函数`main.cpp`运行项目详细说明结合FFmpeg进行视频播放的核心部分,并使用QML进行界面设计,您可以实现一个功能强大…...
普元EOS学习笔记-创建精简应用
前言 本文依旧基于EOS8.3进行描述。 在上一篇文章《EOS8.3精简版安装》中,我们了解到普元预编译好的EOS的精简版压缩包,安装后,只能进行低开,而无法高开。 EOS精简版的高开方式是使用EOS开发工具提供的IDE,创建一个…...
观察者模式在金融业务中的应用及其框架实现
引言 观察者模式(Observer Pattern)是一种行为设计模式,它定义了一种一对多的依赖关系,使得多个观察者对象同时监听某一个主题对象。当这个主题对象发生变化时,会通知所有观察者对象,使它们能够自动更新。…...
最新docker仓库镜像
目前下面的docker仓库镜像源还能使用。 vi /etc/docker/daemon.json添加如下配置{"registry-mirrors": ["https://hub.uuuadc.top", "https://docker.anyhub.us.kg", "https://dockerhub.jobcher.com", "https://dockerhub.icu&…...
springboot 3.x相比之前版本有什么区别
Spring Boot 3.x相比之前的版本(尤其是Spring Boot 2.x),主要存在以下几个显著的区别和新特性: Java版本要求: Spring Boot 3.x要求至少使用Java 17作为最低版本,同时已经通过了Java 19的测试,…...
Python逻辑控制语句 之 判断语句--if语句的基本结构
1.程序执行的三大流程 顺序 分支(判断) 循环 2.if 语句的介绍 单独的 if 语句,就是 “如果 条件成⽴,做什么事” 3.if 语句的语法 if 判断条件: 判断条件成立,执行的代码…...
LeetCode 算法:翻转二叉树 c++
原题链接🔗:翻转二叉树 难度:简单⭐️ 题目 给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 示例 1: 输入:root [4,2,7,1,3,6,9] 输出:[4,7,2,9,6,3,1] 示例 …...
七天速通javaSE:第五天 数组进阶
文章目录 前言一、二维数组二、Arrays类1.toString打印数组内各元素1.1 示例1.2 自己实现内部逻辑 2. sort升序排列3. fill数组填充(重新赋值)4.equals比较数组元素是否相等 三、冒泡排序 前言 本文将学习二维数组、arrays类以及冒泡排序 一、二维数组 …...
游戏心理学Day28
独立游戏团队架构 独立游戏工作室是一个包括编程美术设计院校项目管理和运营等各种职能的团队找到可以共同奋斗。数月甚至数年的合适人选并不是一件容易的事情。游戏开发过程中要涉及多种常规工作。小团队的每个成员通常都要身兼数职,而且有些角色常由多人担任。 …...
鸿蒙开发设备管理:【@ohos.multimodalInput.inputEventClient (注入按键)】
注入按键 InputEventClient模块提供了注入按键能力。 说明: 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。本模块接口均为系统接口,三方应用不支持调用。 导入模块 import inputEventCli…...
C++:std::function的libc++实现
std::function是个有点神奇的模板,无论是普通函数、函数对象、lambda表达式还是std::bind的返回值(以上统称为可调用对象(Callable)),无论可调用对象的实际类型是什么,无论是有状态的还是无状态…...
DM 的断点续传测试
作者: 大鱼海棠 原文来源: https://tidb.net/blog/4540ae34 一、概述 DM有all、full、incremental三种数据迁移同步方式(task-mode),在all同步模式下,因一些特殊情况,需要变更上游MySQL的数…...
力扣每日一题 6/30 记忆化搜索/动态规划
博客主页:誓则盟约系列专栏:IT竞赛 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ 494.目标和【中等】 题目: 给你一个非负整数数组 nums 和一个…...
图像基础知识入门【图像概念不同图像格式】
图像基础知识入门【图像概念&不同图像格式】 最近有在处理图像转换,因此稍微补足了一下图像相关知识,特在此记录。下面汇总是我根据自己理解和网上查阅资料而来。如有错误,欢迎大家指正。 1 基础概念 像素/分辨率 像素(Pixel)ÿ…...
HP服务器基于SNMP-ilo4的硬件监控指标解读
监控易是一款功能全面的IT基础设施监控软件,它通过SNMP协议与HP服务器内置的ilo4远程管理卡进行通信,实现对HP服务器硬件状态的实时监控。本文将针对监控易中基于SNMP-ilo4的HP服务器硬件监控指标进行解读,帮助运维团队更好地理解和应用这些监…...
arm (exti中断)
src/key_it.c 1 #include "key_it.h"2 3 //按键1中断配置4 void key1_config()5 {6 //RCC章节7 //1:使能gpio f8 RCC->MP_AHB4ENSETR | (0x1<<5);9 //因为exti和gic属于芯片内部 所以无需使能10 11 //GPIO章节12 //1:将…...
Go语言--工程管理、临时/永久设置GOPATH、main函数以及init函数
工作区 Go 代码必须放在工作区中。工作区其实就是一个对应于特定工程的目录,它应包含3个子目录:src 目录、pkg目录和bin 目录。 src 目录:用于以代码包的形式组织并保存 Go源码文件。(比如:.go.chs等)pkg 目录:用于存放经由 go install 命令构建安装后的代码包(包…...
QStringListModel 绑定到QListView
1.QStringListModel 绑定到listView,从而实现MV模型视图 2.通过QStringListModel的新增、删除、插入、上下移动,listView来展示出来 3.下移动一行,传入curRow2 的个人理解 布局 .h声明 private:QStringList m_strList;QStringListModel *m_m…...
python的os.walk()
os.walk() 是一个非常有用的函数,用于在Python中遍历文件夹树。它返回一个生成器,该生成器在每次迭代时返回一个包含三个元素的元组:(当前文件夹的路径,文件夹中的子文件夹的列表,文件夹中的文件的列表)。这个函数对于…...
14-26 剑和侠客 – 预训练模型三部曲3 – 机器人时代来临
概述 在第 1 部分和第 2 部分中,我们讨论了适用于文本和图像任务的预训练模型,并探索了当今常用的模型。我们分析了这些模型的架构以及如何将它们用于特定任务。实现 AGI 所需的两个主要支柱是语言理解和机器的视觉能力。有许多任务与这两种能力有关。 …...
MacOS miniconda安装方法
打开macos “终端” 应用 执行命令 mkdir -p ~/miniconda3curl https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-latest-MacOSX-arm64.sh -o ~/miniconda3/miniconda.shbash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3rm -rf ~/miniconda3/mini…...
彻底乱了!5米长豪华车,原价近30万,现仅售20万出头,还要啥凯美瑞?
今天说的这款车就是凯迪拉克CT5。凯迪拉克CT5车长接近5米,全系标配2.0T+10AT动力系统,整体性价比超高,实力剑指宝马3系、奥迪A4L。作为一款新美式豪华格调轿车——凯迪拉克CT5在中国市场销量超20万辆,运动轿车价值新标杆诞生!作为一款美系豪华中级轿车,凯迪拉克CT5近年来…...
赛力斯汽车打造智能安全联合实验室,19项首期成果发布
5月25日,赛力斯汽车与中国汽研“智能网联新能源汽车智能安全联合实验室”揭牌仪式在重庆隆重举行。智能网联新能源汽车是重庆制造业的优势产业,是建设“33618”现代制造业集群体系的重要支撑。在实现“万亿级”目标指导下,“产学研”深度融合创新的智能安全联合实验室成立,…...
Shell脚本的分支语句,循环语句
分支语句 if 表达式 then 命令表 fi 如果表达式为真,则执行命令表中的命令,否则退出。执行fi后的语句。 给文件权限:chmod 0777 文件名 输出: ./文件名 grep 查找用户名,管道wc -l 统计字符 2.多路分支语句 记得给文件名权限喔&#x…...
kotlin基础之协程
Kotlin协程(Coroutines)是Kotlin提供的一种轻量级的线程模型,它允许我们以非阻塞的方式编写异步代码,而无需使用回调、线程或复杂的并发API。协程是一种用户态的轻量级线程,它可以在需要时挂起和恢复,从而有…...
Java日志体系概述
一. 日志体系分类 1.1 功能分类 1.2 jar包分类 二. 以log4j2为例 2.1 slf4j-api的初始化动态绑定过程 一. 日志体系分类 1.1 功能分类 门面类 slf4j:Simple Logging Facade for Java,为java提供的简单日志Facade具体实现类 logbacklog4j1log4j2jul&…...
卢文岩博士受邀参与中国科学院大学校友论坛 解码DPU核心价值
近日,第五届中国科学院大学校友创新论坛正式举行,本次论坛聚焦科技前沿领域,旨在搭建高端对话平台,促进产学研深度融合。在大算力时代——AI技术前沿沙龙上,中科驭数高级副总裁、CTO卢文岩博士受邀分享《DPU——连接算…...