【面试题】面试官：如果后端给你 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就够了，他说不够通用，最后他对我的评价是做过很多东西，但…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...