【面试题】面试官：如果后端给你 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就够了，他说不够通用，最后他对我的评价是做过很多东西，但…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 （1）使用React Native…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...