单页应用程序 - 内存泄漏解释

Question

所以，我正在研究 SPA，我知道有很多 FrameWorks 可以帮助构建一个。但是让我们在这里假设我只使用 jQuery.

好的，所以在一个页面中，我创建了一个 table 显示用户联系人，来自 Ajax 电话：

getContacts('', function(contactsObj)
    {
        contactsObj.forEach(function(contact)
        {
            $('#contactList > tbody').append('<tr>' +
                                                '<td class="check-mail">' +
                                                    '<input type="checkbox" class="i-checks" id="1">' + 
                                                '</td>' +
                                                '<td>' + escapeHTML(contact.name) + '</td>' +
                                                '<td>' + escapeHTML(contact.email) + '</td>');
        })  

        $('.i-checks').iCheck(
        {
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });
    });

此代码真实有效。让我担心的是 iCheck（用于样式化复选框），在 table 上添加行后，我启动 iCheck 使其工作。所以，当用户离开这个页面时（没有重新加载任何东西，这是一个单页应用程序，记得吗？），这个 iCheck 将变成 'ghost'...我知道对于事件，我可以调用 off() 方法删除所有之前绑定的事件（这样可以避免内存泄漏？），但是对于我在这里讲的这种启动，这也会是内存泄漏吗？

Answer 1

在这种特定情况下，iCheck 有一个 'destroy' 方法，它 'removes all traces of iCheck'（参见 the iCheck docs）。如果您在该用户导航离开相关视图时调用此方法（在 DOM 被修改之前），则应该没有内存泄漏。

否则几乎肯定会有 'hanging' 事件处理程序在页面转换后留在内存中，尽管如评论中所述，它们的总内存使用量可能可以忽略不计。

单页应用程序 - 内存泄漏解释

Single Page App - memory leak explanation

javascript

jquery

memory-leaks