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

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

项目中有个页面,表格数据很多,用了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的响应式对象,会不会内存占用变的更小?对于有大数据的页面,原来不仅要考虑展示问题,还尼玛有内存问题,世界太难了。

相关推荐
徐小夕3 分钟前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端
岁月向前1 小时前
小组件获取主App数据的几种方案
前端
用户47949283569151 小时前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
恒创科技HK1 小时前
香港服务器速度快慢受何影响?
运维·服务器·前端
bubiyoushang8882 小时前
MATLAB实现直流电法和大地电磁法的一维正演计算
前端·javascript·matlab
Mintopia2 小时前
🧠 AIGC模型的增量训练技术:Web应用如何低成本迭代能力?
前端·javascript·aigc
Mintopia2 小时前
🧩 Next.js在国内环境的登录机制设计:科学、务实、又带点“国风味”的安全艺术
前端·javascript·全栈
qq. 28040339842 小时前
react hooks
前端·javascript·react.js
LHX sir3 小时前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web
Gazer_S3 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js