【面试题】面试官：如果后端给你 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就够了，他说不够通用，最后他对我的评价是做过很多东西，但…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...