首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

小程序长列表优化实践

这个时候就需要优化长列表,今天将一起讨论一下,长列表的优化方案及其实践。 二 小程序长列表性能瓶颈 影响小程序长列表性能的因素有很多。我们先分析一下小程序长列表的性能卡点是什么?...图片性能和内存的影响:长列表的情况一般会有大量的图片,内存占用增长,长列表中的大量图片会导致内存占用急剧上升,内存增长如果超过了限制,也会导致小程序出现白屏或黑屏,甚至整个小程序发生闪退。...四 改进版优化方案 接下来我们实现一个长列表组件,选用的是第二种基于 IntersectionObserver 这种方式,我们实现的这个长列表遵循一下原则: 和业务低耦合,业务只负责往长列表绑定列表数据就可以了...正常情况下,我们长列表组件是作为公共组件使用的,这时就存在一个问题,我们的 item 组件如果不用抽象节点的情况下,组件 item 是需要注册到长列表组件中去的,那么也就是长列表本身只能服务于这一种场景...说明白了抽象节点,然后我们来看一下长列表组件结构。

2.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

vue编码之长列表优化

今天主要想跟大家聊聊长列表优化,有的时候我们需要在页面上显示特别长的列表,这种情况主要发生在移动端或者后台管理的页面中,在移动端往往有个下拉刷新内容的功能,不停地往上翻,到底部后会加载更多内容,这样会导致列表中会有很多元素...举个栗子: 假设我们需要在页面长列表中渲染10000条数据,代码如下: //APP.vue <div class="scroller...总体思路是这样的:让页面只显示我们能看到的东西,看不到的东西不显示,然后监听滚动条的变化,当滚动条变化的时候重新显示可见区域就完事了,简单画个图: 初始样子: <em>长列</em>表优化.png 当滑动了一个位置:...<em>长列</em>表优化.png 我们只观察绿色边框区域就行了,当移动一个位置后,表示1的数据条消失了,表示7的数据条又出现了,其实只是位置发生了变化,这就是主要实现的思路。...上面的代码大家没必要记,关于<em>长列</em>表优化这块是有一个插件的,名字叫vue-virtual-scroller,链接地址 接下来,我们在项目中使用这个插件: 安装 npm i vue-virtual-scroller

29810

新版12306网明日上线 自动刷票功能

新旧版本同时运行   昨晚,“中国铁路”发微博称,新版12306网站在对页面进行完善的同时,推出了“更多选项”功能,使用这一功能,旅客在录入乘车人、日起、车次、席别等信息后,12306即可为旅客提供动态刷新、自动提交等服务...根据网友截图,新版12306网站上“更多选项”包括“隐藏不需要的车次”、“自动选择列车类型”、“如果无票,自动开始刷票”、“过滤不可预订的车次”、“过滤发站不完全匹配的车次”。...此外,如果刷票成功后,网站会自动弹窗提醒旅客付款取票。记者看到,往年一些抢票浏览器提供的刷票服务,新版12306网站也将提供。...有分析人士称,新版12306网站的自动刷票等功能从软件交互、到实现方式都与猎豹浏览器一模一样,疑似双方已经深度合作。

54550

原生长列表内嵌 Flutter 卡片性能调研

这篇文章主要是对在原生长列表中嵌入多个 Flutter 卡片,每个卡片都对应一个独立的 FlutterView/Engine 这种使用场景进行调研,分析该场景下的性能和内存使用等指标。...主要调研的指标包括三方面: 原生长列表的滚动流畅度,是否存在一些 Flutter 相关的调用会长时间阻塞主线程,也就是 Flutter.platform 线程,导致掉帧; Flutter 卡片的空白延迟帧数...为了进行调研,我们编写了一个 Android Demo,Demo 在 Android Native 端使用了 androidx 提供的 RecyclerView 实现长列表。...RecyclerView 会自动创建多个卡片并循环使用,在 Demo 中,每个卡片都是一个 FlutterCard 对象,其中包含一个独立 FlutterView 和 FlutterEngine,卡片的内容由...实际操作中会滚动到底部之后再滚动回头部,长列表设置显示 200 张卡片,在这个过程中 RecyclerView 一共创建了 9 个 FlutterCard 对象,也就是 9 对 FlutterView/

1.4K20

自增长列的一个小问题

01 自增长列的一个小问题 之前的文章中写了一个小问题,当我们使用自增长的方式限定了一个自增长字段id以后,如果删除id=7的一条记录,再重新插入新纪录的时候,这个新纪录的id值会是多少?...如果想要让这个表在删除某条记录之后,插入新记录时候自增列保持连续,现在有id为1~7的表,删除id=6和id=7的记录,然后我们需要在插入的时候让自主键从6开始,有一个办法,就是重新启动该MySQL实例...----------------+ 1 row in set (0.00 sec) 在上面这个例子中,我们首先创建了一个表,这个表中没有自增列,然后插入id=4的数据,插入之后修改表的id列为自属性...,然后再查看该表的自增列下一个值,发现自动匹配id=4的下一个值id=5。...这个点也比较重要,如果没有自动匹配的话,自增长属性将会从1开始,这样,再插入三条记录之后,这个表就无法再插入记录了,因为id=4的记录已经存在了。

81230

mysql 主键自语句_MySQL 自主键

主键有两个性质需要考虑: 单调性 每次插入一条数据,其 ID 都是比上一条插入的数据的 ID 大,就算上一条数据被删除。...自主键的单调性 为何会有单调性的问题? 这主要跟自主键最大值的获取方式,以及存放位置有关系。 如果最大值是通过计算获取的,并且在某些情况下需要重新获取时,会因为最新的数据被删除而减小。...自主键最大值怎么取的?存放到哪里?...从 MySQL 8.0 开始,自主键最大值会在每次修改后写入到 redo log,并且在每个检查点写入引擎私有的系统表。 如果是正常重启,则读取系统表里的值。...其他 如果主动指定 ID 为 0 或者 NULL 插入,则会使用数据库生成的自 ID。

10.8K10

mysql主键自策略_MySQL 自主键机制

主键:特指在自增列上定义的主键。 自主键的优点是让主键索引保持递增顺序的插入,避免页分裂,索引更加紧凑。 1. 自增值保存在哪? 不同的存储引擎保存自增值的策略不一样; a....为了减少自id锁带来的性能影响,mysql不会修改回去之前的自增值; 4. 自锁的优化 a....而对于批量插入数据的语句(select … insert,replace … select 和 load data 语句),MySQL 有一个批量申请自 id 的策略(注:该策略是导致自 id 不连续的第三种原因...:语句执行过程中,第一次申请自 id,会分配 1 个;1 个用完以后,这个语句第二次申请自 id,会分配 2 个;2 个用完以后,还是这个语句,第三次申请自 id,会分配 4 个;依此类推,同一个语句去申请自...id,每次申请到的自 id 个数都是上一次的两倍。

9.4K50
领券