前端大量数据渲染优化【例如：10-100万的DIV元素渲染】 (三种解决方法--待完善)

已于 2024-08-23 15:55:18 修改
阅读量302 收藏 5
点赞数 3
分类专栏： JavaScript 文章标签： 前端
于 2024-08-23 15:55:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46022934/article/details/141387129
版权

处理10-100万的DOM元素渲染

其实早就听说过类似的问题(基本上我觉得大部分的开发不会遇到类似的问题,因为多数的人都遇不到这种批量渲染的场景!!!)

在这里插入图片描述

文章目录

吐槽+思考

1.吐槽 :

提示：下面是我的思考方向和现在的一些实践方案

其实写出来的基本都是有一定成效的,要不然也不会发出来,啊哈哈哈哈哈
遇到这种问题的时候,大多数人张嘴就是使用虚拟列表来处理啊
此时我听到上面那句话后的心里就是下面这张图

在这里插入图片描述

其实第一次听到一次渲染10-100万数据,你有什么方案，我也有一点懵B。
(什么场景会遇到一次性渲染这么多元素,硬要渲染这么多数据那出方案的人不就是傻××)

2.方案 :(思考内容+实践方向)

  1. 尝试一次性渲染 10万条数据 浏览器 :不会写代码就别写
  1. 尝试借助浏览器的虚拟DOM模块进行批量DOM的拆分 (会阻塞主线程)
  1. 借助浏览器的多线程(Worker) 进行DOM的分段插入 (小有成就)
  1. 借助动画渲染渲染函数(RAF),进行DOM的渲染 (数据量小还可以,一旦数据量增大,内存使用率变的太高了)

3.思考:(下面性能图分别对应的是那种方案)

在这里插入图片描述

一、模拟原始的创建DOM的操作(10万-50万)

1. 直接渲染大量DOM,代码如下

HTML结构如下:

<body>
    <div class="content">
        <div class="btnText">1231313</div>
        <button>可以操作页面吗</button>
    </div>
</body>

JavaScript代码如下:

 	const num = 500000 // 50万
    const bodyDom = document.querySelector(".content")
    const btn = document.querySelector('button')
    // 下面是直接诶插入到body中
	for (let index = 0; index < num; index++) {
	        const element1 = document.createElement("div")
	        element1.innerText=index
	        bodyDom.appendChild(element1)
	       
	 }

2. 如下图: Chrome崩溃了(50万个div插入)

如果你要一个一个渲染50万个div,浏览器估计是下面这个心理状态: 会不会开发啊!!!!!
在这里插入图片描述

浏览器崩了(刚开始还是很倔强的,能渲染,刷新几次就废了)

在这里插入图片描述

还给你搞出来一些额外的Buff

在这里插入图片描述

二、

1.引入库

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.读入数据

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

