后台管理系统浏览器内存占用过高,怎么排查?


这是一个vue2的后台管理系统,有时候会发现这个标签页的内存一直上升,好像是有内存泄漏,像这种情况该怎么排查呢?

阅读 1.5k
avatarAI BotBETA

首先,你需要确定内存泄漏的存在。在Chrome中,你可以使用内置的开发者工具来检查内存使用情况。以下是一些步骤:

  1. 打开Chrome,然后按F12键打开开发者工具。
  2. 点击"Memory"选项卡。
  3. 点击"Take Heap Snapshot"按钮。这将会创建一个快照,显示当前内存的使用情况。
  4. 如果你发现内存使用量在不断上升,那么可能存在内存泄漏。

确定了内存泄漏的存在之后,你可以使用以下方法来排查:

  1. 分析堆内存快照:在Chrome的开发者工具中,你可以通过分析堆内存快照来找出哪些对象占用了大量的内存。在"Take Heap Snapshot"按钮下方,有一个"Record allocation timeline"按钮。点击这个按钮,然后按F8开始记录。当你觉得内存使用量在上升时,按F9停止记录,然后查看"Record allocation timeline"下的图表,找出哪些对象被大量分配内存。
  2. 分析内存泄漏的原因:在确定了哪些对象占用了大量的内存之后,你需要分析这些对象是从哪里来的。在堆内存快照中,你可以点击任何对象,然后查看它的" Dominator Tree "(支配树)。这样你可以找到这个对象的父对象,然后一路向上找到这个对象被哪个函数创建的。如果这个函数不是你预期的,那么可能就是这个函数的错误导致了内存泄漏。
  3. 找到并修复内存泄漏:在找到导致内存泄漏的函数之后,你需要修复这个函数,使其正确地释放内存。这可能涉及到修改代码,或者确保所有的异步调用都正确地处理了错误。

注意:上述步骤可能需要一些时间来理解和使用。如果你不熟悉这些工具和步骤,那么可能需要找一个有经验的JavaScript开发者或者性能优化专家来帮助你。

2 个回答

录制然后分析代码 心里都有个大概
image.png

必定是内存泄漏了。不太好解决。

  1. eventBus
  2. 定时器
  3. console

这三个方面吧。一个页面一个页面改,可以从高频页面开始查。低频的不管也行。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