长列表渲染如何优化

最新推荐文章于 2024-08-11 15:40:47 发布
最新推荐文章于 2024-08-11 15:40:47 发布
阅读量484 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59070120/article/details/126531783
版权

该列表有1w个数据

1，前端进行分页渲染

每次渲染100个数据，这样就有100页，递归函数，初始页数为0，在里面使用settimeout，遍历100遍，渲染100条数据，渲染完后page加一，边界条件为page是否大于100，大于的的话就结束递归，否则就再次调用该函数，传入page

2，懒加载，开始只渲染可视区域的列表

监听滚动条事件，判断列表内每个元素是否出现在窗口可视范围内，就算元素距离浏览器顶部的距离是否等于滚动条滚动的距离加可视区域的高度之和，等于的话就渲染该元素

大鸡腿最好吃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
小程序渲染一半数据_小程序长列表渲染优化另一种解决方案
weixin_39844284的博客
10-20 1007
前言有些需求需要展示长列表，无限下拉都会一直显示出更多的数据。但是当一个页面展示的DOM节点过多的时候，会造成小程序页面的卡顿严重的会直接白屏。原因有以下几点：列表数据很大，不断获取下一屏的数据，setData的数据越来越多的时候耗时高渲染DOM 结构多，每次 setData 都需要创建新的虚拟- 树、和旧树 diff 操作耗时都比较高DOM 结构多，占用的内存高，造成页面被系统回收的概率变大，会...
13-Vue长列表优化 vue-virtual-scroller
iaz999的博客
07-10 6015
回答：在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿白屏数据渲染较慢的问题；这种情况主要发生在小程序、移动端或者后台管理的页面当中；通常我们会采用分页的方式进行内容的逐渐获取，但是当内容越来越多时；比如移动端的下拉刷新，不停的往上翻，到底部会加载更多内容，这样一来列表中会新增很多的元素，元素多了以后会触发浏览器的重排重绘，无论是内存的占用还是GPU的渲染都会带来很大的性能损耗，导致页面滑动卡顿数据渲染较慢。
Vue超长列表渲染性能优化
05-09
本资源是对浏览器中的Event Loop深入理解，requestAnimationFrame性能优化，DocumentFragment性能优化，Vue.js中的固定高度虚拟列表优化，面向未来的无限列表优化方案的实践，是对vue原理的一次深入理解。
长列表渲染优化
屈小康
09-26 684
为什么要使用虚拟列表？ 当数据量很大的时候，像有10万条数据的时候，我们一次性获得所有数据是不可能的，当然我们也可以使用分页的效果，但是这样用户的体验就不好了，用户喜欢往下滑动获得数据展示。当时当我们根据滑动获取数据的时候就会遇到另一个问题，不停的加载数据，导致页面堆积的节点越来越多，内存不断的增加，最后连滚动都出现了卡顿。 所以虚拟列表蕴蓄而生 什么是虚拟列表？ 虚拟列表也没有什么特别的地方，就是在页面上创建一个容器作为可视区，在这个可视区内展示长列表中的一部分，也就是在可视区域内渲染列表。 一个简
vue长列表优化
最新发布
weixin_47121832的博客
08-11 573
vue渲染10000个元素不卡顿(切割法渲染)
前端优化之 长列表渲染
weixin_48403384的博客
03-07 1830
一次性需要渲染大量的数据浏览器渲染过慢甚至渲染崩溃解决方案 本文前半部分提供思路供学习 着急解决的朋友可以直接滑最底部查看目前最快解决方法 1.宏任务分批渲染节点 <div id="list"></div> <script> let total = 10000 let id = 0 let index = 20 function load () { index += 20 if (index &
前端优化渲染：长列表渲染
qq_32021429的博客
09-15 438
众所周知，DOM多了之后，页面会变得很卡顿。有时候又不得不渲染很多数据，比如长列表，这时就需要前端做一些渲染优化了。
只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！
weixin_55846296的博客
09-16 329
https://mp.weixin.qq.com/s/kbDCSDbodGj8DmwnbNhf4Q 长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。 因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。而以上的方式无论哪种，都需要写大量的js或者css逻辑去实现。 而现在，我们多了一种方式——content-visibility。只需要一行CSS代码，就可以实现可见
前端渲染几十万条数据不卡顿.html
06-29
前端渲染几十万条数据不卡顿.html
Vue长列表优化实践（infinite-list Renderless组件）
m0_37406045的博客
04-14 958
在任何前端项目中，当页面内某处的列表数据量较多时，如果不做任何处理直接循环整个列表数组对象，就会一股脑的把这成百上千个DOM节点全部渲染出来，但我们实际能看到的列表项可能也就那么几条十几条，这些可视区之外成百上千个DOM节点显然都是不必要的性能开销，数据量要是再大一些，卡顿和崩溃都无法避免。可视区高度就是上图中的viewportHeight，每一个列表项的高度就是上图中的itemHeight（包括内容高度和边框、内外边距），当列表开始滚动时，滚动过的距离就是上图中的scrollTop。
十万条数据，后端不分页咋办！（如何优化长列表渲染）
Andrew_Chenwq的博客
05-22 753
我们在渲染上万条数据时，只需要渲染可视区当中的元素，当页面发生滚动时，监听元素并进行替换，从而达到在上万上亿条数据面前，被页面渲染的也只有不过几百个节点，达到优化长列表大数据渲染的目的。前面我们看到在虚拟列表渲染中，只渲染了可视区的数据，所以为了让页面能够正常的滚动，我们需要一个占位的元素，在上面代码的DOM结构中。内需要的元素，当页面滚动时，再动态计算需要被渲染的元素，删除掉消失在视窗中的元素，保持总数一致。我们可以利用视窗的高度计算出此时视窗中的开始元素与结束元素，对listData进行裁剪。
前端: 如何优化列表大批量的数据渲染
、蹄码笑春风的博客
08-30 1877
前端: 虚拟列表渲染数据
性能优化之长列表渲染——时间分片和虚拟列表
superermiao的博客
04-23 2669
为什么要做长列表优化，让我们看一段代码的执行。 let now = Date.now();// 记录任务开始时间 let ul = document.getElementById('container'); //获取容器 let total = 100000; for(let i = 0; i< total;i++) { let li = document.crea...
前端页面渲染多条数据长列表的性能优化
weixin_50367873的博客
03-21 2131
后端一次性传了10w条数据，前端该如何处理,前端渲染长数据大数据，性能优化
好客租房139-长列表性能优化（懒渲染）
geyaoisnice的博客
05-21 109
1常见的长列表优化方案 常见于移动端 2原理:每次渲染一部分 渲染的数据即将滚动完 在渲染下面的数据 3优点 每次渲染一部分数据 速度快 4数据量打的时候 页面上存在大量dom节点 占用树村过多 5使用场景 数据量不打的情况下 具体看页面的复杂程度 ...
开源的长列表渲染库-Clusterize.js
liinux-Talk is cheap,show me the code.
12-15 1981
主流开源库实现长列表渲染的方式大同小异，除了决定渲染哪些元素的方式有一些不同外，其最大的区别在于如何将渲染出来的列表元素合理的放置在可视区域中。 Clusterize.js Clusterize.js 基于 Vanilla.js (原生 JavaScript) ，用于在前端高效地展示大型数据集中的数据�。 渲染思路 Clusterize.js 将数据源划分成了一块一块的「Cluster」。...
vue渲染大量数据如何优化_Vue列表渲染性能优化原理
weixin_30767895的博客
01-12 2164
Vue列表渲染性能优化原理Vue 是一个高效的 mvvm 框架，这得益于作者已经帮我们框架内部做了足够的优化，比如各个细节的缓存( parseText 结果的缓存，compile 编译结果的缓存等)。大列表是容易造成性能问题的地方，一不小心就会造成大量的重绘和重排。Vue 的列表渲染实现在 v-for 指令的 update 方法， 性能优化的大部分细节在 diff 函数。列表渲染时会为迭代列表的每...
vue 长列表渲染优优化
yin_you_yu的博客
11-16 2899
<template> <div ref="list" :style="{height}" class="infinite-list-container" @scroll="scrollEvent($event)"> <div ref="phantom" class="infinite-list-phantom"></div> &...
Element表格长列表渲染太慢太卡如何优化?（缩短加载时间）
陈新科的博客
03-24 3578
我们一次拿到所有数据但是只渲染10条数据,只要把页面填满就行.等用户拉动滚动条到达底部时我们就填加渲染数据30条.初次渲染，脚本执行由2200毫秒优化到75毫秒左右，渲染由600多毫秒优化到19多毫秒。因为我们多个页面需要用到懒加载，所以我们提取成公共方法mixin。因为vue是单页面应用所以一定要记得销毁滚动事件监听。代码注释很详细，具体看注释即可。利用列表懒加载（虚拟列表）
微信小程序长列表渲染
09-01
综上所述，微信小程序中的长列表渲染主要通过scroll-view组件、wx:for循环语法、scroll-into-view方法以及上拉刷新和下拉加载等功能来实现。这些方法可以提高列表渲染的性能和用户体验，使用户能够流畅地浏览和操作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大鸡腿最好吃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值