javascript - 懒加载性能问题？
现在有一个下拉列表，需要渲染的数据为十几万条，每次渲染的时候都会很卡顿，我想优化渲染性能，考虑采用懒加载的形式，先对数据获取接口进行分页处理，每次在判断快滚动到底部的时候，再加载下一页数据，加载完成之后，拼接旧数据 + 新数据 组成要渲染的数据，再赋值给下拉框进行渲染，但是这种形式有一个问题是：当滚动到最后面的时候，这时候需要渲染的数据量也很多，会造成dom过多，页面性能也会有问题，请问我该如何优化？
共有3个答案
关于大数量的列表展示，你可以做虚拟列表来优化性能，我在这里简单说下虚拟列表：它可以解决大批量dom渲染造成的性能消耗和卡顿问题，假如你每次在列表上只展示10条数据，此时总数有十几万条，每次滚动条向下滑动，最上面的一条被滚动隐藏后dom销毁，下面新增的一条展示，这样做你的画面每次只会展示10条数据，在此基础上，你可以做一个数据的缓冲，每次展示16条，上3条，下三条，这样数据就不会有卡顿现象，虚拟列表是一个懒加载的行为，只有你滑动的时候，才会对数据进行计算和渲染。关于虚拟列表，网上文章挺多的，你可以看看。
使用vue-virtual-scroller做虚拟列表:
https://www.npmjs.com/package/vue-virtual-scroller
virtual list 了解一下。react 可以用 https://github.com/bvaughn/react-virtualized vue 可以用 https://github.com/tangbc/vue-virtual-scroll-list
-
我有一个数据表的问题-懒加载。我认为问题是在IdiomasBean.java（TableBean.java），如果我把： 我得到了正确的数据表，但是<代码>按排序、筛选和不起作用。 我得到：java。lang.NullPointerException这里是堆栈跟踪： 下面是代码的其余部分： 指数xhtml diomasBean.java 懒散的数据模型。JAVA IdiomasBo.java 习语
-
引入 Lazyload 是 Vue 指令，使用前需要对指令进行注册。 import { createApp } from 'vue'; import { Lazyload } from 'vant'; const app = createApp(); app.use(Lazyload); // 注册时可以配置额外的选项 app.use(Lazyload, { lazyComponent:
-
main.js import Vue from "vue"; import { Lazyload } from "feui"; Vue.use(Lazyload, { lazyComponent: true, //失败时显示 error: "https://i.loli.net/2018/01/29/5a6e858413275.png", //loading图 l
-
LazyLoad 懒加载 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 通过image参数传入图片的src路径即可 注意 由于uni-app认给了image组件的height为225px，同时也只uni-appimage组件的mode参数为widthFix时，image才会自动计算出一个高度值 覆盖默认的height
-
我有一个问题，就是基于hasMany关系从数据库中获取数据并将其发送到Larave中的api。在下面的代码中，Laravel没有给我客户id=$id的产品。我不知道为什么，我不能在$query旁边发送$id。如果我把号码写在“我有很好的安全套，但我需要自动拿。 所有api代码 先谢谢你。
-
本文向大家介绍基于javascript实现图片懒加载，包括了基于javascript实现图片懒加载的使用技巧和注意事项，需要的朋友参考一下 一、定义 图片延迟加载也称为懒加载，延迟加载图片或符合某些条件时才加载某些图片，通常用于图片比较多的网页。可以减少请求数或者延迟请求数，优化性能。 二、呈现形式 【1】延时加载，使用setTimeout或setInterval进行加载延迟，如果用户在加载