满脑子技术的前端工程师
关注
专栏目录
前端面试的话术集锦第 7 篇：高频考点（浏览器渲染原理 & 安全防范）
念兮为美
09-07 868
前端面试的话术集锦第 7 篇：高频考点（浏览器渲染原理 & 安全防范）。浏览器渲染原理；渲染过程；浏览器接收到HTML⽂件并转换为DOM树；将CSS⽂件转换为CSSOM树；⽣成渲染树；为什么操作DOM慢；插⼊⼏万个DOM，如何实现⻚⾯不卡顿？什么情况阻塞渲染；重绘（Repaint）和回流（Reflow）；减少重绘和回流；安全防范；什么是XSS攻击？如何防范XSS攻击？什么是CSP？转义字符；CSP；什么是 CSRF 攻击？如何防范 CSRF 攻击；什么是点击劫持？如何防范点击劫持？
前端优化之分分钟学会渲染百万条数据不卡顿
w199809w的博客
03-12 1236
百万级列表渲染，好了，先就哔哔这么多，一起来学习学习。直接上代码，过程都写在注释里了html复制代码。
js 处理十万条数据_「中高级前端」高性能渲染十万条数据
weixin_39551611的博客
12-03 457
前言在实际工作中，我们很少会遇到一次性需要向页面中插入数十万条数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。最粗暴的做法(一次性渲染)我们对十万条记录进行循环操作，JS的运行时间为187ms，还是蛮快的，但是最终渲染完成后的总时间确是2844ms。简单说明一下，为何两次console.log的结果时间差异巨大...
深度剖析：前端如何驾驭海量数据，实现流畅渲染的多种途径
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
07-01 2376
处理大量数据的渲染对于前端开发来说是一项挑战，但也是提升网页性能和用户体验的重要环节。要有效解决这一问题，可以采用虚拟滚动（Virtual Scrolling）、分批渲染（Incremental Rendering）、使用Web Workers处理数据、利用前端分页（Pagination）、借助服务端渲染（SSR）来优化大量数据的处理。其中，虚拟滚动是一种非常有效的技术，它通过只渲染用户可见的列表项来极大减少DOM操作和提高性能。这种方式不仅提升了滚动的流畅度，也减轻了浏览器的负担，尤其适用于长列表数据的展
如果有10万或100万条数量庞大的数据, 你怎么渲染到页面
hmxs_hmbb的博客
06-24 1236
面试官: 如果有10万条数据, 你怎么去渲染?
js大数据渲染总结
hello917的博客
12-16 2075
十万条大数据渲染优化 window.onload = () => { let now = Date.now(); let ulDom = document.querySelector('ul') let data = 100000 for(var i=0;i<data;i++){ let li = document.createElement('li') li.innerHTML = `我是第${i}个子节点` ul
vue多数据前端渲染优化
LiuXiaodong2020的博客
10-20 2117
vue多数据前端渲染优化 使用vue3进行编写的列表渲染优化,主要思想为:为避免在拿到超大数据时前端渲染慢,在拿到数据时根据需求控制可以渲染的数据条数,根据空白div占位,计算当前应该渲染的数据,只对当前应该展示的数据进行渲染 css #app .context { width: 300px; border: 1px solid gray; overflow: hidden; margin:
高性能渲染十万条数据：时间分片、虚拟列表、懒加载
qq_38110274的博客
10-26 865
对于大量数据的渲染，可以采用时间分片和虚拟列表和懒加载的处理方式。
前端必修技能：高手进阶核心知识分享 - 三万字帮你搞定CSS动画(形变动画、过渡动画、关键帧动画）
最新发布
uu0216的博客
07-11 2326
transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。注意： 使用此属性必须先使用transform属性。transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
el-select远程查询大数据量分段加载
wusq的博客
09-02 2811
el-select远程查询大数据量分段加载 1.问题： 最近使用elementUI的el-select组件的远程查询功能，发现在大量数据（1w条以上）的时候出现页面卡死的情况，经过排查，产生问题的原因是前端渲染造成的。 2.解决思路 1.在查找解决方案的时候看到一个解决办法是加载前50条，效果是这样的： 2.按照这个思路，想到了 ...
前端优化之渲染百万条数据不卡顿
qq_44161703的博客
04-29 1593
前端优化之渲染百万条数据不卡顿
JavaScript 万条数据渲染优化方案
潘秋娜的博客
06-23 831
面试题
如何定位解决前端大数据量渲染下的性能问题
梅花寺
11-15 2303
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。 要求)* `fulfilled`部分是将`_next`生成的marker和popup组件添加到地图中，因为是使用dom渲染，在添加地图后，涉及到marker和popup的html解析及渲染过程。
前端页面如何正确渲染大量数据
热门推荐
ZC
06-27 1万+
当前端开发人员面对成千上万条记录要显示的时候，我们该怎么处理？ 关键点：不卡顿，交互流畅 代码 setTimeout(() => { // 插入十万条数据 const total = 100000 // 一次插入 * 条，如果觉得性能不好就减少 const once = 200 // 渲染数据总共需要几次 ...
JS前端渲染大批量数据
Fly的博客
09-11 9137
前端渲染大批量数据 这里会提出三种方法 <ul></ul> 1.最简单的 const number = 99999; let ul = document.querySelector("ul"); for (var i = 0; i < total; i++) { let li = document.createElement('li'); ...
JavaScript如何一次性展示几万条数据
diebianyi1454的博客
03-29 1683
有一位同事跟大家说他在网上看到一道面试题：“如果后台传给前端几万条数据，前端怎么渲染到页面上？”，如何回答？ 于是办公室沸腾了， 同事们讨论开了， 你一言我一语说出自己的方案。 有的说直接循环遍历生成html插到页面上；有的说应该用分页来处理；还有的说这个面试官是个白痴， 哪有后台传几万条数据给前端这种情况的；我仔细思考了一下，先不论后端到底会不会白痴到传几万条数据给前端，假如真碰到这种...
页面渲染大量数据的性能优化（时间分片）
weixin_42112865的博客
09-18 4719
前言 我们在实际的工作中经常会遇到在一个页面插入几千甚至上万条数据。显然如果同时渲染上万条数据，页面肯定会卡住，这时候就需要我们对性能进行优化。 对于一次性插入大量数据，一般有两种做法： 1.时间分片 2.虚拟列表 本次我要介绍的是使用时间分片的方法去优化性能。 现在以在一个页面插入10000条数据为例 <!DOCTYPE html> <html lang="en"> &...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

满脑子技术的前端工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值