javascript - 后台管理系统浏览器内存占用过高，怎么排查？

Question

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

Answer 1

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

1. eventBus
2. 定时器
3. console

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

Answer 2

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

Answer 3

首先，你需要确定内存泄漏的存在。在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开发者或者性能优化专家来帮助你。