【面试题】面试官：如果后端给你 1w 条数据，你如何做展示？
最近一位朋友参加阿b的面试，然后面试官问了她这个问题，我问她咋写的，她一脸淡定的说：“虚拟列表。”
大厂面试题分享 面试题库
前后端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
虚拟列表
What？？？
虚拟列表是个啥，我咋不知道😭
我就去查了一下，好家伙：
虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。
获取数据本身其实并没有那么消耗性能，渲染的过程才消耗时间，所以我们可以把渲染这一部分抽离出来，这样消耗的时间就减少了许多。
懒加载
我看着虚拟列表想了半天，这玩意和懒加载有啥区别吗？
我就默默去查了一下懒加载详细定义和实现：
懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。
你仔细看看实现结构，懒加载的图片是已经存在的 div，已经放到 HTML 的结构里了。
我们再看看之前那个虚拟列表实现链接里的效果：
虚拟列表里面的渲染是动态的，当他不在视口可见，div 也不进行渲染了。
分页
我能想到的方式自然还有组件库自带的分页。
分片渲染
其实还有一个东西，叫分片渲染
分片渲染：简单的说就是一个执行完再执行下一个，其思想是建立一个队列，通过定时器来进行渲染，比如说一共有3次，先把这三个放入到数组中，当第一个执行完成后，并剔除执行完成的，在执行第二个，直到全部执行完毕，渲染队列清空。
如果我们一次性把所有的数据都进行渲染显然是会出现很大的问题，JS 的执行速度比 DOM 快得多，我们可以渲染一个 Item，让他一开始的展示与否为 false，然后我们一个一个的渲染或者100个100个的渲染，这样就解决了我们一次性渲染过多 的问题。
大厂面试题分享 面试题库
前后端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
相关文章：
【面试题】面试官：如果后端给你 1w 条数据，你如何做展示？
最近一位朋友参加阿b的面试，然后面试官问了她这个问题，我问她咋写的，她一脸淡定的说：“虚拟列表。”大厂面试题分享 面试题库前后端面试题库 （面试必备） 推荐：★★★★★地址：前端面…...
第十二届蓝桥杯省赛详解
试题A：空间 1B是8位，32位二进制数占用4B空间，1MB2^10KB2^20B 那么可以存放32位二进制数的个数为256*2^20*8/3267108864 试题B：卡片 分析：因为数据只有2021，所以直接模拟即可 结果为：3181&…...
ssh创建秘钥对
1. 使用ssh-keygen 生成秘钥对 [root6zix89b87qmvuv ~]# ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): 按回车键或设置密钥的存储路径 Enter passphrase (empty for no passphrase): 按回车键或设置密钥的存…...
方法返回值？)
JS中sort()方法返回值？
参考 https://segmentfault.com/q/1010000043489928 精辟解释 就是说 sort() 会修改原数组项的排序，sort() 结束后会返回一个数组结果，这个结果其实就是原数组。并不是说会返回一个新的数组。 原理讲解 JS 分为栈内存和堆内存，栈内存可以…...
07从零开始学Java之如何正确的编写Java代码？
作者：孙玉昌，昵称【一一哥】，另外【壹壹哥】也是我哦CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者前言在上一篇文章中，壹哥带领大家开始编写了第一个Java案例，在我们的cmd命令窗口中输出了”Hello World“这…...
Python学习笔记14：网络编程
网络编程 几个网络模块 模块socket # 简单的服务器 import socket s socket.socket() host socket.gethostname() port 1234 s.bind((host, port))s.listen(5) while True: c, addr s.accept() print(Got connection from, addr) c.send(Thank you for connecting)c.…...
初入了解——什么是VUE
个人简介：云计算网络运维专业人员，了解运维知识，掌握TCP/IP协议，每天分享网络运维知识与技能。座右铭：海不辞水，故能成其大；山不辞石，故能成其高。个人主页：小李会科技的…...
)
代码规范(C++)
1.命名规范 1.目录/文件 字母、数字、下划线构成，不同单词用下划线隔开。 2.函数/接口 小驼峰命名法。 3.命名空间 字母、数字、下划线构成，不同单词用下划线隔开，但是尽量只使用一个单词。 4.结构体/类 大驼峰命名法，不包…...
React教程详解四（hooks、pureComponent、Context通信、错误边界、children props与render props）
前言 hooks是react16.8.0版本新增加的新特性/新语法，最大的特点是可以在开发者在函数组件中使用state以及其它React特性，下面分别对其介绍～ React.useState() state hook能让函数组件也可以拥有state状态，方便其进行state状态的…...
【Spring从成神到升仙系列 二】2023年再不会 IOC 源码，就要被淘汰了
👏作者简介：大家好，我是爱敲代码的小黄，独角兽企业的Java开发工程师，CSDN博客专家，阿里云专家博主📕系列专栏：Java设计模式、数据结构和算法、Kafka从入门到成神、Kafka从成神到升仙…...
菜鸟的进阶--手写一个小型dubbo框架
1.rpc调用流程2.组件1.Redis注册中心3.编解码/序列化在本例的Netty通信中，由于每次调用rpc服务都要发送同一个类对象invoker，所以可以使用Protobuf。但是在接受方法调用结果的时候就不行了，因为我们无法提前确定对方方法返回结果的类型&#…...
js逆向爬取某音乐网站某歌手的歌曲
js逆向爬取某音乐网站某歌手的歌曲一、分析网站1、案例介绍2、寻找列表页Ajax入口（1）页面展示图。（2）寻找部分歌曲信息Ajax的token。（3）寻找歌曲链接（4）获取歌曲名称和id信息3、寻找…...
为什么软件测试面试了几个月都没有offer，从HR角度分析
首先，我觉得你在软件测试面试的过程中，逻辑比较混乱的最大一个原因是，说明你没有形成一个一个整体的体系。 导致你说的时候很多东西都杂乱无章。 我个人认为软件测试，其实开始首先进行的是一些需求的分析工作，之后呢…...
DC-7 靶场学习
文章目录信息搜集账号密码获取修改密码反弹shell得到flag信息搜集 首先获取目标ip。 arp-scan -l nmap -sP 192.168.28.0/24得到目标ip为： 192.168.28.139先访问页面。 翻译一下。 欢迎来到 DC-7DC-7引入了一些“新”概念，但我会让你弄清楚它们是什么…...
深入理解JavaScript的事件冒泡与事件捕获
前言JavaScript中提供了很多操作DOM的API。事件冒泡和事件捕获是指浏览器中处理DOM元素上事件的两种不同方式。事件冒泡和事件捕获都是JavaScript事件模型中的一部分，可以用来处理事件。对于这个问题，在实际开发中，并不是非常重要，…...
格密码学习笔记（六）：格中模运算
文章目录格中取模运算CVP和格的陪集致谢格中取模运算 定义（格的基本区域） P⊂Rn:{Px∣x∈L}\mathcal{P} \subset \mathbb{R}^n : \{ \mathcal{P} \bm{x} | \bm{x} \in \mathcal{L} \}P⊂Rn:{Px∣x∈L}是Rn\mathbb{R}^nRn的一种划分。 用P\mathcal{P}P对…...
【C++】非常重要的——多态
凡是面向对象的语言，都有三大特性，继承，封装和多态，但并不是只有这三个特性，是因为者三个特性是最重要的特性，那今天我们一起来看多态！ 目录 1.多态的概念 1.1虚函数 1.2虚函数的重写 1.3虚…...
发票账单很多？python助你批量完成数据提取
每天面对成堆的发票，无论是税务发票还是承兑单据，抑或是其他各类公司数据要从照片、PDF等不同格式的内容中提取，我们都有必要进行快速办公的能力提升。因此，我们的目标要求就十分明显了，首先要从图片中获取数据&#x…...
[闪存2.1] NAND FLASH特性串烧 | 不了解闪存特性，你能用好闪存产品吗？
前言 为了利用好闪存， 发挥闪存的优势， 以达到更好的性能和使用寿命， 那自然要求了解闪存特性。 闪存作为一种相对较新的存储介质， 有很多特别的特性。 一．闪存的特性 凡是采用Flash Memory的存储设备，可以统称为闪存存储。我们经常谈的固态硬盘（SSD），可以由volatile/…...
面试官问我按钮级别权限怎么控制，我说v-if，面试官说再见
最近的面试中有一个面试官问我按钮级别的权限怎么控制，我说直接v-if啊，他说不够好，我说我们项目中按钮级别的权限控制情况不多，所以v-if就够了，他说不够通用，最后他对我的评价是做过很多东西，但…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...
CSS3相关知识点
CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...