javascript - 诊断 Javascript 泄漏类型

Question

我有一个具有“自动刷新”功能的网页。开启后，每隔一秒就会通过 ajax(称为 page_request)获取一个页面，并用提供的 containerid 替换 div 容器的内容:

document.getElementById(containerid).innerHTML=page_request.responseText;

这在大多数情况下都有效，没问题。

问题出现在page_response中有如下脚本:

<script type=\"text/javascript\">
    $(document).ready(function() {
        dtable = $('#multi-stat-table').dataTable();
    });
</script>

此脚本使用 DataTables jQuery 插件将 ID 为“multi-stat-table”的表转换为可排序的表。该脚本有效，并且我有可排序的表格。但是，如果启用了自动刷新，则会出现内存泄漏，最终会消耗整个堆(缓慢但肯定)。

我可以使用 top 和 chrome 的内存分析器看到这种现象。每一秒，大约 70 KB 的数据被分配，但只有大约 20 KB 被释放。因此，每秒净损失 50 KB 堆内存。我查看了探查器中占用内存的对象，但很难从非描述性数字中找出这些数组和对象实际引用的内容。我一直无法弄清楚如何让垃圾收集器收集这些每秒堆积的未使用对象:

我尝试在每次自动刷新前将 dtable 设置为 null，但无济于事。我也试过调用 dtable.api().clear() 和 dtable.api().destroy()，但泄漏仍然存在。我怎样才能找到这个泄漏，更重要的是，我能做些什么来阻止它？

Answer 1

我能够查明内存泄漏的确切原因。

当我查看 Chrome 的分析器并看到 jQuery 的缓存对象引用了 45 MB 的对象时，我首先想到这可能是一个 jQuery 缓存问题。经过一些研究，这是我阅读的帮助我弄清楚如何修复它的文章:http://javascript.info/tutorial/memory-leaks#jquery-anti-leak-measures-and-leaks

在我这样做之前:document.getElementById(containerid).innerHTML=page_request.responseText;//如果 containerid 中的任何内容稍后被 jQuery 引用，则很危险!

修复后:$("#container").html(page_request.responseText);//html() 取消引用缓存在 containerid 中的未使用对象

self 提醒:混合搭配 jQuery 和非 jQuery DOM 可能很危险