Это своего рода продолжение вопроса, который я разместил на прошлой неделе: Простой вызов jQuery Ajax приводит к утечке памяти в Internet Explorer
Мне нравится синтаксис jquery и все его приятные функции, но у меня возникли проблемы со страницей, которая автоматически обновляет ячейки таблицы через вызовы ajax утечки памяти.
Итак, я создал две простые тестовые страницы для экспериментов. Обе страницы выполняют вызов ajax каждые 0,1 секунды. После каждого успешного вызова ajax счетчик увеличивается и DOM обновляется. Скрипт останавливается после 1000 циклов.
Один использует jquery как для вызова ajax, так и для обновления DOM. Другой использует Yahoo API для ajax и выполняет document.getElementById (...). InnerHTML для обновления DOM.
Версия jquery сильно пропускает память. Запускается в капельном режиме (на XP Home с IE7), он начинается с 9 МБ и заканчивается примерно 48 МБ, при этом объем памяти все время растет линейно. Если я закомментирую строку, обновляющую DOM, она по-прежнему будет иметь размер 32 МБ, что говорит о том, что даже простые обновления DOM приводят к утечке значительного объема памяти. Версия, отличная от jquery, начинается и заканчивается примерно на 9 МБ, независимо от того, обновляет ли она DOM.
Есть ли у кого-нибудь хорошее объяснение того, что вызывает такую сильную утечку jquery? Я упускаю что-то очевидное? Есть ли циркулярная ссылка, о которой я не знаю? Или у jquery просто серьезные проблемы с памятью?
Вот источник утечки (jquery) версии:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.4.2');
</script>
<script type="text/javascript">
var counter = 0;
leakTest();
function leakTest() {
$.ajax({ url: '/html/delme.x',
type: 'GET',
success: incrementCounter
});
}
function incrementCounter(data) {
if (counter<1000) {
counter++;
$('#counter').text(counter);
setTimeout(leakTest,100);
}
else $('#counter').text('finished.');
}
</script>
</head>
<body>
<div>Why is memory usage going up?</div>
<div id="counter"></div>
</body>
</html>
А вот и не протекающая версия:
<html>
<head>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection_core-min.js"></script>
<script type="text/javascript">
var counter = 0;
leakTest();
function leakTest() {
YAHOO.util.Connect.asyncRequest('GET',
'/html/delme.x',
{success:incrementCounter});
}
function incrementCounter(o) {
if (counter<1000) {
counter++;
document.getElementById('counter').innerHTML = counter;
setTimeout(leakTest,100);
}
else document.getElementById('counter').innerHTML = 'finished.'
}
</script>
</head>
<body>
<div>Memory usage is stable, right?</div>
<div id="counter"></div>
</body>
</html>
innerHTML, тогда как пример jQuery использует$.text(...), но лучший перевод jQuery дляinnerHTMLбудет$.html(...). - person Lee schedule 21.09.2011