Question

我正在使用$('#...').empty().append(html) - 类似构造来更新有关AJAX成功的内容。在5-6个请求之后，每个请求的整个页面变得越来越慢（：hover需要更多时间出现，JS减速等等）。这在任何浏览器中都会发生加载的内容越多，发生的减速就越快。

我想我在某处遗漏了一些清理工作。有什么建议吗？

代码：

query = function (uri, data) {
    $.ajax({
        url: uri,
        cache: false,   
        data: data,
        success: processResponse,
        method: data?'POST':'GET',
    });
    return false;
}

processResponse = function (data) {
    $('#rightplaceholder').empty();
    $('#rightplaceholder').append(data);
}

$('#button').click( function () { query('/foo'); } );

我也尝试禁用所有与加载此片段无直接关系的JS - 没有运气。

Answer 1

尝试使用$('#rightplaceholder').html(data);，将两个DOM操作合并为一个。

另外：将cache: false更改为true以加快多个AJAX请求。如果您没有提交数据，那么就没有理由不缓存结果。

Answer 2

一般来说，jQuery函数有很多开销，我猜你的设置和用法的组合会在系统中的某个地方造成内存泄漏/缓慢。所以+1找到这个。

如果您真的只是替换html，那么您可以使用本机innerHTML属性it is well supported并执行您在此处尝试执行的操作。它通常是替换大量html的最佳方法。如上所述，防止更换html甚至更好。

示例：

$('#rightplaceholder').innerHTML = data;

确保在将DOM元素附加到页面后设置.innerHTML，以防止内存泄漏。因此，在现有元素上使用它应该没问题。

Answer 3

听起来像是由您（或正在加载的数据）运行的补充JavaScript引起的内存泄漏。

删除所有不必要的代码，或者从页面中删除其他代码添加的元素时，请确保使用其API来执行此操作，以便有机会进行清理。

jQuery $（...）。empty（）。append（...）在几次执行后减慢了整个页面的速度

3 个答案: