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

前端渲染大量数据思路【虚拟列表】【异步机制】

news 2026/2/8 4:13:23

当浏览器遇到性能瓶颈导致页面卡顿时，你会怎么处理？如何查找问题的原因？

浏览器本身自带性能检测工具，通常我们分析由脚本导致的页面卡顿会选择 性能（performance） 选项卡，在其中我们可以找到导致页面卡顿的函数，另外通过观察我们可以看到脚本的执行时间占比以及页面卡顿的程度。

image.png

此外还有 内存 选项卡，可以截取当前页面的内存快照，由于我们的页面通常不像服务器那样一直运行，所以平常我们也不会过于关注页面的内存使用问题。

1. 渲染大量数据

由于要渲染大量数据，我们刚开始学习前端时，如果经验不足就会简单地将所有数据全部一次性地渲染到页面上，这样势必会造成页面的卡顿。所以这种方法我这里也不会去介绍。

下面直接进入正轨，首先提出一个问题引发思考：如果让你去实现，你会怎么实现？

1.1. 采用异步

我首先是想到如果要渲染大量数据，我们可以将这一个巨大的任务拆分成一个个的小任务来执行，将这一个个的小任务加入到任务队列当中采用异步的方式来慢慢地执行。

不过这个会有个缺陷，由于这么多数据是按照顺序来依次执行的，所以当用户想查看比较靠后的数据时，用户会发现数据一直在加载中、一直在渲染，然后用户等啊等，最后点击关闭标签页。

下面是一个简单的使用异步实现的逻辑（只包含部分代码）：

const ul = document.querySelector('ul');let total = 100_000_000;
let count = 0;function loop() {const fragment = document.createDocumentFragment();for (let i = 0; i < 20 && count < total; i++, count++) {const li = document.createElement("li");li.textContent = count;fragment.appendChild(li);}ul.appendChild(fragment);window.requestAnimationFrame(loop);
}loop();

观察上面的代码，其中使用到了 requestAnimationFrame 函数，它接收一个函数作为参数，这个函数会在浏览器每一帧渲染结束之后执行。

为什么不使用 setTimeout 定时器，因为 setTimeout 函数无法控制函数的执行时机，我们只知道函数会被加入到任务队列，但并不知道函数会在何时执行，而 requestAnimationFrame 函数则固定在每一帧渲染之后执行，这样就不会在视觉上让用户感觉页面卡顿。

当然如果 requestAnimationFrame 的函数执行时间过长，会推迟下一帧的渲染，所以尽量不要将耗时任务放在其中。

1.2. 虚拟列表

虚拟列表采用的思想类似于懒加载，都是只加载用户看得见的数据，懒加载在计算机上随处可见，比如单例模式中的饿汉式、图片的懒加载等，在我们常用的 QQ 中，像消息列表，联系人列表他也采用了类似于虚拟列表的形式进行渲染，以减少内存的使用量。

因为这里我们要处理大量数据的渲染，如果要求所有的数据必须全部渲染在可视区当中，那么懒加载就派不上用场了。

虚拟列表主要由可视区的数据构成，其他的位置都是空白。我们可以通过 padding 或者是 top/left 来制造空白。如下图所示（图片来自这篇文章 面试官：如何一次性渲染十万条数据 - 掘金 (juejin.cn)），可视区展示我们想看见的数据，缓存区就是我说的空白。

面试官：如何一次性渲染十万条数据.png

实现的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.scroll-box {height: 100vh;overflow-y: scroll;}</style>
</head>
<body><div class="scroll-box"><ul></ul></div><script src="./test.js"></script>
</body>
</html>

对应的 test.js：


const ul = document.querySelector('ul');
const scrollBox = document.querySelector('.scroll-box');let total = 100_000_000;
let count = 0;
let liHeight = 20;
// 要展示的数据量
let showCount = scrollBox.clientHeight / liHeight >> 0;let totalHeight = total * liHeight;function generateLi() {// 计算出来的处于可视区顶部的数据索引let index = (scrollBox.scrollTop / liHeight) >> 0;const fragment = document.createDocumentFragment();// 制造空白ul.style.paddingTop = `${index * liHeight}px`;ul.style.paddingBottom = `${(totalHeight - (index + 20) * liHeight)}px`;// 生成可视区数据for (let i = 0; i < showCount; i++) {const li = document.createElement("li");li.textContent = `${index + i}`;fragment.appendChild(li);}// 重新设置元素，这里元素并没有考虑复用ul.innerHTML = "";ul.appendChild(fragment);
}generateLi();scrollBox.addEventListener("scroll", generateLi);

