严重的内存泄漏问题 about vue-router-tab HOT 3 CLOSED

特意了解了一下 Chrome 官方的开发工具文档，按以下步骤记录快照

1. 根据 “问题重现” 中的步骤：
   1. 打开官方 Demo 页面
   2. 刷新 10 次 “页面1”
   3. 打开 “页面2” 至 “页面10” 的 9 个页签
   4. 右键 “页面1” 点击 “关闭其他”，关掉其他页签
2. 打开 Chrome 开发者工具的 Memory 页签，点击 Take Heap Snapshot 生成 HEAP SNAPSHOTS 快照，此时为 Snapshot 1
3. 打开 “页面2” ，重新生成快照 Snapshot 2
4. 分别在 Snapshot 1 和 Snapshot 2 的 Class filter 文本框中键入 Detached，搜索已分离的 DOM 树。

首次进入页面

Performance monitor 记录值：

完成“问题重现” 中的步骤

Performance monitor 记录值：

发现有大量 DOM Nodes 改动，JS heap size 也增加了不少

Snapshot 1 Detached 过滤结果 (单个页签)

Performance monitor 记录值：

如下图所示，过滤结果中未找到已分离的 Dom，DOM Nodes数量相对首次进入也没太大改变

Snapshot 2 Detached 过滤结果 (两个页签)

Performance monitor 记录值：

如下图所示，过滤结果中可找到已分离的 Dom，DOM Nodes数量相对单个页签增加了 115。

分析原因，“页面1” 的 DOM 节点因为页签隐藏，并未出现在 document 内，所以情况是也是符合预期的

分析：

在点击 Take Heap Snapshot 生成快照之前，Performance monitor 中的 DOM Nodes 值确实会出现随着操作越来越多的情况，生成快照后，DOM Nodes 就恢复正常了。

按个人理解，开发工具生成快照前会执行强制回收内存，如果回收后还发现有不在页面内的 Dom Nodes，说明这些节点是被其他变量引用的。如果真的出现内存泄漏，在这里应该也是可以看到的。

Chrome 强制回收按钮

因为浏览器的内存回收也是会占用系统资源的，所以浏览器会按一定的规则，在需要的时候才开启。js 好像也没办法直接控制强制回收。

我们这里看到 Performance monitor 数据越来越大，可能只是还没触发浏览器自动回收内存的阈值。如果从快照里面发现大量异常的已分离 DOM 节点，才能说明是有 DOM 内存泄漏。

多页签页面，相对于普通的单页面，由于需要同时保存多个页面状态，肯定是会占用更多的资源。后续 Router Tab 可能会添加配置来限制页签数量，以减少类似的性能问题。

建议你也参考 Chrome 开发工具官方的文档来分析一下，定位问题的根因。

参考 Tools for Web Developers - 解决内存问题 - 使用堆快照发现已分离_dom_树的内存泄漏

以上观点，或有谬误，也欢迎讨论指正

from vue-router-tab.

特意了解了一下 Chrome 官方的开发工具文档，按以下步骤记录快照

1. 根据 “问题重现” 中的步骤：

   1. 打开官方 Demo 页面
   2. 刷新 10 次 “页面1”
   3. 打开 “页面2” 至 “页面10” 的 9 个页签
   4. 右键 “页面1” 点击 “关闭其他”，关掉其他页签

2. 打开 Chrome 开发者工具的 Memory 页签，点击 Take Heap Snapshot 生成 HEAP SNAPSHOTS 快照，此时为 Snapshot 1

3. 打开 “页面2” ，重新生成快照 Snapshot 2

4. 分别在 Snapshot 1 和 Snapshot 2 的 Class filter 文本框中键入 Detached，搜索已分离的 DOM 树。

首次进入页面

Performance monitor 记录值：

属性 值
JS heap size 9.7 MB
DOM Nodes 235

完成“问题重现” 中的步骤

Performance monitor 记录值：

属性 值
JS heap size 13.9 MB
DOM Nodes 1234
发现有大量 DOM Nodes 改动，JS heap size 也增加了不少

Snapshot 1 Detached 过滤结果 (单个页签)

Performance monitor 记录值：

属性 值
JS heap size 10.2 MB
DOM Nodes 216
如下图所示，过滤结果中未找到已分离的 Dom，DOM Nodes数量相对首次进入也没太大改变

Snapshot 2 Detached 过滤结果 (两个页签)

Performance monitor 记录值：

属性 值
JS heap size 10.2 MB
DOM Nodes 331
如下图所示，过滤结果中可找到已分离的 Dom，DOM Nodes数量相对单个页签增加了 115。

分析原因，“页面1” 的 DOM 节点因为页签隐藏，并未出现在 document 内，所以情况是也是符合预期的

分析：

在点击 Take Heap Snapshot 生成快照之前，Performance monitor 中的 DOM Nodes 值确实会出现随着操作越来越多的情况，生成快照后，DOM Nodes 就恢复正常了。

按个人理解，开发工具生成快照前会执行强制回收内存，如果回收后还发现有不在页面内的 Dom Nodes，说明这些节点是被其他变量引用的。如果真的出现内存泄漏，在这里应该也是可以看到的。

Chrome 强制回收按钮

因为浏览器的内存回收也是会占用系统资源的，所以浏览器会按一定的规则，在需要的时候才开启。js 好像也没办法直接控制强制回收。

我们这里看到 Performance monitor 数据越来越大，可能只是还没触发浏览器自动回收内存的阈值。如果从快照里面发现大量异常的已分离 DOM 节点，才能说明是有 DOM 内存泄漏。

多页签页面，相对于普通的单页面，由于需要同时保存多个页面状态，肯定是会占用更多的资源。后续 Router Tab 可能会添加配置来限制页签数量，以减少类似的性能问题。

建议你也参考 Chrome 开发工具官方的文档来分析一下，定位问题的根因。

参考 Tools for Web Developers - 解决内存问题 - 使用堆快照发现已分离_dom_树的内存泄漏

以上观点，或有谬误，也欢迎讨论指正

感谢耐心的分析和回复，我会进行后续测试

from vue-router-tab.

RoutertTab v0.2.1 版本，在组件销毁后添加了缓存清理动作，可以更新看看是否有所改善

from vue-router-tab.