- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
虚拟列表
分享一个vue虚拟列表的组件： https://github.com/tangbc/vue-virtual-scroll-list 官方文档： https://tangbc.github.io/vue-virtual-scroll-list
42520编辑于 2022-08-21 - 来自专栏Web技术学苑
了解虚拟列表背后原理，轻松实现虚拟列表
在项目中，大数据渲染常常遇到,比如umy-ui(ux-table)虚拟列表table组件，vue-virtual-scroller以及react-virtualized 这些优秀的插件快速满足业务需要 为了理解插件背后的原理机制，我们实现一个自己简易版的虚拟列表，希望在实际业务项目中能带来一些思考和帮助。 正文开始... 虚拟列表是什么 在大数据渲染中，选择一段可视区域显示对应数据。 本篇是非常简易的虚拟列表实现，了解虚拟列表背后的实现思想，更多可以参考vue-virtual-scroller[1]与react-virtualized[2]源码的实现，具体应用示例可以查看之前写的一篇偏应用的文章测试脚本把页面搞崩了 总结 了解虚拟列表到底是什么，在大数据渲染中，选择一段可视区域显示对应数据 实现虚拟列表的背后原理，最外层给定一个固定的高度，然后设置纵向Y轴滚动，然后每个元素的父级设置相对定位，设置真实展示数据的高度 %E6%8B%9F%E5%88%97%E8%A1%A8 [4] 如何实现一个高度自适应的虚拟列表: https://juejin.cn/post/6948011958075392036
4.1K10编辑于 2022-07-28 - 来自专栏各类技术文章~
利用虚拟列表改造索引列表（IndexList）
2018的提出问题，2019年官方给出了解决方案recycle-view微信小程序长列表卡顿，但是这个只能解决部分问题，对于嵌套数据可能并不能适配。而且内部实现也是按虚拟列表渲染的思路去操作的。 flex; flex-direction: column; align-items: center; justify-content: center; } </style> 复制代码 方案 采用虚拟列表 ，参考云中桥-「前端进阶」高性能渲染十万条数据(虚拟列表)的方案。 根据上面对虚拟列表的描述，编写了一个简单的虚拟列表，代码如下。 <template>
<! 需要将原来单层结构改造成双层结构 偏移方案，transform 对 sticky 有冲突 index key的高度问题 可视区域多个 index list item 点击右侧Index Key跳转到指定位置 实现 通过上方虚拟列表代码进行后续的改造和实现1.9K00发布于 2021-10-19来自专栏大数据和云计算技术算法基础9：散列表
算法是基础，小蓝同学准备些总结一系列算法分享给大家，这是第9篇《散列表》，非常赞！希望对大家有帮助，大家会喜欢！ 前面系列文章： 归并排序 #算法基础#选择和插入排序 由快速排序到分治思想 算法基础：优先队列 二分查找 二叉树查找 平衡查找树概述 平衡树之红黑树 散列表是我们比较简单的一种查找算法，是用这种建议方法的扩展并能够处理更加复杂的类型的键 使用散列表的查找算法分为两步 第一步用散列函数将被查找的键转化为数组的一个索引。理想情况下，不同的键都可以变为不同的索引，但有时有特殊情况，这就涉及到我们的第二步处理碰撞冲突的过程。 基于线性探测法来处理碰撞问题，开放寻址法中最简单的是线性探测法：当碰撞发生时即一个键的散列值被另外一个键占用时，直接检查散列表中的下一个位置即将索引值加1，这样的线性探测会出现三种结果： 命中，该位置的键和被查找的键相同 三、应用 散列表的应用是使用最广泛的算法之一 信息安全领域： Hash算法 可用作加密算法。
87420发布于 2018-07-26来自专栏前端西瓜哥的前端文章长列表优化：用 React 实现虚拟列表
这次我们来看看虚拟列表是什么玩意，并用 React 来实现两种虚拟列表组件。 虚拟列表，其实就是将一个原本需要全部列表项的渲染的长列表，改为只渲染可视区域内的列表项，但滚动效果还是要和渲染所有列表项的长列表一样。 虚拟列表的实现分两种，一种是列表项高度固定的情况，另一种是列表项高度动态的情况。 列表项高度固定 列表项高度固定的情况会简单很多，因为我们可以在渲染前就能知道任何一个列表项的位置。 虚拟列表组件通过 ref 提供了一个 resetHeight 方法来重置缓存的高度。 ，需要手动触发重置虚拟列表缓存的高度集合，建议宽度固定； 图片加载需要时间，尤其是图片多的情况下，会让一个列表项的高度不断变大，需要你手动触发重置虚拟列表高度。
5.1K10编辑于 2022-08-18来自专栏startvue 虚拟列表的实现
Vue 虚拟列表是一种用于优化大型列表的渲染性能的技术。它通过只渲染可见部分的列表项，以及通过动态添加和删除DOM元素的方式来减少DOM操作，从而提高应用程序的响应速度和性能。 Vue 虚拟列表的实现依赖于一些关键技术，包括虚拟滚动、缓存池和动态渲染。 虚拟滚动是 Vue 虚拟列表的核心技术之一。它通过仅在屏幕上显示可见部分的列表项，而不是整个列表来减少渲染所需的时间和资源。 缓存池的实现涉及到维护一个包含渲染过的列表项的列表，以及计算当前视图中需要渲染的列表项。 动态渲染是 Vue 虚拟列表的第三个关键技术。它通过动态添加和删除DOM元素来减少渲染所需的时间和资源。 我们还使用一个监听滚动事件的方法 onScroll 来更新可见区域的起始索引，从而更新视图中显示的列表项。 总之，Vue 虚拟列表是一种优化大型列表的渲染性能的技术。 在 Vue 中实现虚拟列表通常需要遵循一些步骤，如计算列表项的高度或宽度、计算屏幕可见区域的高度或宽度、计算当前视图中需要渲染的列表项、维护一个缓存池以及动态地添加和删除DOM元素。
78110编辑于 2024-03-20来自专栏静之森虚拟列表与 Scroll Restoration
虚拟列表是为了提高页面性能而出现的。我们知道，一个页面上的 DOM 树越复杂，节点越多性能越低，每次重排(reflow)的成本越高。于是，虚拟列表出现了。 渲染 50 个 Node，实际只渲染了可见部分的 Node 本篇文章不讨论如何实现一个虚拟列表，此类文章网上有很多。但是有关于回退页面无法回到虚拟列表上一次的位置的文章却很少。 （如果设置 history.scrollRestoration = 'auto'，默认为 auto） 但是如果用了虚拟列表，这里的虚拟列表跟随 document 根节点(document.documentElement react-virtuoso 一种方式是，记录之前虚拟列表容器的高度，在回退回来之后先用之前记录的值去撑开整个容器高度，待虚拟列表加载后去除。 这样有个问题是虚拟列表无法知道当前的位置原来是什么内容，因为虚拟列表都是按照单个 Node 高度去计算的，整体高度是一个预估值，不能知道当前位置具体是什么。
1.2K20编辑于 2021-12-28来自专栏采云轩IntersectionObserver实现虚拟列表初探
IntersectionObserver实现虚拟列表初探 http://zoo.zhengcaiyun.cn/blog/article/intersectionobserver 前言 前端开发中经常会遇到大数据量列表展示的性能问题 解决这类问题的方案也有很多，使用虚拟列表展示是一个比较常见的解决方案。今天我们来介绍如何使用 IntersectionObserver 这个 API 来自定义实现虚拟列表。 传统列表 在未使用虚拟列表之前，传统列表很难处理大量数据的渲染问题，常出现以下情况： 列表数据渲染时间长甚至出现白屏 列表交互卡顿 为了解决该类问题，我们可以选用虚拟列表来承载大量数据的渲染，增强用户体验 虚拟列表 在介绍 IntersectionObserver 之前，我们先简单介绍下虚拟列表概念。前面已经提到，页面的性能问题是由于太多数据渲染展示引起的。 结语 虚拟列表是解决大数据量列表渲染的有效方案。对于实际业务中对老版本浏览器兼容性要求不高的场景，大家可以考虑使用 IntersectionObserver，可以方便地实现自定义的虚拟列表。
1.9K30编辑于 2022-12-01来自专栏python39. python 列表、元组、字典
1.列表 a = ['a', 'b', 'c', 'abc'] ## append 末尾追加 a.append('hello') print (a) ['a', 'b', 'c', 'abc', 'hello print a[-1] print a[-4] print a[:-1] print a[-3:] 结果： abc a ['a', 'b', 'c'] ['b', 'c', 'abc'] 3.元组 列表和元组很相似 ，列表是可变的，元组是不可变的 ## 字符串转换成元组： str1 = 'abcdefghigklmn' print (tuple(str1)) ('a', 'b', 'c', 'd', 'e', 'f k.setdefault('xxx')) None print (k.setdefault('xxx', 'beijing')) 'beijing' ## keys 获取字典中的所有key，并组成列表 print (k.iterkeys()) <dictionary-keyiterator object at 0x00000000026B5F48> ## values 获取字典中所有value，并组成列表
86410发布于 2020-01-15来自专栏code秘密花园前端虚拟列表的实现原理
于是心血来潮决定从零自己实现一个虚拟滚动列表来优化一下整体的体验。 img (从上图中我们可以发现实际用户每次能看到的元素/内容只有item-4 ~ item-13 也就是9个元素) 0x1 实现一个“定高”虚拟列表 首先我们需要定义几个变量/名称。 当用户当前的滚动offset未触发下标更新时，则因为本身phantom的长度关系让虚拟列表拥有和普通列表一样的滚动能力。 优化： 对于上边我们实现的虚拟列表，大家不难发现一但进行了快速滑动就会出现列表闪烁的现象/来不及渲染、空白的现象。还记得我们一开始说的 **渲染用户最大可见条数+“BufferSize” 么？ 现在我们已经实现了“定高”元素的虚拟列表的实现，那么如果说碰到了高度不固定的超长列表的业务场景呢？
2.1K40发布于 2021-04-23来自专栏携程技术干货 | Taro虚拟列表最佳实践
使用效果：团队第一时间尝试了虚拟列表，但是效果并不是非常理想，主要问题有以下几点： 由于我们的列表内容不是所有的Item都是等高的，所以虚拟列表每次渲染的时候都会去动态计算每个Item的高度，造成列表高度变换抖动 Item高度，计算量太大，也会阻碍页面渲染； 基于以上问题，我们团队最终出品了更佳（没有最佳，只有更佳）虚拟列表方案。 性能提升总结 可以看出在使用虚拟列表对页面进行优化之后，页面总的渲染性能会有一个质的提升，页面列表渲染速度提升了将近45%，按钮点击响应速度提升了将近50%。 目前我们只是针对航班列表使用了虚拟列表进行优化，页面中还有一个比较损耗性能的点是上方的日历列表，后期我们将把日历列表也改成虚拟列表，相信性能会更进一步提升。 www.npmjs.com/package/taro-virtual-list Taro物料市场：https://taro-ext.jd.com/plugin/view/60bf31e23ac107d9df4685cb
2K50发布于 2021-07-22来自专栏技术杂记Linux 初始化检查列表9
例如：sysstat、iotop、vmstat、netstat、zabbix-agent
1.2K30编辑于 2021-11-26来自专栏日常技术分享Axure RP9 商品列表排序
屏幕快照 2019-06-11 17.33.25.png 布局：[流行][上新]:文本标签、[价格从低到高]：动态面板、[商品列表]：中继器 添加商品模板 ?
1.1K20发布于 2019-06-15来自专栏日常技术分享Axure RP9 制作商品列表
交互界面，在【每项加载时】，【设置文本】"GoodsName"值为[[Item.GoodsName]]
1.4K30发布于 2019-06-15来自专栏Java架构师必看element-ui，table增加虚拟列表
element-ui，table增加虚拟列表 强烈推介IDEA2020.2破解激活 ，IntelliJ IDEA 注册码，2020.2 IDEA 激活码 参考文献https://juejin.im/entry/5aaf66f56fb9a028c71e403e 由于业务需要，当大批量的dom （10W个场景）展现在table中，会导致滚动条卡顿，因此需要开发一个虚拟列表的功能 原理：根据grid的高度，计算展现条数，通过css属性，transform中的translate(x,y)方法实现，
2.5K10发布于 2021-06-17来自专栏院长运维开发OpenStack查看虚拟机端口列表
controller ~]# openstack port list ID Name MAC Address Fixed IP Addresses Status 0e59952e-8ece-4bb3-8f9e -48b1c790fe16 fa:16:3e:46:9a:80 ip_address='10.0.0.2', subnet_id='2e2086da-6acb-499e-a22e-a3906bcf48e7 -83eb-452c-aa54-9deedc2888f4 fa:16:3e:69:fc:9d ip_address='42.51.77.4', subnet_id='e97beba0-d8ae-4bc6 'e97beba0-d8ae-4bc6-9497-abad9200cb60' ACTIVE b1090b7b-b9ed-497b-9cb4-e8b03bb4c0f2 fa:16:3e:a4:c0:8e -0edf-4fb9-a444-3e857f6e8268 fa:16:3e:9c:41:77 ip_address='10.0.0.11', subnet_id='2e2086da-6acb-499e-a22e-a3906bcf48e7
3.1K30发布于 2020-06-13来自专栏学习笔记持续记录中...Java基础：五、可变参数列表 （9）
由于所有的类都直接或间接继承于Object类，所以可以创建以Object数组为参数方法，以此获取可变参数列表 // JavaSE5之前 class A{} public class VarArgs{ 但是，这不仅仅只是从元素列表到数组的自动转换，printArray((Object [])new Integer[]{1,2,3,4,5});中Integer数组(通过使用自动包装而创建的)被转型为一个 因此，如果有一组事物，可以把它们当作列表传递，而若果你已经有了一个数组，该方法可以把它们当作可变参数列表来接受 ** 传递0个参数** public class OptionalTrailingArguments public static void main(String[] args){ f(new Integer(1),new Integer(2)); f(4,5,6,7,8,9) ; f(10,new Integer(11),12);// 可以在单一的参数列表中将类型混合在一起，而自动包装机制将有选择地将int参数提升为Integer } } 可变参数列表使得重载过程变得复杂了
63520发布于 2020-03-17来自专栏coding个人笔记用vue实现一个虚拟列表
上次分享了超长列表分片加载的方式，这种方式现在一般不会使用，因为dom会变的无比庞大，页面会很卡，今天分享用vue实现一个虚拟列表的简易实现，本来是想用原生实现一个，后来觉得直接使用computed，简单一些 思路就是用vue的for循环渲染列表，自己手动加一个滚动条，然后通过监听scroll，算出应该显示到第几个，通过计算属性截取显示的数据，直接上代码： <! for (let i = 0; i < 1000000; i++) { this.list.push('列表' + i) 其实原理很简单，把代码跑起来，输出看看这些数据就很容易就搞懂虚拟列表的实现了。但这只是实现，要想做的更好就很难了。 要是想做高度不固定的，那就更难了，要缓存每个列表的高度，然后用一些算法去计算滚动过程的高度。
1.4K10发布于 2020-06-04来自专栏阿凯的ExcelPython读书笔记9（列表排序与复制）
我们针对列表需要进行整体的排序，今天就和大家聊一聊列表的排序应用。 二、临时排序 上一个分享的是永久排序，实施后改变列表排序，本方法只是改变显示的内容，列表本身顺序不做改变。 ? 三、倒转排序列表 前面分享的不是升序就是降序排序，接下来和大家分享一下翻转或者倒转列表的排序。 本倒转排序是永久性的哦！如果想恢复，操作两次即可！ ? 四、列表的复制 列表与列表之间是不能直接使用等号复制的，我们看一下案例。 ? 我们看一下结果，当我们把score2等于score1后，分别打印两个，发现两种是一致的。 下期和大家分享列表的特殊形态！元组！
83170发布于 2018-03-08来自专栏全栈技术项目之热点问题和问答列表(9)
DESC </select> (d) 测试 在QuestionMapperTestes中测试： @Test void findListByUserId() { Integer userId = 9;
, userId=9, userNickName=野原新之助, status=0, hits=101, isPublic=1, isDelete=0, createdTime=2020-07-23T20
, userId=9, userNickName=野原新之助, status=0, hits=123, isPublic=1, isDelete=0, createdTime
, userId=9, userNickName=野原新之助, status=0, hits=161, isPublic=1, isDelete=0, createdTime 我的问答列表-前端页面 参考此前显示列表的方式来显示“我的问答列表”，关于Vue的使用： v-for：用于遍历当前标签及其所有子级标签，配置的参数意义可参考Java中的增强for循环； v-text：用于绑定某标签中显示的文本信息1.2K10发布于 2021-08-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号