Jquery + Chrome memory issue
I'm running this script in Google Chrome while using the Chrome Task Manager to monitor memory usage:
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="jquery-开发者_StackOverflow1.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>
Memory usage will steadily increase to a maximum of ~31,000K, it then stays at this level.
As far as I can see the loop should simply overwrite the same element in the document.
What is causing the large amount of memory to be allocated?
Using IE 8 I can see no no discernible increase in memory usage while running the script.
With Firefox 3.5.3 memory usage goes through a cycle of increasing by a few megabytes over a minute or so and then falling back its baseline level.
Have you established a baseline for Chrome's memory usage without jQuery? If you suspect jQuery then implement your sample without jQuery and see how the memory usage goes.
Also I notice you are using a locally hosted copy of jQuery in your script. Have you considered pulling the library from a free CDN? Google's AJAX CDN Microsoft's AJAX CDN
You're recursively calling setTimeout. Don't do this. Since there is no base case to stop the recursive call, it will continue indefinitely.
In a language like Java, this would eventually cause a StackOverflowException. I'm not sure what Javascript does, aside from eat memory.
Instead, use setInterval:
function incrementContent() {
$("#content").text(count);
count++;
}
setInterval(incrementContent, 5);
精彩评论