长列表优化-记录

最新推荐文章于 2024-08-27 06:00:00 发布
最新推荐文章于 2024-08-27 06:00:00 发布
阅读量733 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sam80000/article/details/124279946
版权
本文记录了使用betterScroll进行长列表优化的步骤。首先介绍如何下载并引入betterScroll，接着讲解如何将模板包裹在div中并设置样式。接着，在数据加载后通过$nextTick初始化betterScroll，并在需要显示滚动条时设置相应属性，解决滚动条位置问题。
摘要由CSDN通过智能技术生成

长列表优化


在前端页面显示中，有时候会遇到很长的列表优化，会创建很多的dom，导致网页拖动卡顿或加载慢，如何对长列表进行优化。

一、使用betterScroll

1.先下载betterscroll
下载模块并引入

npm install --save better-scroll

2.把自己的模板包装起来
封在一个div中，加入样式，限制高度
在这里插入图片描述
在这里插入图片描述
3.初始化better-scroll
在获取数据后，初始化betterscroll，挂载到封装的节点上。因为初始化的时候dom还没有出来，数据还没有传过来，所以要在this.$nextTick()中使用
引用-this.$nextTick()原理
在这里插入图片描述
4.需要显示滚动条添加此属性<

最低0.47元/天 解锁文章
sam80000
关注
专栏目录
全网最全-谷粒商城项目-面试总结-简历优化
成功最快的秘诀: 抱团取暖 。
09-20 28万+
该系用采用SpringCloud架构，利用SpringBoot构建应用，利用Nacos作为服务的注册、配置中心，利用OpenFeign实现与其他模块进行交互，利用Sentinel实现熔断降级和错误处理，利用Gateway作为服务网关，利用RabbitMQ实现延迟队列，利用Redis作为缓存解决读多写少的场景，利用MySQL进行持久化，利用MyBatisPlus作为持久化框架。
【长列表优化】
XSZ111222的博客
02-13 219
长列表优化 由于长列表的特殊性，即使前面的列表用户不看了，前面dom也需要一直存在，优化为只要在视图窗口就可以。 js代码： <template> <div id="u" :style="{padding:padding}"> <slot :sliceitems="sliceitems"></slot> </div> </template> <script> export default {
长列表优化
cxz
05-21 292
导致浏览器卡顿的原因是因为操作dom次数太多了， 可以使用document.createDocumentFragment创建虚拟节点，从而避免引起不必要的渲染 当所有的 li 标签都创建完毕后，一次性把虚拟节点的 li 标签都渲染出来 可以采用分段渲染的方式，比如一次只渲染一屏的数据 最后使用window.requestAnimationFrame来逐帧渲染 正常的操作 ： let ul = document.getElementById('ul'); let frag = document.cr
长列表优化简介
最新发布
sinat_34896766的博客
08-27 461
提供列表按需加载的能力， 解决一次性加载长列表数据耗时长、占用过多资源的问题，可以提升页面响应速度。
超长列表性能优化
donglize521521的博客
03-15 1417
超长列表性能优化 今天大概内容会讲一下，js中基础知识，会讲一下怎么是实现代码的切片，怎么渲染切片，完了之后会说一下最核心的虚拟列表，用Vue写的虚拟列表。包括定高的和不定高的怎么去实现。 【引言】：长列表优化有两种策略，第一种就是我们可以分片，比如一个很长的列表，我可以分片渲染，第二就是我只渲染可视区域。 【必备理论知识】第一先聊一下JS中基本的概念，不会深说，但是会把用得到的深说一下。第一先我们要掌握一下什么是进程，这个概念比较大，当前一个系统，系统每开一个应用，每一个应用程序都会分配一个独立的进程，当
Vue超长列表渲染性能优化
05-09
本资源是对浏览器中的Event Loop深入理解，requestAnimationFrame性能优化，DocumentFragment性能优化，Vue.js中的固定高度虚拟列表优化，面向未来的无限列表优化方案的实践，是对vue原理的一次深入理解。
【前端性能优化】长列表优化
qq_41831345的博客
05-12 8217
一、什么是长列表？ 前端的业务开发中会遇到一些数据量较大且无法使用分页方式来加载的列表，我们一般把这种列表叫做长列表。 完整渲染的长列表基本上很难达到业务上的要求的，非完整渲染的长列表一般有两种方式： 懒渲染：这个就是常见的无线滚动的，每次只渲染一部分（比如10条），等剩余部分滚到可见区域，就再渲染一部分。 可视区域渲染：只渲染可见部分，不可见部分不渲染。 虚拟列表就是采用的可视区渲染方式优化 二、虚拟列表实现原理 虚拟列表（Virtual List），是一种长列表优化方案，是可视区渲染列表。其两个重要
Vue长列表优化实践（infinite-list Renderless组件）
m0_37406045的博客
04-14 966
在任何前端项目中，当页面内某处的列表数据量较多时，如果不做任何处理直接循环整个列表数组对象，就会一股脑的把这成百上千个DOM节点全部渲染出来，但我们实际能看到的列表项可能也就那么几条十几条，这些可视区之外成百上千个DOM节点显然都是不必要的性能开销，数据量要是再大一些，卡顿和崩溃都无法避免。可视区高度就是上图中的viewportHeight，每一个列表项的高度就是上图中的itemHeight（包括内容高度和边框、内外边距），当列表开始滚动时，滚动过的距离就是上图中的scrollTop。
一文搞懂长列表优化和虚拟滚动
Park_Geun_hye的博客
04-01 1596
写在前面 还 ⭐ 的基于 react-hooks 和 react-virtualized 写的虚拟滚动搭配上拉下滑加载的 scroll 组件 ???????? https://github.com/DavidWong9785/react-virtualized-scroll ???????? 写出来的小玩意可能不是特别完美，如果能给大????们提供到思路或者帮助，实在不胜荣幸 也希望大????们给个 star 啦~ antd中的l...
MySql性能优化集合--满满的干货
07-08
- **possible_keys**：显示MySQL可以使用的索引列表。 - **key**：显示MySQL实际使用的索引。 - **key_len**：显示MySQL使用的索引长度。 - **ref**：显示与索引一起使用的列或常量。 - **rows**：显示MySQL...
优化长列表
An_cf的博客
04-23 523
最近做的项目有一个列表模块数据量巨大，后端限制完数据后还有大概10000条数据，直接渲染的话会有明细的卡顿情况，于是撸起袖子开始重构。 这里只回顾一下实现原理以便以后忘了能立马捡起来： 1.保存原始列表数组数据； 2.只渲染可视区域大小的元素； 3.当滚轮滚动时，动态的计算当前的scrollTop的值，然后根据列表每条数据的高度动态的去获取可视区域应该展现的列表数组元素； 4.做内外两次...
【Vuejs】1116- 总结 Vue 的长列表优化方案
pingan8787
10-20 1939
今天主要想跟大家聊聊长列表优化，有的时候我们需要在页面上显示特别长的列表，这种情况主要发生在移动端或者后台管理的页面中，在移动端往往有个下拉刷新内容的功能，不停地往上翻，到底部后会加载更多...
前端开发中的长列表优化
weixin_43990297的博客
12-15 3117
众所周知，浏览器在渲染dom节点的时候，节点越复杂数量越多那么所消耗的时间就会越长。当业务需求为一次性要渲染大量的数据时，数据量过大且一次性全部渲染出来的时候会使浏览器卡顿或者卡死。一般情况下，列表形式的数据展示形式是最常见的，大部分情况下，常见的方式时普通分页加载和无限滚动加载，普通分页加载在这里就不说了大部分后台管理都采用这个方式，无限滚动则是根据鼠标滚动触底时加载下一页数据，实现的思路大致是监听父元素的 scroll 事件（一般是 window），通过父元素的 scrollTop 判断是否到了页面是.
长列表优化之滚动替换数据方案小记
weixin_33735077的博客
01-27 140
　　最近项目中要用到比较长的列表，在浏览器中打开渲染时比较慢，并占用了较多内存，于是就同事就建议尽量减少节点，在滚动时只是替换数据，于是就决定试试这种方法。 　　首先要做的就是添加拖动滚动条时的事件，另外由于UE要求对滚动条进行美化，于是就选用了jscrollpane这个jQuery滚动条插件，主页是：http://jscrollpane.kelvinluck.com/ 　　基本要求是表头固定...
13-Vue长列表优化 vue-virtual-scroller
iaz999的博客
07-10 6040
回答：在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿白屏数据渲染较慢的问题；这种情况主要发生在小程序、移动端或者后台管理的页面当中；通常我们会采用分页的方式进行内容的逐渐获取，但是当内容越来越多时；比如移动端的下拉刷新，不停的往上翻，到底部会加载更多内容，这样一来列表中会新增很多的元素，元素多了以后会触发浏览器的重排重绘，无论是内存的占用还是GPU的渲染都会带来很大的性能损耗，导致页面滑动卡顿数据渲染较慢。
【项目数据优化三】长列表数据优化
前端知识分享喵
03-31 542
首先我们要知道，虚拟滚动是用到 Vue 的 v-for 实现的，上面也解释了，虚拟滚动是只渲染可视区域，那么我们可视区域的节点内容必然会随着用户的滚动条的改变而改变，假设一个页面就只能显示 n 个节点，那么我们如何让这n个需要变动的节点跟着滚动条动呢？这部分就是最核心的代码了。如上图，当1被卷去的时候(完全离开我们的可视区)，我们就利用css的translateY将它顶下来，渲染成2，你会发现发现在可视区域外多出来了一个节点，为了保证滑动的连贯性，你可以多设置几个冗余节点。答案是肯定的，js为我们提供了。
长列表性能优化方案 memo
织网的博客
06-15 474
在计算机领域，记忆化是一种主要用来提升计算机程序速度的优化技术方案。它将开销较大的函数调用的返回结果存储起来，当同样的输入再次发生时，则返回缓存好的数据，以此提升运算效率。 注: 在 《JavaScript 忍者秘籍》的 3.2.2 节中「自记忆函数」中有这样的介绍： 记忆化是一种构建函数的处理过程，能够记住上次计算结果。在这个果壳里，当函数计算得到结果时就将该结果按照参数存储起来。采用这种方式时，如果另外一个调用也使用相同的参数，我们则可以直接返回上次存储的结果而不是再计算一遍。像这样避免既重复又复杂..
FP增长算法源码解析与优化
2. 代码历史记录显示了多次修改，包括优化、性能提升和结构适应，如2004年11月22日添加的树投影修剪到bonsai，以及2005年6月20日的“无物品排序”标志的修正等。 关键头文件： - `stdio.h`：标准输入输出 - `stdlib...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值