多嘴一句，当前元素可以滚动才有 scrollTop 值，否则一直为 0。比如当前元素固定了高度，但是它的子元素的高度超出了它的高度，就会导致溢出，这是我们可以设置 overflow-y: auto，当前元素就会有滚动条。

而 scrollTop 就是当前元素的顶部与它的子元素的顶部的距离，没有负值。

2. 参考

参考文献：

  • 面试官：如何一次性渲染十万条数据 - 掘金 (juejin.cn)

相关文章：

前端渲染大量数据思路【虚拟列表】【异步机制】

当浏览器遇到性能瓶颈导致页面卡顿时&#xff0c;你会怎么处理&#xff1f;如何查找问题的原因&#xff1f; 浏览器本身自带性能检测工具&#xff0c;通常我们分析由脚本导致的页面卡顿会选择 性能&#xff08;performance&#xff09; 选项卡&#xff0c;在其中我们可以找到导…...

编程日记 2024/6/12 1:52:38

Ubuntu24.04记录网易邮箱大师的安装

邮箱大师下载 官网自行下载&#xff0c;下载后文件名“mail.deb" https://dashi.163.com/ 安装发现缺少依赖 #mermaid-svg-8wqpqFSBVOPD7NGP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8wqpqFSBVOPD7NGP …...

编程日记 2024/6/12 1:51:36

PDF编辑与转换的终极工具智能PDF处理Acrobat Pro DC

Acrobat Pro DC 2023是一款功能全面的PDF编辑管理软件&#xff0c;支持创建、编辑、转换、签署和共享PDF文件。它具备OCR技术&#xff0c;可将扫描文档转换为可编辑文本&#xff0c;同时提供智能PDF处理技术&#xff0c;确保文件完整性和可读性。此外&#xff0c;软件还支持电子…...

编程日记 2024/6/12 1:50:36

Django UpdateView视图

UpdateView是Django中的一个通用视图&#xff0c;用于处理对象的更新操作。它允许用户更新一个已经存在的对象。UpdateView通常与一个模型表单一起使用&#xff0c;这样用户就可以看到当前对象的值&#xff0c;并可以修改它们。 1&#xff0c;添加视图 Test/app3/views.py fr…...

编程日记 2024/6/12 1:47:33

【CS.SE】2024年，你应该选择计算机专业吗？详细分析与未来展望

文章目录 1. 引言1.1 背景介绍 2. 计算机相关专业的现状与挑战2. 计算机相关专业的现状与挑战2.1 行业内的就业趋势2.1.1 现有就业数据2.1.2 行业需求变化 2.2 市场饱和度与竞争2.2.1 毕业生数量增长2.2.2 薪资与职业发展 2.3 技术创新与行业发展2.3.1 新兴技术的发展2.3.2 全球…...

编程日记 2024/6/12 1:46:32

后端开发面经系列 -- 华为OD -- C++面经（全）

华为OD – C面经&#xff08;全&#xff09; 公众号&#xff1a;阿Q技术站 文章目录 华为OD -- C面经&#xff08;全&#xff09;一面1、C结构体和类的区别&#xff0c;类默认的访问权限&#xff0c;结构体可以定义成员函数吗&#xff1f;2、多态的意义&#xff1f;多态的意义…...

编程日记 2024/6/12 1:45:31

3072. 将元素分配到两个数组中 II Rust 线段树 + 离散化

题目 给你一个下标从 1 开始、长度为 n 的整数数组 nums 。 现定义函数 greaterCount &#xff0c;使得 greaterCount(arr, val) 返回数组 arr 中 严格大于 val 的元素数量。 你需要使用 n 次操作&#xff0c;将 nums 的所有元素分配到两个数组 arr1 和 arr2 中。在第一次操…...

编程日记 2024/6/12 1:43:29

day35|1005.K次取反后最大化的数组和 134. 加油站135. 分发糖果

文章目录 python语法记录 sort格式 1005.K次取反后最大化的数组和思路方法一方法二 按照绝对值排序 教程&#x1f388;✨ 背住 按照绝对值进行降序排序的语法是&#xff1a; 134. 加油站思路方法一 教程解法方法二 暴力求解 135. 分发糖果思路方法一 总结 python语法记录 sort …...

编程日记 2024/6/12 1:42:28

HWA和BSS区别

芯片中的HWA&#xff08;Hardware Accelerator&#xff09;模块功能主要是为了加速雷达信号处理的特定任务。HWA模块在雷达系统中起到关键作用&#xff0c;以下是其主要功能和作用&#xff1a; 信号预处理&#xff1a; 滤波&#xff1a;对接收到的雷达信号进行滤波&#xff0c;…...

编程日记 2024/6/12 1:40:26

【Excel】Excel中将日期格式转换为文本格式，并按日期显示。

【问题需求】 在使用excel进行数据导入的过程中&#xff0c; 有的软件要求日期列必须是文本格式。 但是直接将日期列的格式改为文本后&#xff0c;显示一串数字&#xff0c;而不按日期显示。 进而无法导入使用。 【解决方法】 使用【TXET】函数公式进行处理&#xff0c; 在单…...

编程日记 2024/6/12 1:39:25

物联网学习小记

https://www.cnblogs.com/senior-engineer/p/10045658.html GOSP: 提供类似Qt的API接口&#xff0c;仅需要几百KB的硬件资源&#xff08;比Qt小的多&#xff09;&#xff0c;能运行在Qt不支持的低配置硬件上&#xff08;对Qt生态形成补充&#xff09;&#xff0c;适用于嵌入式…...

编程日记 2024/6/12 1:38:24

代码随想录-Day29

491. 非递减子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以视作递增序列的一种特殊情…...

编程日记 2024/6/12 1:36:23

C/C++ 进阶（6）红黑树

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 目录 一、概念 性质 二、操作 插入 情况一&#xff1a;cur为红、p为红、g为黑&#xff0c;如果u存在且为红 步骤&#xff1a; 情况二&#xff1a;cur为红、p为红、g为黑&#xff0c;如果u不存在或…...

编程日记 2024/6/12 1:34:21

【Vue】构建vuex-cart模块

说明&#xff1a;既然明确数据要存 vuex&#xff0c;建议分模块存&#xff0c;购物车数据存 cart 模块&#xff0c;将来还会有 user 模块&#xff0c;article 模块… 新建 store/modules/cart.js 挂载到 vuex 仓库上 store/cart.js import Vue from vue import Vuex from vu…...

编程日记 2024/6/12 1:33:20

如何成为嵌入式系统工程师？

各位朋友&#xff0c;如果你们有意向投身于嵌入式开发领域&#xff0c;那么强烈建议你们在软件和硬件两个方面均展开深入且全面的学习。 嵌入式计算机作为嵌入式系统的核心技术支撑&#xff0c;其是直接面向用户、产品以及应用的&#xff0c;无论是软件还是硬件方面都能发挥重要…...

编程日记 2024/6/12 1:32:19

【AI大模型】Transformers大模型库（七）：单机多卡推理之device_map

目录​​​​​​​ 一、引言 二、单机多卡推理之device_map 2.1 概述 2.2 自动配置&#xff0c;如device_map"auto" 2.3 手动配置&#xff0c;如device_map"cuda:1" 三、总结 一、引言 这里的Transformers指的是huggingface开发的大模型库&#x…...

编程日记 2024/6/12 1:29:15

驱动代码编写（一）

驱动程序的作用 驱动程序是指与硬件设备和操作系统进行通信的软件。它的主要功能有以下几个方面&#xff1a; 提供硬件支持&#xff1a;驱动程序允许操作系统与硬件设备进行通信&#xff0c;以便正确地操作和控制硬件设备。它可以向操作系统提供有关硬件设备的各种信息&#x…...

编程日记 2024/6/12 1:28:14

Prompt-to-Prompt Image Editing with Cross Attention Control

Prompt-to-Prompt Image Editing with Cross Attention Control (P2P) Amir Hertz, Tel Aviv University, ICLR23, Paper, Code 1. 前言 编辑对这些生成模型来说是具有挑战性的&#xff0c;因为编辑技术的一个固有特性是保留大部分原始图像&#xff0c;而在基于文本的模型中…...

编程日记 2024/6/12 1:27:13

实验11 OSPF协议配置

实验11 OSPF协议配置 一、OSPF单区域配置&#xff08;一&#xff09;原理描述&#xff08;二&#xff09;实验目的&#xff08;三&#xff09;实验内容&#xff08;四&#xff09;实验配置&#xff08;五&#xff09;实验步骤 二、OSPF多区域配置&#xff08;一&#xff09;原理…...

编程日记 2024/6/12 1:25:11

ChatGPT-4o, 腾讯元宝，通义千问对比测试中文文化

国内的大模型应用我选择了国内综合实力最强的两个&#xff0c;一个是腾讯元宝&#xff0c;一个是通义千问。其它的豆包&#xff0c;Kimi&#xff0c;文心一言等在某些领域也有强于竞品的表现。 问一个中文文化比较基础的问题,我满以为中文文化chatGPT不如国内的大模型。可事实…...

编程日记 2024/6/12 1:24:10

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/4 16:43:14

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2026/2/3 7:43:45

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/27 16:43:24

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2026/2/6 21:43:26

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2026/1/26 8:42:13

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46