Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jQuery + Google Chrome ( утечка памяти ??? ) (https://javascript.ru/forum/jquery/8794-jquery-google-chrome-utechka-pamyati.html)

idler 13.04.2010 14:29
jQuery + Google Chrome ( утечка памяти ??? )
 
Собственно вот код, при работе которого в «хромовском» диспетчере задач медленно, но верно растет кол-во потребляемой памяти для этой вкладки
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
</head>
<body>
<div class="testbox" id="test" ></div>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" >
$(function(){
  window.c    = 0;
  window.xxx  = null;
  window.test = document.getElementById('test');
  
  function x()
  {
    window.c++;
    window.xxx = $('.testbox');
    test.innerHTML = window.c;
    setTimeout(y,20);
  }
  function y()
  {
    setTimeout(x,20);
  }
  
  for(i=1; i<10; i++)  x();  
});
</script>
</body>
</html>

OS: Debian Linux
Google Chrome: 5.0.307.7 beta
jQuery: 1.4.2

Такое только у меня?
У вас воспроизводится?
Есть мысли о том кто течет ( jQuery | Chrome | /dev/hands )?

e1f 13.04.2010 16:23
jQuery тут ни при чем:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Leak test</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.18.1.1" />
</head>

<body>
<div id="output" class="testbox"></div>
<script type="text/javascript">
<!--
(function(){
    window.c    = 0;
    window.qSA  = null;
    window.output = document.getElementById('output');

    function x() {
        window.c++;
        window.qSA = document.querySelectorAll('.testbox');
        window.output.innerHTML = window.c;
        setTimeout(y,20);
    }

    function y() {
        setTimeout(x,20);
    }

    for (i=1; i<10; i++) {
        x();
    }
}());
//-->
</script>
</body>
</html>


OS: Windows 7
Google Chrome: 4.1.249.1045 (42898)
jQuery: N/A

Тоже потихоньку ликаем.

e1f 13.04.2010 16:28
Так тоже ликаем:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Leak test</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.18.1.1" />
</head>

<body>
<div id="output" class="testbox"></div>
<script type="text/javascript">
<!--
    window.c    = 0;
    window.qSA  = null;
    window.output = document.getElementById('output');

    function x() {
        window.qSA = document.querySelectorAll('.testbox');
        window.output.innerHTML = window.c++;
    }

    setInterval(x, 20);
//-->
</script>
</body>
</html>


OS: Windows 7
Google Chrome: 4.1.249.1045 (42898)
jQuery: N/A

switch001 14.04.2010 18:26
Добрый день всем
Столкнулся с утечкой памяти вот в такой конструкции:
<BODY onload='init_timers()' >
    <script type="text/javascript"> 
    function init_timers()
    {
        query_timer = setInterval("ExtenQuery()",5000);
        ExtenQuery();  
    }
        function ExtenQuery()
        {
            $.getJSON("extensions-realtime.php?show=query",
//запрос возвращает данные в таком виде:
//     {
//        "200_Status":"<div class='stat-1'>&nbsp;</div>",
//        "113_Status":"<div class='stat8'>&nbsp;</div>",
//        "200_Connected":"113",
//        "200_Duration":"00:03",
//        "200_Application":"Dial",
//        "200_CallerID":"&nbsp;",
//        "200_Channel":"Local/200@from-internal-custom-3e97,2",
//        "113_Connected":"200",
//        "113_Duration":"00:03",
//        "113_Application":"Dial",
//        "113_CallerID":"menu-3&nbsp;",
//        "113_Channel":"LOCAL/113@ext-local|60|S(1361)M(mname})",
//     }
//размер ответа в среднем 2..4 кб.
     
                function(obj)
                { 
                    
                    j=j+1;//добавляем номер (с каждой итерацией увеличивается id, 
                            //чтоб знать, где удалить старое и вписать новое 
                    jQuery.each(obj, function(i, val) 
                    //отражаем изменения на странице в соответствии с результатом запроса
                    {
                        $("#" + i+" div").replaceWith("<div class=\"value"+j+"\">" + val+ "</div>");
                    });
                    //удаляем старое
                    $(".value" + (j-1) ).replaceWith("<div class=\"value"+j+"\">&nbsp;</div>");

                });
        }
</script>


....тут обрабатываемые объекты.....         
 <div class="reg1" id="exten_101"> 
    <div class="stat0" id="101_Status"><div class="value">&nbsp;</div></div> 
    <div class=usernum>101:</div> 
    <div class=username>Meleshko Ekaterina&nbsp;</div> 
    <div class=stats id="101_Connected"><div class="value">&nbsp;</div></div> 
    <div class=stats>:</div> 
    <div class=stats id="101_CallerID"><div class="value">&nbsp;</div></div> 
    <div class=time id="101_Duration"><div class="value">&nbsp;</div></div> 
</div> 
.... таких объектов много....
<div class="reg1" id="exten_200"> 
    <div class="stat0" id="102_Status"><div class="value">&nbsp;</div></div> 
    <div class=usernum>200:</div> 
    <div class=username>Loginova Valeiya&nbsp;</div> 
    <div class=stats id="200_Connected"><div class="value">&nbsp;</div></div> 
    <div class=stats>:</div> 
    <div class=stats id="200_CallerID"><div class="value">&nbsp;</div></div> 
    <div class=time id="200_Duration"><div class="value">&nbsp;</div></div> 
</div>

все остальные части убрал, так как проверил их по отдельности, они не ведут к утечкам.
подозрения: jquery не очищает старый экземпляр obj; DOM каким-нибудь образом заполняется неудаленными элементами, браузер кеширует запросы (в php добавляю заголовки, чтоб не кэшировал).
Просто приложение должно работать круглосуточно, а за четыре часа работы размер окна браузера превышает 120 Мб (тестирую в хроме и лисе), что никуда не годится.
Вопрос, собственно, такой: куда посмотреть, что копнуть, чтобы обнаружить и убрать утечку памяти. Или я использую jquery неправильно, что приводит к утечкам? От jquery отказываться не хочется, т.к. удобна она уж очень...

switch001 24.04.2010 14:09
удалось локализовать проблему.
Если заменять элементы так:
$("#" + i+" div").replaceWith("<div class=\"value"+j+"\">" + val+ "</div>");
то память течет, но работает быстро.
если сделать вот так
$("#" + i+" div").html("<div class=\"value"+j+"\">" + val+ "</div>");
то память не течет, но загружает браузер впятеро сильнее.

пробовал перед
$("#" + i+" div").replaceWith(...)
делать так
$("#" + i+" div").empty(...)
но эффекта никакого память все равно течет... (полагаю еще двойная нагрузка из-за селектора)

что еще можно попробовать или как ускорить обработку $("#" + i+" div").html()?


Часовой пояс GMT +3, время: 21:28.