前言
移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景.比如某旅游网站需要完全展示出全国的城市列表,再有将所有通讯录的姓名按照A,B,C...首字母依次排序展示.
长列表的数量一般在几百条范围内不会出现意外的效果,浏览器本身足以支撑.可一旦数量级达到上千,页面渲染过程会出现明显的卡顿.数量突破上万甚至十几万时,网页可能直接崩溃了.
为了解决长列表造成的渲染压力,业界出现了相应的应对技术,即长列表的虚拟滚动.
虚拟滚动的本质,不管页面如何滑动,HTML 文档只渲染当前屏幕视口展现出来的少量Dom元素.
假设长列表有10万条数据,对用户而言,他永远只会看到屏幕展现出的那十几条数据.因此页面滑动时,通过监听滚动事件快速切换视口的数据,就能高度模拟滚动效果.
虚拟滚动最终只需要渲染少量的Dom元素就能模拟出相似的滚动效果,这让前端工程师开发几万甚至十几万条的长列表都成为了可能.
下图是手机上实测滑动一张涵盖全球所有城市的长列表页面(源代码贴在了文章结尾).
滚动原理
为了理解虚拟滚动的实现原理,首先观察下面图片.手指向下滑动时,HTML页面也会随之向上滚动. 通过图片标记的距离,我们可以得出这样的结论.当屏幕视口的上边沿和id为item的div元素上边沿重合时,item元素距离长列表顶部的距离刚好等于页面的滚动距离scrollTop(这个结论会在后面计算距离时用到).
虚拟滚动为了模拟出逼真的滚动效果,首先应该满足以下两个要求.
虚拟滚动列表的滚动条和普通列表保持一致.比如列表包含1000条数据,当浏览器使用普通渲染的方式,假设滚动条需要向下滚动5000px才能贴底.那么应用虚拟滚动技术后,滚动条也应该保证具备相同的特征,向下滚动5000px才能贴底.
虚拟滚动只会渲染视口以及上下两侧的部分Dom元素.随着滚动条往下滑动,视图的内容要实时更新,保证同普通渲染长列表时,看到的内容一致.
为了满足上面的要求,html设计结构如下.
.wrapper是最外层的容器元素,position设置成absolute或relative,子元素依据它做定位.
子元素.background和.list是实现虚拟滚动的关键..background是一个空的div,但它需要设置高度,高度值等于长列表所有列表项高度相加的总和.另外还要将其设置成绝对定位,z-index的值置为-1.
.list内部负责动态渲染视口观察到的Dom元素,position设置成absolute.
假如上面代码total_height等于10000px,页面运行效果图如下所示. 由于子元素.background设置了高度,父元素.wrapper就会被子元素支撑起来,同时会出现滚动条. 如果此时向下滑动,两个子元素.background和.list会同时向上滚动.当滚动距离达到了9324px,滚动条也抵达了底部. 这是因为父元素.wrapper本身高度为676px,加上滑动距离9324px,结果就刚好等于列表总高度10000px. 通过观察以上行为可知,.background虽然只是一个空的div,但是通过给它赋予列表的总高度,可以让右侧的滚动条和普通长列表渲染产生的滚动条保持外观和行为上一致.
滚动条的问题解决了,但随着滚动条往下滑,数据列表随之上移,列表全部移出了屏幕之后,接下来的滑动全是白屏. 为了解决白屏问题,视口必须始终展现出滑动的数据.那么.list元素要根据滑动的距离动态更新自身绝对定位的top值,这样就能确保.list不被划出屏幕之外.同时还要依据滑动的距离动态渲染当前视口应该展示的数据.
观察下面动效图,右侧Dom结构展示了滑动时的变化.
滚动条往下快速滑动后,列表的Dom元素快速渲染刷新.此时除了.list内部的Dom元素不断的更换,.list元素自身也在不断修改transform: translate3d(0, ? px ,0)样式值(修改translate3d能达到和修改top属性值相似的效果).
经过上面的讲解,虚拟滚动的实现逻辑已经清晰.首先js监听滚动条的滑动事件,再通过滑动距离计算出.list元素要渲染哪些子元素,其次更新.list元素位置.滚动条不断滑动时,子元素和位置也不断更新,视口上便模拟出了滚动效果.
实现
开发的Demo页面如下图所示.列表项包含了以下三种结构:
小型列表项,城市首字母单独成一行,高度为50px;
普通列表项,左侧英文名,右侧中文名,高度为100px;
大型列表项,左侧英文名,中间中文名,右侧一张图片,高度为150px;
列表数据city_data的json结构类似如下,type为1代表采用小型列表项的样式结构渲染,2代表普通列表项,3代表大型列表项.
[{"name":"A","value":"","type":1},{"name":"Al l'Ayn","value":"艾因","type":2},{"name":"Aana","value":"阿纳","type":3} ... ]
city_data包含了长列表的所有数据,city_data获取后先遍历调整每一项的数据结构(代码如下).
通过以下方法处理,每一个列表项最终都包含一个top和height值.top表示该项距离长列表顶部的长度,而height值指该项的高度. total_height即整个列表的总高度,最终要赋予上文提及的.background元素.处理完后的数据赋予this.list存储,并记录下最小列表项的高度this.min_height.
mounted () {
function getHeight (type) { // 根据 type 值返回高度
switch (type) {
case 1: return 50;
case 2: return 100;
case 3: return 150;
default:
return "";
}
}
let total_height = 0;
const list = city_data.map((data, index) => {
const height = getHeight(data.type);
const ob = {
index,
height,
top: total_height,
data
}
total_height += height;
return ob;
})
this.total_height = total_height; // 列表总高度
this.list = list;
this.min_height = 50; // 最小高度是50
//屏幕最大能容纳的列表项数量,containerHeight是父容器高度,按照最小高度来计算
this.maxNum = Math.ceil(containerHeight / this.min_height);
}
html根据type值渲染不同的样式结构(代码如下).父容器.wrapper绑定一个滑动事件onScroll,列表元素.list内部不是遍历this.list数组,因为this.list是原始数据,包含了所有的列表项.
模板里面只需要遍历视口需要展现的数据runList,数组runList包含的数据会随着滚动事件不断更新.
{{item.data.name}}
{{item.data.value}}
滚动事件触发onScroll方法(代码如下),由于滚动条的触发频率非常高,为了减少浏览器的计算量,使用requestAnimationFrame函数做一下节流.
滚动事件对象e可以获取当前滚动条滑动的距离distance.依据distance,只要计算出runList的列表数据以及修改.list的位置信息就大功告成了.
onScroll (e) {
if (this.ticking) {
return;
}
this.ticking = true;
requestAnimationFrame(() => {
this.ticking = false;
})
const distance = e.target.scrollTop;
this.distance = distance;
this.getRunData(distance);
}
如何根据滚动距离快速找到屏幕视口下应该渲染的首个列表项元素呢?
this.list是长列表的数据源,其中每一个列表项都存储自己距离长列表顶部的距离top以及自身的高度height. 上文提到一个结论,页面滚动过程中,如果视口的上边沿和某个列表项的上边沿刚好重合时,滑动距离scrollTop刚好等于该列表项距离长列表顶部的距离top.
那么此时如果页面再往上挪动一点,视口下第一个列表项只显示了部分,另一部分划出了屏幕外看不见.这时我们仍然判定视口下的起始元素仍然是该列表项,除非它继续往上移动直至彻底移出屏幕.
那么我们判端视口下渲染的第一个元素的标准便是页面的滚动距离scrollTop位于该列表项元素的top和top + height之间.
依据上面原理,可以采用二分法实现快速查询(代码如下).
//二分法计算起始索引,scrollTop为滚动距离
getStartIndex (scrollTop) {
let start = 0, end = this.list.length - 1;
while (start < end) {
const mid = Math.floor((start + end) / 2);
const { top, height } = this.list[mid];
if (scrollTop >= top && scrollTop < top + height) {
start = mid;
break;
} else if (scrollTop >= top + height) {
start = mid + 1;
} else if (scrollTop < top) {
end = mid - 1;
}
}
return start;
}
二分法计算出了视口下渲染的第一个元素位于this.list数组中的索引,命名为起始索引start_index.接下来进入核心函数getRunData(代码如下).它主要做了以下两件事.
动态更新runList列表数据
动态更新.list长列表元素的的位置
实际开发中,假设屏幕高度为1000px,最小的列表项为50px,那么屏幕所能容纳的最大列表项数量this.maxNum为20个. 根据滑动距离计算出起始索引start_index,再从数据源this.list依据start_index截取20个元素赋予this.runList不就完成数据更新了吗?
this.runList如果只盛放刚好一个屏幕容纳的最大数量,当滚动条快速滚动后,界面的渲染速度会跟不上手指滑动速度,底部会有白屏闪烁.
解决此问题的方法可以在HTML文档上多渲染一点缓冲数据.比如下面getRunData函数会渲染能容纳三张屏幕高度的列表项数量,分别对应上屏、中屏和下屏.
中屏即当前视口对应的屏幕,上屏和下屏存放着视口上下两边没有展现的缓冲Dom.首先利用二分法可以查询到屏幕视口下第一个列表项元素索引start_index,那么上屏和下屏的首个列表项索引也能依据start_index轻松得出.
getRunData (distance = null) {
//滚动距离
const scrollTop = distance ? distance : this.$refs.container.scrollTop;
//在哪个范围内不执行滚动
if (this.scroll_scale) {
if (scrollTop > this.scroll_scale[0] && scrollTop < this.scroll_scale[1]) {
return;
}
}
//起始索引
let start_index = this.getStartIndex(scrollTop);
start_index = start_index < 0 ? 0 : start_index;
//上屏索引,this.cache_screens默认为1,缓存一个屏幕
let upper_start_index = start_index - this.maxNum * this.cache_screens;
upper_start_index = upper_start_index < 0 ? 0 : upper_start_index;
// 调整offset
this.$refs.container.style.transform = `translate3d(0,${this.list[upper_start_index].top}px,0)`;
//中间屏幕的元素
const mid_list = this.list.slice(start_index, start_index + this.maxNum);
// 上屏
const upper_list = this.list.slice(upper_start_index, start_index);
// 下屏元素
let down_start_index = start_index + this.maxNum;
down_start_index = down_start_index > this.list.length - 1 ? this.list.length : down_start_index;
this.scroll_scale = [this.list[Math.floor(upper_start_index + this.maxNum / 2)].top, this.list[Math.ceil(start_index + this.maxNum / 2)].top];
const down_list = this.list.slice(down_start_index, down_start_index + this.maxNum * this.cache_screens);
this.runList = [...upper_list, ...mid_list, ...down_list];
}
滚动事件触发的频率很高,作为开发者而言,我们要尽可能减少浏览器的计算量.因此组件内可以缓存一个滚动范围,即数组this.scroll_scale(数据结构类似于[5000,5675]),滑动距离处于该范围下,浏览器不用更新列表数据.
滚动距离scrollTop一旦处于滚动范围内,getRunData函数不做任何操作,手指滑动时就利用默认的滚动行为,让.list元素随着手指上下移动.
假设滚动方向向下,当scrollTop跑出了滚动范围后,滑动视口.wrapper的上边沿和下一个列表项上边沿重合的一瞬间,getRunData函数先计算出起始索引start_index,再通过start_index得到上屏第一个元素索引upper_start_index.
由于之前组件挂载时每个列表项都缓存了自己距离长列表顶部的距离,因此通过this.list[upper_start_index].top就能拿到.list元素应该被赋予的位置信息.然后重新计算出新的列表数据runList渲染页面,并缓存新状态下的滚动范围.
至此虚拟滚动通过以上几步操作就实现了.上面介绍的实践方法虽然用起来很简单,但前提需要设计师规划设计稿时将不同样式列表项的高度率先定义.
如果列表项的高度需要根据里面内容自然撑开,无法做到在页面设计时定死,可以阅读下面的参考文章实现. 虽然列表项高度自适应情形下实现的虚拟滚动听上去很诱人,但是它需要增加额外的处理步骤以及面对新的问题(比如列表项包含异步加载的图片时,高度计算会变的困难),另外还会大大增加浏览器的计算量.因此设计稿的列表项是否需要定义高度可依据具体场景而定.
源代码
源代码
参考
高性能渲染十万条数据 新手也能看懂的虚拟滚动实现方法 浅说虚拟列表的实现原理
到此这篇关于vue轻松实现虚拟滚动的示例代码的文章就介绍到这了,更多相关vue 虚拟滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
你可能感兴趣的:(vue轻松实现虚拟滚动的示例代码)
制造企业智慧物流架构解决方案
有限无限资料库
智能制造 数字化 制造 架构
本文档主要内容如下:1.物流4.0与智慧物流物流4.0:作为工业4.0的重要组成部分,物流4.0强调通过信息化和智能化手段,实现物流供应链的高效协同和优化。智慧物流:利用物联网、大数据、云计算等技术,实现物流过程的自动化、智能化和可视化,提升物流效率和服务质量。2.未来企业核心竞争力:高效物流供应链协同核心环节:涵盖采购物流、生产物流、销售物流、供应网络、智能制造和分销网络。目标:通过高效的供应链
Effective Objective-C 2.0 读书笔记——协议和分类
小鹿撞出了脑震荡
objective-c 分类 ios
EffectiveObjective-C2.0读书笔记——协议和分类文章目录EffectiveObjective-C2.0读书笔记——协议和分类在分类中添加属性使用“class-continuation分类”隐藏实现细节通过协议提供匿名对象在分类中添加属性尽管从技术上说,分类里也可以声明属性,但这种做法还是要尽量避免。原因在于,除了class-continuation分类之外,其他分类都无法向类中
Linux Media 子系统 V4l2
aningxiaoxixi
camera linux 服务器 网络
一创建V4l2的entity在Linux内核的MediaController框架中,V4L2设备作为实体(entity)的注册过程涉及以下步骤:1.初始化MediaController结构驱动首先创建一个media_device实例,并与V4L2设备(如v4l2_device)关联。例如:structmedia_device*mdev=devm_kzalloc(dev,sizeof(*mdev),
远程分布式 IO 模块中的数字量模块:工业自动化的 “神经末梢”
明达技术
分布式 自动化 运维
在工业自动化的宏大舞台上,远程分布式IO模块正扮演着越来越关键的角色,而其中的数字量模块更是如同“神经末梢”,敏锐地感知和传递着工业生产中的各种状态信息。今天,就让我带您走进远程分布式IO模块中数字量模块的世界,揭开它神秘的面纱。数字量模块:精准感知与传递的使者数字量,简单来说,就是只有两种状态的量,比如开关的开与关、电机的启动与停止、阀门的打开与关闭等。数字量模块的核心任务,就是准确地采集这些数
tortoisegit push 时提示 git did not exit cleanly (exit code 1)
**Dragon**
Git 冲突解决 合并 提交 远程仓库
我看了一些人把这个问题搞得很玄学,没有一点关键点,所以写了这篇,希望对你们有用。英文版的是这样的这个问题的本质是有修改没有提交,或者有更新没有拉取,拉取之后可能没有提交的问题我这边是在提交本地修改前,有其他人在这个分支提交了修改到远程仓库,导致我要push到远程仓库的时候冲突了,所以提示didnotexitcleanly。这是要合并上个人提交到这个分支的修改setting=>merge之后可能会有
微信小程序 navigator 和 wx.navigateTo不跳转问题
**Dragon**
小程序 前端
这个问题可能是很多新手会遇到的问题,有经验的人一眼就能看出问题了1、先确保app.js已经注册了页面路径2、索要跳转的页面不是tabBar,tabBar也可以设置open-type="switchTab"跳转3、我们来一起分析下先看有问题的代码,看起来很正常//wxml更多>>因为用navigator跳转不了,我尝试用wx.navigateTo,wx.navigateTo({url:url,eve
用java实现word(docx)转换为pdf格式文档(简单版)
xiaoxiaobaozhu
java word pdf
导入依赖com.documents4jdocuments4j-local1.0.3com.documents4jdocuments4j-transformer-msoffice-word1.0.3代码//word文档替换成pdf文档privatestaticvoidreplaceWordToPdf(StringwordPath,StringpdfPath){FileinputWord=newFil
【CXX】1 CXX主要概念概览
Source.Liu
CXX rust CXX c++
本文描述了CXX(一个用于在Rust和C++之间进行桥接的库)中的关键概念,特别是FFI(外部函数接口)边界所涉及的三种主要类型:共享结构体、不透明类型和函数。一、示例代码#[cxx::bridge]modffi{//任何共享结构,其字段对两种语言都是可见的。structBlobMetadata{size:usize,tags:Vec,}extern"Rust"{//两种语言都可以传递零个或多个不
linux 查看设备中的摄像头&迅速验证设备号
Tipriest_
Ubuntu YOLO目标检测 linux 摄像头 图像处理
通常,摄像头在系统中会被识别为/dev/video*设备文件,比如/dev/video0、/dev/video1等。用户可能有多个摄像头,比如内置摄像头和外接USB摄像头,这时候每个摄像头会被分配不同的设备号。1.列出所有摄像头设备方法1:使用v4l-utils工具安装v4-utilssudoapt-getinstallv4l-utils列出所有视频设备v4l2-ctl--list-devices
对JVM的错误理解与纠正
众乐乐_2008
面试 jvm
从程序的角度我来整理一下,先是程序有通过类加载器加载字节码到JVM,然后初始化变量,通过执行引擎开始运行,在方法中放的是方法、类和静态变量和常量,然后cpu从方法区获取指令,然后从栈桢的局部变量中获取参数的变量名,从程序计数栈中去运行临时变量,冲动态绑定中过去获取引用的方法和字符串,然后方法执行完后,返回记录当前方法调用者的地址继续从方法区获取指令,继续获取指令并执行。然后附加信息是处理异常和JI
深入剖析 Burp Suite:Web 应用安全测试利器
垚垚 Securify 前沿站
十大漏洞 网络 前端 web安全 安全 系统安全
目录前言一、BurpSuite简介二、功能组件详解三、使用场景四、安装与使用步骤安装步骤使用步骤五、总结前言在网络安全的复杂版图中,BurpSuite宛如一颗璀璨的明珠,以其强大的功能和广泛的适用性,成为众多安全从业者不可或缺的得力助手。无论是为了保障企业级Web应用上线前的安全无虞,还是在渗透测试中探寻潜在的安全隐患,亦或是在安全研究领域开拓创新,BurpSuite都扮演着举足轻重的角色。接下来
Express 中间件分类
yqcoder
vue.js 前端 javascript
一、按功能用途分类1.应用级中间件这类中间件应用于整个Express应用程序,会对每个进入应用的请求进行处理。通过`app.use()`方法挂载,可用于执行一些全局性的任务,像日志记录、请求预处理、设置响应头这类操作。constexpress=require("express");constapp=express();//记录请求日志的应用级中间件app.use((req,res,next)=>{
python学习环境
HelloWorld!
python使用 python
python学习环境python的安装Anaconda的安装Anaconda虚拟环境pythonIDE的选择pycharm项目的环境变量选择从这篇文章开始,记录python学习的过程。本篇从python学习的环境开始展开。python的安装我主要是在windows环境下进行python3的学习。我所了解到主要有两种常见的python安装方法。直接在python官方网站上下载python,然后进行安
分布式存储--大规模订单架构设计
梦江河
大数据 分布式 订单系统 大数据
架构一:MySQL+HBase+ElasticsearchMySQL存储实时订单,HBase存储历史订单,Elasticsearch实现订单的多维度搜索。架构复杂,运维维护成本高架构二:MySQL+TablestoreTablestore其实是HBase+Elasticsearch,既能存储大量数据,也能全文搜索架构三:分布式数据库TiDB+全文搜索功能参考文章
mysql用函数调用存储过程_mysql 函数 调用 存储过程
weixin_39585974
mysql用函数调用存储过程
Mysql高级之存储过程原文:Mysql高级之存储过程概念类似于函数,就是把一段代码封装起来,当要执行这一段代码的时候,可以通过调用该存储过程来实现.在封装的语句体里面,可以用if/else,case,while等控制结构.可以进行sql编程.在mysql中,存储过程和函数...文章杰克.陈2014-11-14657浏览量Mysql函数(function)|存储过程(procedure)funct
mysql调用存储函数语法_MySQL调用存储过程和函数
weixin_39979332
mysql调用存储函数语法
MySQL调用存储过程和函数用call和你过程名以及一个括号,括号里面根据需要,加入参数,参数包括输入参数、输出参数、输入输出参数。具体的调用方法可以参看上面的例子。1.调用存储过程存储过程是通过CALL语向进行调用的,语法如下:CALLsp_name([parameter[,...]])CALL语句调用一个先前用CREATEPROCEDURE创建的存储过程,其中sp_name为存储过程的参数。【
Redis在京东到家的订单中的使用
weixin_33948416
数据库 java 大数据
背景Redis作为一款性能优异的内存数据库,在互联网公司有着多种应用场景,下面介绍下Redis在京东到家的订单列表中的使用场景。主要从以下几个方面来介绍:订单列表在Redis中的存储结构Redis和DB数据一致性保证Redis中的分布式锁缓存防穿透和雪崩订单列表在Redis中的存储结构订单列表数据在缓存中,是以用户的唯一标识作为键,以一个按下单时间倒序的有序集合为值进行存储的。大家都知道Redis
git的基本操作
NeoFive
git使用 git
教程地址:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b0001.安装linuxinstallgit:sudoapt-getinstallgitinstallwithsource:先从Git官网下载源码,然后解压,依次输入:./config,make,sudomakeinstall这几
Bengio新作Aaren:探索Transformer性能与RNN效率的融合
AI记忆
深度 学习论文与相关应用 transformer rnn 深度学习 Aaren Bengio
论文链接:https://arxiv.org/pdf/2405.13956一、摘要总结:本文提出了一种新的注意力机制,名为Aaren,它将注意力视为一种特殊的递归神经网络(RNN),能够高效地计算其多对一RNN输出。Aaren不仅能够并行训练,而且能够在推理时高效地更新新令牌,仅需要常数内存。实验表明,Aaren在四个流行的序列问题设置(强化学习、事件预测、时间序列分类和时间序列预测)的38个数据
python原生代码中的列表,元组和数组的区别,一个表格搞明白
涛涛讲AI
AI编程 效率工具 python 开发语言
经常搞混,以备后用。在Python原生代码里,数组一般是指由array模块创建的数组,下面以表格形式呈现列表、元组和array模块数组的区别:在Python原生代码里,数组一般是指由array模块创建的数组,下面以表格形式呈现列表、元组和array模块数组的区别:对比维度列表(list)元组(tuple)数组(array.array)定义语法使用方括号[]定义,元素间用逗号分隔。示例:my_lis
数据结构-链表【chapter1】【c语言版】
躺不平的理查德
数据结构 数据结构 链表 c语言 visual studio 开发语言
目录1链表的优势:2链表的组成:3.一般使用结构体的形式来实现链表:4.单向链表实现(创建,遍历,释放):4.1代码关键点备注:5.查找节点:5.1.按值查找节点5.2.按位置查找节点5.3查找是否存在某个值5.4.查找链表中最后一个节点5.5查找链表中倒数第k个节点6.删除节点6.1删除头节点6.2删除尾节点6.3.删除指定位置的节点6.4.删除指定值的节点6.5.释放整个链表1链表的优势:动态
C++--this关键字
躺不平的理查德
c++ c++ 开发语言 1024程序员节 c语言 学习
目录1.this关键字的解释2.this关键字的使用2.1访问当前对象的成员和解决命名冲突。2.2链式调用3.this关键字总结3.1.常量指针3.2.在静态成员函数中不可用3.3this指向3.1.this在继承关系中的指向3.2.this在派生类中的指向3.3.基类指针或引用访问基类成员1.this关键字的解释在C++中,this关键字是一个指针,指向当前对象的地址。它在类的成员函数中使用,提
git bash常用命令
qq_37457269
git bash elasticsearch
GitBash是一个用于在Windows上执行Git命令的命令行工具,它提供了一个类似于Linux的终端环境,允许用户执行各种Git操作。以下是一些常用的GitBash命令及其说明:配置相关gitconfig--globaluser.name“YourName”:设置全局用户名。gitconfig--globaluser.email“
[email protected] ”:设置全局用户邮箱。
利用Infinity Embeddings创建文本嵌入
qahaj
python
技术背景介绍在自然语言处理(NLP)任务中,文本嵌入是一种将文本数据转换成固定维度向量的技术。这些向量能够捕捉文本之间的语义关系,使得在后续的任务(如文本分类、相似度计算等)中非常实用。Infinity嵌入模型是一种能够方便创建高质量文本嵌入的现代工具。核心原理解析InfinityEmbeddings利用强大的预训练模型,通过对输入的文本数据进行编码,生成具有语义意义的高维向量。这个过程不仅仅是简
Uniswap V3:流动性提取和收集
OpenBuild.xyz
Uniswap 人工智能 智能合约 web3 区块链 去中心化
作者:WongSSH引言本系列文章将带领读者从零实现UniswapV3核心功能,深入解析其设计与实现。主要参考了Constructor|UniswapV3CoreContractExplained系列教程、UniswapV3DevelopmentBook和Paco博客中的相关内容。所有示例代码可在clamm代码库中找到,以便实践和探索。流动性提取和收集进行流动性的提取实际上就是mint函数的反向操
仅用10张图片,AI就能学会识别万物?多模态小样本学习颠覆传统!
沃恩智慧
人工智能 深度学习 人工智能 学习 深度学习
小样本学习与多模态结合是当前人工智能领域的热门研究方向,旨在通过结合多模态数据(如视觉、语言、音频等)来提高模型在数据稀缺情况下的学习效率和性能。例如,ZS-DeconvNet方法在Nature上发表,展示了其在极低训练数据需求下,将图像分辨率提升超过1.5倍衍射极限的能力。此外,CPE-CLIP和MMFL等方法通过利用预训练模型和冻结的大规模视觉语言模型,实现了跨会话的迁移学习和快速适应新样本。
网络工程师 (38)流量和差错控制
IT 青年
软考网络工程师 软考 网络工程师
一、流量控制流量控制是一种协调发送站和接收站工作步调的技术。它的主要目的是防止发送端发送数据过快,导致接收端缓冲区溢出,从而造成数据丢失。流量控制机制通过调整发送速率来匹配接收端的处理能力。基本原理发送站每发出一帧数据,就进入等待状态。接收站收到数据后,进行简单的处理,然后送回一个应答信号(ACK)。发送站收到应答信号后,才能继续发送下一帧数据。常见协议停等协议:发送站发出一帧数据后等待接收站的应
发文新思路!双通道CNN的惊人突破,准确率接近100%!
沃恩智慧
深度学习 人工智能 cnn 人工智能 神经网络
双通道CNN作为一种创新的卷积神经网络架构,正引领深度学习领域的新趋势。其核心优势在于并行卷积层设计,能够同时处理更多特征信息,从而显著提升模型的特征表示能力和识别精度。这种架构不仅提高了计算效率,还有效降低了过拟合风险,使其在复杂视觉任务中表现卓越。例如,最新的研究提出了一种名为DDTransUNet的混合网络,结合了Transformer和CNN的优势,通过双分支编码器和双重注意力机制,有效解
CVPR2024最佳论文出炉!历年CVPR最佳论文盘点(2000 年—2024 年)
沃恩智慧
深度学习 人工智能 CVPR 人工智能 论文阅读 深度学习
cvpr2024最佳论文出炉,本次论文可谓是万里挑一。作为计算机视觉领域的顶级学术会议CVPR,每年评选出的一篇或多篇最佳论文,不仅为计算机视觉领域的顶级学术荣誉,更代表了将对未来技术或行业发展产生重要影响的里程碑式研究成果。为了帮助大家对这批计算机领域的重要论文进行复习,沃恩智慧为大家精心整理了一份从2000年—2024年的CVPR最佳论文盘点。需要的同学关注公众号【沃的顶会】,回复“CVPR”
linux bash数值运算
m0_60635609
2024年程序员学习 运维 linux 面试
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。需要这份系统化的资料的朋友,可以点击这里获取!一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!方法一:使用declare-itotal=$va
log4j对象改变日志级别
3213213333332132
java log4j level log4j对象名称 日志级别
log4j对象改变日志级别可批量的改变所有级别,或是根据条件改变日志级别。
log4j配置文件:
log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION
#log4j.appender.FILE=org.apache.log4j.RollingFileAppender
log4j.appender.FILE=org.apache.l
elk+redis 搭建nginx日志分析平台
ronin47
elasticsearch kibana logstash
elk+redis 搭建nginx日志分析平台
logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢?首先,架构方面,nginx是有日志文件的,它的每个请求的状态等都有日志文件进行记录。其次,需要有个队 列,redis的l
Yii2设置时区
dcj3sjt126com
PHP timezone yii2
时区这东西,在开发的时候,你说重要吧,也还好,毕竟没它也能正常运行,你说不重要吧,那就纠结了。特别是linux系统,都TMD差上几小时,你能不痛苦吗?win还好一点。有一些常规方法,是大家目前都在采用的1、php.ini中的设置,这个就不谈了,2、程序中公用文件里设置,date_default_timezone_set一下时区3、或者。。。自己写时间处理函数,在遇到时间的时候,用这个函数处理(比较
js实现前台动态添加文本框,后台获取文本框内容
171815164
文本框
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
持续集成工具
g21121
持续集成
持续集成是什么?我们为什么需要持续集成?持续集成带来的好处是什么?什么样的项目需要持续集成?... 持续集成(Continuous integration ,简称CI),所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
数据结构哈希表(hash)总结
永夜-极光
数据结构
1.什么是hash
来源于百度百科:
Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值。这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入的空间,不同的输入可能会散列成相同的输出,所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。
乱七八糟
程序员是怎么炼成的
eclipse中的jvm字节码查看插件地址:
http://andrei.gmxhome.de/eclipse/
安装该地址的outline 插件 后重启,打开window下的view下的bytecode视图
http://andrei.gmxhome.de/eclipse/
jvm博客:
http://yunshen0909.iteye.com/blog/2
职场人伤害了“上司” 怎样弥补
aijuans
职场
由于工作中的失误,或者平时不注意自己的言行“伤害”、“得罪”了自己的上司,怎么办呢?
在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议:
一、利用一些轻松的场合表示对他的尊重
即使是开明的上司也很注重自己的权威,都希望得到下属的尊重,所以当你与上司冲突后,最好让不愉快成为过去,你不妨在一些轻松的场合,比如会餐、联谊活动等,向上司问个好,敬下酒,表示你对对方的尊重,
深入浅出url编码
antonyup_2006
应用服务器 浏览器 servlet weblogic IE
出处:http://blog.csdn.net/yzhz 杨争
http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx
一、问题:
编码问题是JAVA初学者在web开发过程中经常会遇到问题,网上也有大量相关的
建表后创建表的约束关系和增加表的字段
百合不是茶
标的约束关系 增加表的字段
下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式
1,增加字段(student表中增加 姓名字段)
alter table 增加字段的表名 add 增加的字段名 增加字段的数据类型
alter table student add name varchar2(10);
&nb
Uploadify 3.2 参数属性、事件、方法函数详解
bijian1013
JavaScript uploadify
一.属性
属性名称
默认值
说明
auto
true
设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传。
buttonClass
”
按钮样式
buttonCursor
‘hand’
鼠标指针悬停在按钮上的样子
buttonImage
null
浏览按钮的图片的路
精通Oracle10编程SQL(16)使用LOB对象
bijian1013
oracle 数据库 plsql
/*
*使用LOB对象
*/
--LOB(Large Object)是专门用于处理大对象的一种数据类型,其所存放的数据长度可以达到4G字节
--CLOB/NCLOB用于存储大批量字符数据,BLOB用于存储大批量二进制数据,而BFILE则存储着指向OS文件的指针
/*
*综合实例
*/
--建立表空间
--#指定区尺寸为128k,如不指定,区尺寸默认为64k
CR
【Resin一】Resin服务器部署web应用
bit1129
resin
工作中,在Resin服务器上部署web应用,通常有如下三种方式:
配置多个web-app
配置多个http id
为每个应用配置一个propeties、xml以及sh脚本文件
配置多个web-app
在resin.xml中,可以为一个host配置多个web-app
<cluster id="app&q
red5简介及基础知识
白糖_
基础
简介
Red5的主要功能和Macromedia公司的FMS类似,提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写,使用RTMP作为流媒体传输协议,这与FMS完全兼容。它具有流化FLV、MP3文件,实时录制客户端流为FLV文件,共享对象,实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
angular.fromJson
boyitech
AngularJS AngularJS 官方API AngularJS API
angular.fromJson 描述: 把Json字符串转为对象 使用方法: angular.fromJson(json); 参数详解: Param Type Details json
string
JSON 字符串 返回值: 对象, 数组, 字符串 或者是一个数字 示例:
<!DOCTYPE HTML>
<h
java-颠倒一个句子中的词的顺序。比如: I am a student颠倒后变成:student a am I
bylijinnan
java
public class ReverseWords {
/**
* 题目:颠倒一个句子中的词的顺序。比如: I am a student颠倒后变成:student a am I.词以空格分隔。
* 要求:
* 1.实现速度最快,移动最少
* 2.不能使用String的方法如split,indexOf等等。
* 解答:两次翻转。
*/
publ
web实时通讯
Chen.H
Web 浏览器 socket 脚本
关于web实时通讯,做一些监控软件。
由web服务器组件从消息服务器订阅实时数据,并建立消息服务器到所述web服务器之间的连接,web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接,建立web浏览器与web服务器之间的持久连接;利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新,建立一条从消息服务器到web浏览器页面之间的消息通路
[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?
comsci
生物
大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思
如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?
oracle 外部表
daizj
oracle 外部表 external tables
oracle外部表是只允许只读访问,不能进行DML操作,不能创建索引,可以对外部表进行的查询,连接,排序,创建视图和创建同义词操作。
you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
aop相关的概念及配置
daysinsun
AOP
切面(Aspect):
通常在目标方法执行前后需要执行的方法(如事务、日志、权限),这些方法我们封装到一个类里面,这个类就叫切面。
连接点(joinpoint)
spring里面的连接点指需要切入的方法,通常这个joinpoint可以作为一个参数传入到切面的方法里面(非常有用的一个东西)。
通知(Advice)
通知就是切面里面方法的具体实现,分为前置、后置、最终、异常环
初一上学期难记忆单词背诵第二课
dcj3sjt126com
english word
middle 中间的,中级的
well 喔,那么;好吧
phone 电话,电话机
policeman 警察
ask 问
take 拿到;带到
address 地址
glad 高兴的,乐意的
why 为什么
China 中国
family 家庭
grandmother (外)祖母
grandfather (外)祖父
wife 妻子
husband 丈夫
da
Linux日志分析常用命令
dcj3sjt126com
linux log
1.查看文件内容
cat
-n 显示行号 2.分页显示
more
Enter 显示下一行
空格 显示下一页
F 显示下一屏
B 显示上一屏
less
/get 查询"get"字符串并高亮显示 3.显示文件尾
tail
-f 不退出持续显示
-n 显示文件最后n行 4.显示头文件
head
-n 显示文件开始n行 5.内容排序
sort
-n 按照
JSONP 原理分析
fantasy2005
JavaScript jsonp jsonp 跨域
转自 http://www.nowamagic.net/librarys/veda/detail/224
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的
使用connect by进行级联查询
234390216
oracle 查询 父子 Connect by 级联
使用connect by进行级联查询
connect by可以用于级联查询,常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。
来看一个示例,现假设我们拥有一个菜单表t_menu,其中只有三个字段:
一个不错的能将HTML表格导出为excel,pdf等的jquery插件
jackyrong
jquery插件
发现一个老外写的不错的jquery插件,可以实现将HTML
表格导出为excel,pdf等格式,
地址在:
https://github.com/kayalshri/
下面看个例子,实现导出表格到excel,pdf
<html>
<head>
<title>Export html table to excel an
UI设计中我们为什么需要设计动效
lampcy
UI UI设计
关于Unity3D中的Shader的知识
首先先解释下Unity3D的Shader,Unity里面的Shaders是使用一种叫ShaderLab的语言编写的,它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader,都是指用ShaderLab编写的代码,
如何禁止页面缓存
nannan408
html jsp cache
禁止页面使用缓存~
------------------------------------------------
jsp:页面no cache:
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cach
以代码的方式管理quartz定时任务的暂停、重启、删除、添加等
Everyday都不同
定时任务管理 spring-quartz
【前言】在项目的管理功能中,对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了,因为如果要控制定时任务的 “暂停” 呢?暂停之后又要在某个时间点 “重启” 该定时任务呢?或者说直接 “删除” 该定时任务呢?要改变某定时任务的触发时间呢? “添加” 一个定时任务对于系统的使用者而言,是不太现实的,因为一个定时任务的处理逻辑他是不
EXT实例
tntxia
ext
(1) 增加一个按钮
JSP:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
Stri
数学学习在计算机研究领域的作用和重要性
xjnine
Math
最近一直有师弟师妹和朋友问我数学和研究的关系,研一要去学什么数学课。毕竟在清华,衡量一个研究生最重要的指标之一就是paper,而没有数学,是肯定上不了世界顶级的期刊和会议的,这在计算机学界尤其重要!你会发现,不论哪个领域有价值的东西,都一定离不开数学!在这样一个信息时代,当google已经让世界没有秘密的时候,一种卓越的数学思维,绝对可以成为你的核心竞争力. 无奈本人实在见地