Question

我在使用Chrome任务管理器监控内存使用情况时在谷歌浏览器中运行此脚本：

<html>
<head>
    <title>Test Page</title>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">

        var count = 0;

        function incrementContent() {
            $("#content").text(count);
            count++;
            setTimeout(incrementContent, 5);
        }

    </script>
</head>
<body onload="incrementContent()">
<div id="content">
</div>
</body>
</html>

内存使用量将稳定增加至最大约31,000K，然后保持在此水平。

据我所知，循环应该简单地覆盖文档中的相同元素。

是什么导致分配大量内存？

使用IE 8我可以看到在运行脚本时没有明显的内存使用量增加。

使用Firefox 3.5.3内存使用量会在一分钟左右的时间内增加几兆字节，然后再回落到基线水平。

Answer 1

您是否在没有jQuery的情况下为Chrome的内存使用建立了基准？如果您怀疑jQuery，那么在没有jQuery的情况下实现您的示例，并查看内存使用情况。

此外，我注意到您在脚本中使用了本地托管的jQuery副本。您是否考虑过从免费CDN中提取图书馆？ Google's AJAX CDN Microsoft's AJAX CDN

Answer 2

你是递归调用setTimeout。不要这样做。由于没有基本情况可以停止递归调用，因此它将无限期地继续。

在像Java这样的语言中，这最终会导致StackOverflowException。除了吃内存之外，我不确定Javascript会做什么。

相反，请使用setInterval：

function incrementContent() {
    $("#content").text(count);
    count++;
}
setInterval(incrementContent, 5);

Jquery + Chrome内存问题

2 个答案: