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

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

浏览器本身自带性能检测工具,通常我们分析由脚本导致的页面卡顿会选择 性能(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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/24746.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3D Gaussian Splatting for Real-Time Radiance Field Rendering

辐射场方法最近在基于多张照片或视频进行新视角合成方面取得了革命性进展。然而&#xff0c;实现高视觉质量仍然需要耗时且计算成本高的神经网络&#xff0c;而最近的快速方法不可避免地在速度和质量之间进行了权衡。对于无界和完整的场景&#xff08;而不是孤立的物体&#xf…

【Vue】vuex 的使用 - 创建仓库

通用的地方我们一般会称之为仓库 1.安装 vuex 安装vuex与vue-router类似&#xff0c;vuex是一个独立存在的插件&#xff0c;如果脚手架初始化没有选 vuex&#xff0c;就需要额外安装。 yarn add vuex3 或者 npm i vuex32.新建 store/index.js 专门存放 vuex ​ 为了维护项目…

【排序算法】总结篇

✨✨这些 排序算法都是指的 需要进行比较的排序算法 ✨✨下面都是略微讲解一下思路&#xff0c;如果需要详细了解哪一个排序&#xff0c;点击&#x1f449;链接即可 ✨✨对于时间、空间复杂度、稳定性&#xff0c;希望你&#x1f9d1;‍&#x1f393;能够理解记忆&#x1f9d1;…

如何优化Vue组件的性能和通信效率?

优化Vue组件的性能和通信效率涉及多个方面&#xff0c;包括组件的设计、懒加载、条件渲染、事件通信以及避免不必要的重新渲染等。下面是一些实用的优化策略&#xff1a; 组件懒加载&#xff1a; 使用异步组件加载机制&#xff0c;只有在组件需要显示时才去加载该组件。例如&a…

Science刊发!乌普萨拉大学最新神经形态触觉人造皮肤可快速精准识别物体

当前&#xff0c;人形机器人使用的传统电子皮肤在处理触觉感知信息方面的能力并不强&#xff0c;尤其是在时间信息编码和快速特征提取方面存在一定的局限性。简单来说就是机器人无法完成在接触到物品的瞬间&#xff0c;判断用怎样的力度去对该物品做出反应。尽管多模态大模型和…

顶级域名和二级域名的区别

互联网是一个由无数个网络节点组成的复杂系统&#xff0c;而域名则是这个系统中用于识别和定位这些节点的重要工具。在域名体系中&#xff0c;顶级域名(Top-Level Domain&#xff0c;TLD)和二级域名(Second-Level Domain&#xff0c;SLD)是两个基本的层级概念。本文将探讨这两者…

备战 清华大学 上机编程考试-冲刺前50%,倒数第6天

真题训练&#xff1a; T1:舞蹈团 - 排序滑动窗口 生活在在外星球X上的小Z想要找一些小朋友组成一个舞蹈团&#xff0c;于是他在网上发布了信息&#xff0c;一共有 \(n\) 个人报名面试。面试必须按照报名的顺序依次进行。小Z可以选择在面试完若干小朋友以后&#xff0c;在所有…

手搓文件格式转换

最初目标&#xff1a; 自己搞一个免费的pdf文件转换 根据现有的开源jar 项目实现思路&#xff1a; 1. 项目原因a. 我想转换文件b. wps 文件转换 2. 最初的状态a. jar运行的b. main,输入文件路径c. 一定的编程能力的人才能得 3. 开始构思项目a. 网页版本b. 想着大家一起用 4. …

MyBatis二级缓存开启条件

MyBatis缓存为俩层体系。分为一级缓存和二级缓存。 一级缓存&#xff1a; 一级缓存默认开启&#xff0c;一级缓存的作用域是SqlSession级别的&#xff0c;这意味着当你更换SqlSession之后就不能再利用原来的SqlSession的一级缓存了。不同的SqlSession之间的一级缓存是隔离的。…

Django更改超级用户密码

Django更改超级用户密码 1、打开shell 在工程文件目录下敲入&#xff1a; python manage.py shell再在python交互界面输入&#xff1a; from django.contrib.auth.models import User user User.objects.get(username root) user.set_password(123456) user.save()其中ro…

adb 删除文件或文件夹

1. 通过adb shell 进入终端shell 2. cd sdcard/data //进入系统内指定文件夹 3. ls //列表显示当前文件夹内容 4. remount //挂载 5. rm -r xxx // 删除名字为xxx的文件夹及其里面的所有文件 6. rm xxx // 删除文件xxx 7. rm dir xxx // 删除xxx的文件夹 8. cat 123…

递归【2】(组合回溯(生成括号)、子集回溯(背包问题))

括号对 &#xff08;组合型回溯&#xff09; 分解成子问题&#xff0c;每一次添加括号分两步&#xff1a; if左括号小于n&#xff0c;加左括号&#xff0c;然后k(index1), if左括号大于有括号&#xff0c;加右括号&#xff0c;k(index1),然后收尾括号单独考虑&#xff0c;到…

二叉树----7-3 列出叶结点

对于给定的二叉树,本题要求你按从上到下、从左到右的顺序输出其所有叶结点。 输入格式: 首先第一行给出一个正整数 n(≤10),为树中结点总数。树中的结点从 0 到 n−1 编号。随后 n 行,每行给出一个对应结点左右孩子的编号。如果某个孩子不存在,则在对应位置给出 "…

【Ardiuno】实验使用ESP32连接Wifi(图文)

ESP32最为精华和有特色的地方当然是wifi连接&#xff0c;这里我们就写程序实验一下适使用ESP32主板连接wifi&#xff0c;为了简化实验我们这里只做了连接部分&#xff0c;其他实验在后续再继续。 由于本实验只要在串口监视器中查看结果状态即可&#xff0c;因此电路板上无需连…

Transformer模型结构解析:编码器与完整模型的应用场景

Transformer模型结构解析&#xff1a;编码器与完整模型的应用场景 Transformer模型自2017年由Google的研究者提出以来&#xff0c;已经在自然语言处理&#xff08;NLP&#xff09;领域产生了革命性的影响。Transformer模型的核心特点是其使用了自注意力&#xff08;Self-Atten…

ToxVidLLM:一个用于检测有害视频的多模态多任务框架

在一个社交媒体平台赋予用户成为内容创作者力量的时代&#xff0c;数字领域见证了前所未有的信息传播激增&#xff0c;到2023年&#xff0c;近82%的互联网流量是视频内容。因此&#xff0c;像抖音和YouTub这样的平台已经成为主要的信息来源。一个显著的统计数据凸显了这些平台的…

【java并发】知识框架

文章目录 一. 并发基础1.多线程基础2. 线程安全性3. 同步机制4. 线程间通信5. 并发集合 二. java 进阶1. 并发工具类2. 原子操作和 CAS3. 线程池 三、并发架构1. 并发设计模式2. 性能调优与高级主题3. 并发框架与实践4. 线程分析 一. 并发基础 1.多线程基础 学习 Java 中如何…

线段树模板

0、基本模板 0.1单点修改 class Node:def __init__(self,l,r,s):self.llself.rrself.ss def pushup(u,l,r):u.s l.s r.s def build(u,l,r):if lr:tr[u]Node(l,r,a[l])else:mid lr>>1tr[u]Node(l,r,0)build(u<<1,l,mid); build(u<<1|1,mid1,r)pushup(tr[…

发布处理方案 —— 前台项目构建与发布处理

目录 01: 前言 02: 域名、DNS、公网IP、服务器、Nginx之间的关系 03: 阿里云服务器购买指南 04: 服务器连接方式 05: Nginx 环境处理 06: 项目发布 07: 小结 01: 前言 现在我们来看一下项目的打包和发布功能&#xff0c;这两个功能也就是我们本篇文章的主要功能。 对…

大泽动力30KW静音汽油发电机

安全操作&#xff1a; 在使用前&#xff0c;确保发电机放置在通风良好、干燥、无易燃物品的地方。 避免在发电机运行时触摸其热表面或运转部件&#xff0c;以免烫伤或受伤。 遵循发电机的启动和停机程序&#xff0c;不要随意操作。 燃油管理&#xff1a; 使用高质量的汽油&…