当前位置：首页 > news >正文

面试(进阶) —虚拟列表在什么场景使用，如何实现？

news 来源：原创 2025/9/12 16:52:22

面试(进阶) —`虚拟列表在什么场景使用，如何实现？`

在前端开发中，当需要渲染大量数据时，传统的渲染方式往往会遇到性能瓶颈。一次性将大量数据渲染到DOM中，不仅会导致页面加载缓慢，还可能占用大量内存，影响浏览器的响应速度。为了解决这个问题，虚拟列表（Virtual List）技术应运而生。

在这里插入图片描述

虚拟列表的定义

虚拟列表是一种优化长列表渲染的技术。它的核心思想是：只渲染当前视口（viewport）内可见的数据项，而非一次性渲染所有数据。通过动态计算视口内应显示的数据项，虚拟列表能够显著减少DOM节点的数量，从而提高页面的渲染性能和交互流畅度。

虚拟列表的关键点

视口计算：确定当前视口的大小和位置，以及每个列表项的高度。
数据截取：根据视口的位置和大小，从数据源中截取应显示的数据项。
DOM渲染：仅将截取的数据项渲染到DOM中。
滚动监听：监听用户的滚动操作，实时更新视口的位置，并重新渲染可见的数据项。

虚拟列表的实现原理

虚拟列表的实现通常涉及以下几个步骤：

计算视口高度和列表项高度：这是为了确定在视口内能够显示多少个列表项。
确定起始和结束索引：根据滚动条的位置和列表项的高度，计算出当前视口内应显示的起始和结束数据索引。
渲染数据：根据计算出的起始和结束索引，从数据源中截取相应部分的数据进行渲染。
更新视口：监听滚动事件，当用户滚动列表时，重新计算起始和结束索引，并更新渲染的内容。

Vue版本案例代码

下面是一个使用Vue.js实现的虚拟列表示例：

