前端内存优化 - 四万条数据导致页面崩溃的问题

前端内存优化 - 四万条数据导致页面崩溃的问题

项目中有个页面,表格数据很多,用了handsontable来展示,这个表格通过虚拟滚动来呈现大数据,当数据来到4万条时,后端加载时间很长,

但耐心等等总会加载出来,但是等着等着,前端却爆了个内存溢出,页面崩溃!

既然知道了是内存溢出,首先了解下怎么看页面的内存占用情况

参考:前端内存优化知多少?内存泄露只是冰山一角

demo代码

html 复制代码
<!--index.html-->  
<div>  
<button onclick="load(10 * 10000)">切换10万条数据</button>  
<button onclick="load(50 * 10000)">切换50万条数据</button>  
</div>  
<script src="./main.js"></script>  
js 复制代码
// main.js  
function load(num) {  
class Jane {}  
class Tom {  
constructor () { this.jane = new Jane();}  
}  
let list = Array(num).fill('').map(() => new Tom())  
window.globalList = [list]  
}  

chrome控制台 - 内存选项卡使用说明

打开控制台,切换到内存选项卡

一上来就根蓝线,这就是页面初始化占用的内存,不过一般你打开控制台是录制不到这个初始化内存占用的,看下一张图教你如何录制初始化内存占用

如何录制初始化内存占用

10万数据内存占用3.3M,加上初始化的11.5, 总的约等于15M

50万数据内存占用

灰色线表示内存回收

得到快照,然后分析具体变量的内存占用

计算10万数据的3.3M内存是哪些变量占用的

内存tab页中的虚拟机实例所占数据介绍

刷新页面说明

多次刷新页面会导致占用内存不停的增加,按常理不是应该变回初始值吗,也许回收比较慢,但是等了很久依然内存占用依然没有降下去。所以要刷新页面重新录制内存占用,还是用前面说的那个方法,用自带管理器杀进程,再刷新页面

项目4万数据,内存溢出分析

我的电脑比较强大,4万数据勉强加载了出来,打开内存tab页一看,内存占用2个多G,然后通过内存快照分析具体哪个变量占用的内存较大(2G内存用快照的话,页面直接崩溃,用的较小数据调试的),

因为项目使用的vue2,打开快照后基本看不懂哪个变量占用内存大,全是一些vue内部变量,且嵌套层数相当深,根本看不懂哪个变量内存占用大。遂放弃快照分析。

经过一通代码分析,得出的结论是,原始数据经过了多次深克隆,被保存了多份,导致内存爆满,至于为何多次深克隆?只能说写代码时我会管这么多吗。

解决方案:把深克隆的地方都去除了,再修修bug,内存占用变成了1.2G

后续优化:如果能不把数据变成vue2的响应式对象,会不会内存占用变的更小?对于有大数据的页面,原来不仅要考虑展示问题,还尼玛有内存问题,世界太难了。

相关推荐
努力写代码的熊大1 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER1 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh2 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒2 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端
今天没有盐3 小时前
💕CSS 基础入门指南💕:选择器与文本样式
前端·html·响应式设计
云枫晖3 小时前
Webpack系列-Entry入口
前端·webpack
mustfeng3 小时前
VCS & Verdi 2023安装
java·服务器·前端
Mintopia4 小时前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙4 小时前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户433845375694 小时前
Promise深度解析,以及简易版的手写实现
前端