<template><div id="app"><div class="container" ref="container" @scroll="handleScroll"><divclass="item"v-for="(item, index) in visibleItems":key="index":style="{ top: `${(startIndex + index) * itemHeight}px` }">{{ item }}</div></div></div>
</template><script>
export default {data() {return {items: [], // 数据源itemHeight: 30, // 每个列表项的高度containerHeight: 300, // 容器高度startIndex: 0, // 当前视口的起始索引endIndex: 0, // 当前视口的结束索引};},computed: {visibleItems() {// 计算当前视口内应显示的数据项return this.items.slice(this.startIndex, this.endIndex);},},mounted() {// 初始化数据源this.items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);this.updateVisibleItems();},methods: {updateVisibleItems() {// 更新视口内的起始和结束索引const container = this.$refs.container;const totalItems = this.items.length;const displayedItems = Math.ceil(this.containerHeight / this.itemHeight);this.startIndex = Math.max(0, Math.floor(container.scrollTop / this.itemHeight));this.endIndex = Math.min(totalItems, this.startIndex + displayedItems);},handleScroll() {// 监听滚动事件，更新可见数据项this.updateVisibleItems();},},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}.container {height: 300px;overflow-y: auto;border: 1px solid #ccc;position: relative;
}.item {height: 30px;border-bottom: 1px solid #eee;padding: 5px;box-sizing: border-box;position: absolute;width: 100%;
}
</style>

解析描述

模板部分

使用<div>元素作为容器，并绑定了滚动事件监听器。
使用v-for指令循环渲染可见的数据项，并通过:style绑定动态设置每个列表项的顶部位置。

脚本部分

定义了数据源items，每个列表项的高度itemHeight，容器高度containerHeight，以及当前视口的起始和结束索引startIndex和endIndex。
在mounted生命周期钩子中初始化数据源，并调用updateVisibleItems方法更新可见数据项。
定义了updateVisibleItems方法，用于根据滚动条的位置更新视口内的起始和结束索引。
定义了handleScroll方法，监听滚动事件并调用updateVisibleItems方法更新可见数据项。

样式部分

为容器和列表项设置了样式，包括高度、边框、滚动条等。
使用position: absolute;为列表项设置绝对定位，以便根据起始索引动态调整每个列表项的位置。

通过这个Vue版本的虚拟列表实现，我们可以更加直观地理解虚拟列表的工作原理和实现方式。在实际应用中，还可以根据需要进行进一步优化和扩展，如支持动态调整列表项高度、处理大量数据时的性能优化等。

虚拟列表的优缺点

优点：

性能提升：虚拟列表通过只渲染可视区域内的项，显著减少了DOM元素的数量，从而提高了页面的渲染效率和响应速度。这对于处理大量数据（如十万、百万级别）的列表尤其有效。
内存优化：由于只渲染可见区域内的元素，虚拟列表节省了内存消耗，避免了大规模数据的全部渲染，有助于提升应用的性能。
流畅体验：用户滚动列表时，虚拟列表可以实现流畅的加载和切换，减少了页面卡顿现象，提升了用户体验。

缺点：

实现复杂度：虚拟列表的实现相对复杂，需要开发者具备一定的前端技术基础，包括DOM操作、事件监听、计算逻辑等。
兼容性：在某些特殊情况下，虚拟列表可能与某些CSS样式或布局方式存在兼容性问题，需要开发者进行额外的调试和优化。

比较

列表类型	渲染方式	优缺点	适用场景
虚拟列表	只渲染可视区域内的项	优点：性能高、内存占用少、用户体验流畅；缺点：实现复杂、可能存在兼容性问题	处理大量数据的列表，如聊天记录、商品列表、评论区等
普通列表	一次性渲染所有数据项	优点：实现简单；缺点：性能低、内存占用高、用户体验可能卡顿	数据量较小的列表，如导航菜单、标签页等
分页列表	分批次加载数据并渲染	优点：减少单次加载的数据量，提升性能；缺点：用户需要手动翻页，体验可能不如虚拟列表流畅	数据量较大的列表，且希望减少单次加载压力的情况
无限滚动列表	用户滚动到底部时加载更多数据	优点：用户体验较为流畅，无需手动翻页；缺点：可能存在性能问题，尤其是在数据量非常大的情况下	希望提供连续滚动体验的场景，如新闻资讯、社交媒体等

分析：

普通列表适用于数据量较小的场景，实现简单但性能较低。
分页列表通过分批次加载数据来减少单次加载的压力，适用于数据量较大的情况，但用户需要手动翻页，体验可能不如虚拟列表流畅。
无限滚动列表提供了连续滚动的体验，适用于希望用户能够连续浏览的场景，但在数据量非常大的情况下可能存在性能问题。
虚拟列表则通过只渲染可视区域内的项来显著提升性能和用户体验，特别适用于处理大量数据的列表场景。然而，其实现相对复杂，且可能存在兼容性问题。

在选择列表类型时，开发者应根据具体的应用场景、数据量、性能要求以及用户体验需求进行综合考虑。

看到这里的小伙伴，欢迎点赞、评论，收藏！

如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！

在这里插入图片描述

面试(进阶) —虚拟列表在什么场景使用，如何实现？

面试(进阶) —虚拟列表在什么场景使用，如何实现？ 在前端开发中，当需要渲染大量数据时，传统的渲染方式往往会遇到性能瓶颈。一次性将大量数据渲染到DOM中，不仅会导致页面加载缓慢，还可能占用大量内存&#x…...

编程日记 2025/9/12 16:52:22

Linux基础 -- ARM 32位常用机器码（指令）整理

ARM 32位常用机器码（指令）整理 1. 数据处理指令（运算、逻辑、比较） 指令含义示例备注MOV赋值（寄存器传输）MOV R0, R1直接将 R1 复制到 R0MVN取反MVN R0, R1R0 ~R1ADD加法ADD R0, R1, R2R0 R1 R2ADC带进…...

编程日记 2025/9/7 21:37:07

【JAVA】阿里云百炼平台对接DeepSeek-V3大模型使用详解

1、DeepSeek简介 DeepSeek的火热让全世界见证了一场国产AI大模型走向巅峰的盛宴。DeepSeek的横空出世一方面让AI大模型的格局得到重塑，另一方面，对于普通人来说，也有机会零距离的体验到更懂国人的AI大模型。从很多使用过后的小伙伴们的反馈来…...

编程日记 2025/9/6 19:40:48

STM32之时钟树

左边是时钟产生电路，右边是时钟分配电路。中间的SYSCLK就是系统时钟72MHz，在产生电路有四个时钟源，分别是内部8MHz高速RC振荡器，外部的4-16MHz高速石英晶体振荡器，这个一般接8MHz,第三个是外部的32.768kHz低速晶振&…...

编程日记 2025/9/10 7:25:56

QT day1

作业代码 class Widget: public QWidget {QPushButton* button; //按钮Widget* other; //显示对面 public:Widget(){button new QPushButton("按钮",this); //控件认this作父this->resize(300,300); //界面大小button->resize(100,10…...

编程日记 2025/9/12 15:08:58

【机器学习】梯度下降法及使用一元二次方程模拟使用梯度下降法的代码实现

梯度下降法一、摘要二、梯度下降法三、线性方程中使用梯度下降法一、摘要文本主要讲述了梯度下降法作为机器学习中的一种优化方法，用于最小化损失函数。它并非直接解决机器学习问题，而是作为求解最优参数的工具。通过二维坐标图直观展示了梯度下降法…...

编程日记 2025/9/8 11:01:24

目录 1. 引言2. 通过docker-compose联动启动Hadoop和MySQL容器3. 配置Hive3.1 下载并解压Hive-4.0.12.2 配置环境变量2.3 安装mysql-connector的jar包2.4 配置Hive2.4.1 hive-env.sh2.4.2 hive-site.xml2.4.2.1 javax.jdo.option.ConnectionURL2.4.2.2 javax.jdo.option.Connec…...

编程日记 2025/9/8 14:02:18

网络安全越权分为几种

1. 权限查看 Linux 系统中的每个文件和目录都有访问许可权限，通过其确定谁可以通过何种方式对文件和目录进行访问和操作。文件或目录的访问权限分为只读、只写和可执行3种。以文件为例，只读权限表示只允许读其内容，而禁止对其做任何的更改…...

编程日记 2025/9/1 22:06:32

PHP面试题--后端部分

本文章持续更新内容之前没来得及整理时间问题导致每次都得找和重新背这次整理下也方便各位小伙伴一起更轻松的一起踏入编程之路欢迎各位关注博主不定期更新各种高质量内容适合小白及其初级水平同学一起学习一起成为大佬数组函数有那些 ps：本题挑难的背因为…...

编程日记 2025/9/7 12:47:11

HTTP～文件 MIME 类型

MIME（Multipurpose Internet Mail Extensions）类型，即多用途互联网邮件扩展类型，是一种标准，用来表示文档、文件或字节流的性质和格式。最初是为了在电子邮件系统中支持非 ASCII 字符文本、二进制文件附件等而设计的&a…...

编程日记 2025/9/7 13:28:22

工程化与框架系列（4）--Webpack 高级配置详解

Webpack 高级配置详解 🛠️ Webpack 是前端工程化中最流行的构建工具之一，掌握其高级配置可以帮助我们构建更高效、更优化的应用。本文将深入探讨Webpack的高级配置技巧和最佳实践。 Webpack 核心概念回顾 🌟 💡 小知识&#xf…...

编程日记 2025/9/11 20:10:49

Let‘s Encrypt免费证书的应用示例

文章目录前言证书申请证书介绍cert.pemchain.pemfullchain.pemprivkey.pem 使用步骤搭建简易demo应用新建nginx配置文件测试SSL是否生效总结前言最近在搞苹果应用上架的问题，据说用HTTP会被拒，但貌似不绝对，2017年苹果曾发公告说必须要求…...

编程日记 2025/9/10 10:17:44

线性模型 - 支持向量机

支持向量机（SVM）是一种用于分类（和回归）的监督学习算法，其主要目标是找到一个最佳决策超平面，将数据点分为不同的类别，并且使得分类边界与最近的数据点之间的间隔（margin&#xff09…...

编程日记 2025/9/12 5:14:27

455. 分发饼干（LeetCode）

题目来源： 455. 分发饼干 - 力扣（LeetCode） 题目内容： 假设你是一位很棒的家长，想要给你的孩子们一些小饼干。但是，每个孩子最多只能给一块饼干。对每个孩子 i，都有一个胃口值 g[i]&#xf…...

编程日记 2025/9/12 6:37:47

Harmony os next~鸿蒙应用开发入门教程

鸿蒙应用开发入门教程基础准备与环境搭建 1. 了解鸿蒙系统 1.1 核心理念学习 HarmonyOS（鸿蒙系统）是华为推出的全场景分布式操作系统，其核心特点如下： 分布式能力设备协同：手机、平板、智能手表、IoT设备等可无…...

编程日记 2025/9/10 1:41:19

数据库数据恢复—SQL Server附加数据库报错“错误 823”怎么办？

SQL Server数据库附加数据库过程中比较常见的报错是“错误 823”，附加数据库失败。如果数据库有备份则只需还原备份即可。但是如果没有备份，备份时间太久，或者其他原因导致备份不可用，那么就需要通过专业手段对数据库进行数据恢复…...

编程日记 2025/9/8 16:08:28

树莓派安装ros docker

系统：bookworm或者ubuntu24都行一、下载docker和拉取ros:noetic镜像 ubuntu 用鱼香ros脚本安装docker并拉取ros:noetic镜像： https://fishros.org.cn/forum/topic/20/小鱼的一键安装系列 wget http://fishros.com/install -O fishros && . …...

编程日记 2025/9/10 2:56:31

MyBatis-Plus 自动填充功能

MyBatis-Plus（MP） 提供了一个非常强大的功能——自动填充功能。该功能可以在执行插入或更新操作时，自动为某些字段赋值，免去手动设置这些字段的麻烦。常见的应用场景包括创建时间和更新时间字段的自动填充，帮助开发…...

编程日记 2025/8/22 13:28:18

折半搜索笔记

前言 01 01 01 爆搜的时间复杂度通常为 O ( 2 n ) O(2^n) O(2n)，只能应付 N N N 为 20 20 20 左右的题目，但是折半搜索可以应付 N N N 为 30 30 30 ~ 40 40 40 的题目。思想将 N N N 个数分为前后两半，先搜索前一半的状态&#xf…...

编程日记 2025/9/10 13:13:11

vue 项目部署到nginx 服务器

一 vue 项目打包 1 本地环境 npm run build 2 打包完成生成一个dist 文件夹，将其放到服务器指定的文件夹，此文件夹可以在nginx 配置文件中配置二 nginx 1 根据对应的系统搜索安装命令 sudo yum install nginx 2 查看conf位置如果不知道的话 ng…...

编程日记 2025/9/7 5:04:18

JavaWeb基础专项复习6——AJAX

系列文章目录 1、JavaWeb基础专项复习1——XML文件-CSDN博客 2、JavaWeb基础专项复习2——JSP文件-CSDN博客 3、JavaWeb基础专项复习2——Servlet相关知识-CSDN博客 4、JavaWeb基础专项复习4——会话对象Session and Cookie-CSDN博客 5、JavaWeb基础专项复习5——请求对象…...

编程日记 2025/9/12 8:08:54

RabbitMQ快速入门

目录 MQ简介 1、同步通信图片 2、异步通信图片 RabbitMQ快速上手基本介绍： Producer和Consumer Connection和Channel Virtual host Queue Exchange 工作流程 AMQP Java编写RabbitMQ生产者消费者生产者 1.建立连接 2.开启信道 3.声明交换机 4.声…...

编程日记 2025/9/12 7:04:48

内存中的缓存区

在 Java 的 I/O 流设计中，BufferedInputStream 和 BufferedOutputStream 的“缓冲区”是内存中的缓存区（具体是 JVM 堆内存的一部分），但它们的作用是优化数据的传输效率，并不是直接操作硬盘和内存之间的缓存。以下是详…...

编程日记 2025/9/10 11:03:39

快速列出MS Word中所有可用字体

Word中有很多字体，虽然在字体下拉列表中提供了字体的样例，但是并不全面，例如使用Batang字体的话，数字会显示成什么效果，就无法直观的看到。打开Word应用程序，新建一个空白文档，按AltF11打开VBE…...

编程日记 2025/9/6 13:23:37

《机器学习数学基础》补充资料：矩阵的LU分解

本文是对《机器学习数学基础》第2章2.3.3节矩阵LU分解的拓展。判断是否可LU分解并非所有矩阵都可以实现LU分解。定理1： 若 n n n 阶可逆矩阵 A \pmb{A} A 可以进行LU分解，则 A \pmb{A} A 的 k k k 阶顺序主子阵（leading principal s…...

编程日记 2025/9/8 10:54:29

seasms v9 注入漏洞 + order by注入+information_schema解决方法

目录一、当注入时，information_schema被禁用的解决方法 1.通过sys库可以获取到表名和库名 2.通过无列名注入join获取列名二、seasms v9 注入漏洞三、order by注入一、当注入时，information_schema被禁用的解决方法 information_schema数据库是My…...

编程日记 2025/9/8 16:43:24

跨端方案选型：对比Uni-app与Taro在复杂电商项目中的技术选型依据参考

跨端方案选型：对比Uni-app与Taro在复杂电商项目中的技术选型依据参考请赏析： Uni-app与Taro复杂电商项目选型对比指南一、核心选型维度速记技术栈匹配 → 跨端能力 → 性能优化 → 开发效率 → 生态支持 → 长期维护二、关键维度对比分析 1. 技术栈匹配性框架技术栈适…...

编程日记 2025/9/10 11:14:01

C语言32个关键字

32个关键字 1.基本数据类型 signed unsigned char int float double short long void 2.构造数据类型 struct union enum 3.数据存储类别 auto static extern register 4.数据优化 const volatile 5. 9条基本语句 if else switch case break default while do for…...

编程日记 2025/9/9 1:12:05

音乐游戏Drummania(GITADORA)模拟器

文章目录 （一）Drummania和GITADORA（1.1）基本情况（1.2）机体 （二）模拟器（2.1）主程序（2.2）模拟器主题 （三）曲谱文…...

编程日记 2025/9/10 19:23:12

WPF中对滚动条进行平滑滚动

有时候我们在动态添加内容时，需要将滚动条滚动到指定内容处。一般我们会调用ScrollViewer的ScrollToVerticalOffset（垂直方向）函数和ScrollToHorizontalOffset（水平方向）函数来控制滚动条滚动到指定位置。正常滚动效…...

编程日记 2025/9/6 22:35:45

【通俗讲解电子电路】——从零开始理解生活中的电路(一)

导言：电子电路为什么重要？ ——看不见的“魔法”，如何驱动你的生活？ 清晨，当你的手机闹钟响起时，你可能不会想到，是电子电路在精准控制着时间的跳动；当你用微波炉加热早餐时&#…...

编程日记 2025/9/11 18:24:30

达梦：内存相关参数

目录 28个相关参数1. 内存池相关MEMORY_POOLMEMORY_N_POOLSMEMORY_BAK_POOL 2. 大缓冲区相关HUGE_BUFFERHUGE_BUFFER_POOLS 3. 共享缓冲区相关BUFFERBUFFER_POOLSBUFFER_MODEMAX_BUFFER 4. 快速池相关FAST_POOL_PAGES 5. 回收池相关RECYCLE_POOLS 6. 回滚段池相关ROLLSEG_POOLS…...

编程日记 2025/9/8 20:23:06

MySql面试总结（一）

mysql中排序是怎么实现的？ MySQL 中的排序主要通过ORDER BY子句来实现，其底层实现方式有文件排序和索引排序两种，以下是具体介绍：通过ORDER BY子句实现排序这是 MySQL 中进行排序的基本方式，语法为SELECT column1, column2,... FROM table_name ORDER BY column_name…...

编程日记 2025/9/9 22:34:57

YOLOv5 + SE注意力机制：提升目标检测性能的实践

一、引言目标检测是计算机视觉领域的一个重要任务，广泛应用于自动驾驶、安防监控、工业检测等领域。YOLOv5作为YOLO系列的最新版本，以其高效性和准确性在实际应用中表现出色。然而，随着应用场景的复杂化，传统的卷积神经网络在处…...

编程日记 2025/8/31 2:21:52

第十四届蓝桥杯大赛软件赛国赛C/C++大学C组

A 【跑步计划——日期问题】-CSDN博客 B 【残缺的数字】-CSDN博客 C 题目代码 #include <bits/stdc.h> using namespace std;void change(int &x) {int sum 0, t x;while(t){sum t % 10;t / 10;}x - sum; } int main() {int n;cin >> n;int ans 0;…...

编程日记 2025/9/9 4:24:03

【备份】php项目处理跨域请求踩坑

这都是老生常谈的东西了。我还在踩坑，记录一下。我在项目入口明明写了如下代码： // 处理预检请求 (OPTIONS) if ($_SERVER[REQUEST_METHOD] OPTIONS) {header("Access-Control-Allow-Origin: https://xxx.vip");header("Access-Cont…...

编程日记 2025/9/10 6:50:23

编程题 - 汽水瓶【JavaScript/Node.js解法】

‌“学如逆水行舟，不进则退。”‌ ——《增广贤文》目录汽水瓶题目：解答分析：js代码解答 -ACM模式：代码通过：题解分析：简洁思路代码： 汽水瓶题目： 某商店规定：三个空…...

编程日记 2025/9/12 9:22:19

【考研】复试相关上机题目

文章目录 22机试回忆版1、判断燃气费描述输入格式输出格式输入样例输出样例 C o d e Code Code 2、统计闰年数量描述输入格式输出格式输入样例输出样例 C o d e Code Code 3、打印图形描述输入格式输出格式 C o d e Code Code 4、密文数据描述输入格式输出格式输入样例输出样例…...

编程日记 2025/9/4 23:00:56

HONOR荣耀MagicBook 15 2021款独显(BOD-WXX9,BDR-WFH9HN)原厂Win10系统

适用型号：【BOD-WXX9】 MagicBook 15 2021款 i7 独显 MX450 16GB512GB (BDR-WFE9HN) MagicBook 15 2021款 i5 独显 MX450 16GB512GB (BDR-WFH9HN) MagicBook 15 2021款 i5 集显 16GB512GB (BDR-WFH9HN) 链接：https://pan.baidu.com/s/1S6L57ADS18fnJZ1…...

编程日记 2025/9/8 14:37:33

微信小程序：完善购物车功能，购物车主页面展示，详细页面展示效果

一、效果图 1、主页面根据物品信息进行菜单分类，点击单项购物车图标添加至购物车，记录总购物车数量 2、购物车详情页根据主页面选择的项，根据后台查询展示到页面，可进行多选，数量加减等二、代码 1、主页面页…...

编程日记 2025/9/8 16:37:47

Spring Boot集成MyBatis访问MySQL：从项目搭建到基础数据库查询（基础入门）

Spring Boot集成MyBatis访问MySQL 一、引言在当今企业级应用开发中，Spring Boot、MyBatis与MySQL的组合凭借其高效性和灵活性，成为构建数据驱动型应用的首选方案。本文将带你从零开始搭建项目，掌握Spring Boot集成MyBatis的基础入门内容。…...

编程日记 2025/9/3 22:24:55

基于STM32的智能家居能源管理系统

1. 引言传统家庭能源管理存在能耗监控粗放、设备联动不足等问题，难以适应绿色低碳发展需求。本文设计了一款基于STM32的智能家居能源管理系统，通过多源能耗监测、负荷预测与优化调度技术，实现家庭能源的精细化管理与智能优化，提…...

编程日记 2025/9/8 12:57:28

OpenAI发布GPT-4.5：功能非常特殊，推理很贵

今天凌晨4点，OpenAI进行了在线技术直播，发布了最新模型GPT-4.5。 GPT-4.5与之前的模型相比，本次最大的亮点是加上了“情商”，这也是目前所有大模型最缺、最难的功能。此外，GPT-4.5 在SimpleQA上的测试数据显示&…...

编程日记 2025/9/10 0:11:50

DeepSeek开源周 Day04：从DualPipe聊聊大模型分布式训练的并行策略

DualPipe简介今天是DeepSeek开源周的第四天，官方开源了一种新型并行计算优化策略——DualPipe。其实大家阅读过Deepseek-V3技术报告的同学，对这个技术并不陌生。开源地址：https://github.com/deepseek-ai/DualPipe 核心亮点 DualPipe&…...

编程日记 2025/9/11 8:58:17

RabbitMQ系列（七）基本概念之Channel

RabbitMQ 中的 Channel（信道） 是客户端与 RabbitMQ 服务器通信的虚拟会话通道，其核心作用在于优化资源利用并提升消息处理效率。以下是其核心机制与功能的详细解析： 一、Channel 的核心定义虚拟通信链路 Channel 是建立在 TCP 连…...

编程日记 2025/9/10 9:43:50

LeetCode 热题 100_有效的括号（69_20_简单_C++）（栈；栈+哈希表（建立左右括号的对应关系））

LeetCode 热题 100_有效的括号（69_20） 题目描述：输入输出样例：题解：解题思路：思路一（栈）：思路二（栈哈希表（建立左右括号的对应关系）&a…...

编程日记 2025/9/9 14:19:10

c#-LINQ与lambda表达式学习笔记

https://blog.csdn.net/m0_56259289/article/details/144134122 static void Main(string[] args) //程序入口{int[] arr1 new int[] { 1, 2, 3, 4, 5, 6, 7 };int[] arr2 new int[] { 1, 2, 3, 4, 5, 6, 7 };var query1 from n in arr1 select n;var query2 from a in arr…...

编程日记 2025/9/10 10:56:29

面试(进阶) —虚拟列表在什么场景使用，如何实现？

虚拟列表的定义

虚拟列表的关键点

虚拟列表的实现原理

Vue版本案例代码

解析描述

模板部分

脚本部分

样式部分

虚拟列表的优缺点

比较

相关文章：

面试(进阶) —`虚拟列表在什么场景使用，如何实现？`