2012-10-10 12 views
5

Ostatnio przeczytałem w this tutorial, że niektóre wycieki jQuery można śledzić za pomocą zmiennej $.cache i zawsze należy sprawdzić jej rozmiar, jeśli jest zbyt duży, robisz coś nie tak.

Cóż, jak duża jest zbyt duża? Czy istnieje sposób na sprawdzenie zmiennej, aby zobaczyć, ile pamięci pochłania?

Pracuję na stronie, która buforuje 210 obiektów tylko ładując stronę główną. Czy to za dużo? Byłbym wdzięczny za dokładne wyjaśnienie tego problemu.

+0

Nie chodzi o to, jak duże to jest, ale jak rośnie z upływem czasu. Jeśli pamięć podręczna nie jest ograniczona (tzn. Zwiększa się na zawsze) prawdopodobnie masz wyciek pamięci. –

+1

jQuery jest naprawdę kompatybilny z przeglądarką. Wiąże się to z problemem IE związanego z prawidłowym usuwaniem elementów we wszystkich przeglądarkach. –

+0

Byłbyś mocno naciągany, aby nadwerężyć nowoczesne możliwości pamięci, jeśli jesteś rozsądny. O ile oczywiście nie stworzysz wystarczająco dużego wycieku pamięci. Nie ma magicznej ilości pamięci, wszystko zależy od sprzętu użytkownika. Czy interesują Cię osoby korzystające z komputerów z lat 90.? –

Odpowiedz

3

$.cache Rozmiar przy wartości nominalnej nie mówi nic o wyciekach pamięci. Może być bardzo mały i nadal ma wyciek pamięci lub może być bardzo duży i nie ma wycieku pamięci.

Jeśli wiesz, że na stronie jest 10 detektorów zdarzeń związanych z jQuery, a mimo to $.cache ma więcej wpisów, oznacza to, że wycieknie.

Ogromnym oszczędzaniem pamięci jest używanie delegowania zdarzeń zamiast dołączania detektorów zdarzeń do każdego elementu.

Powiedz:

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

$("li").on("click", fn) byłoby dołączyć 3 indywidualne programy obsługi zdarzeń (więcej, jeśli masz więcej Li oczywiście), natomiast $("ul").on("click", "li", fn) byłoby dołączyć tylko jeden, niezależnie od tego, ile li-elementy masz i jeszcze ten sam wynik.


Przykład wycieku:

$("button").click(function() { 
    $("#target")[0].innerHTML = ""; 
    $("<div>").appendTo($("#target")).click($.noop); 
    $("#log").text(Object.keys($.cache).length); 
});​ 

http://jsfiddle.net/SGZW4/1/

Wynika to z faktu, że .innerHTML jest stosowany, który nie jest częścią jQuery więc nie należy oczyścić.

Fix jest użycie metody jQuery dla tego samego:

$("button").click(function() { 
    $("#target").html(""); 
    $("<div>").appendTo($("#target")).click($.noop); 
    $("#log").text(Object.keys($.cache).length); 
});​ 

http://jsfiddle.net/SGZW4/2/

+0

to dobra wskazówka. ale w jaki sposób mogę użyć zmiennej $ .cache, aby lepiej sprawdzić wykorzystanie pamięci? Jeden z przykładów, o którym właśnie pomyślałem: Sprawdź liczbę elementów zapisanych w pamięci podręcznej, kliknij przycisk i uzyskaj oczekiwane zachowanie wizualne, sprawdź liczbę elementów ponownie zapisanych w pamięci podręcznej, kliknij przycisk, który "resetuje" poprzednią akcję, i zobacz, czy pamięć podręczna numer elementu jest taki sam, jak na początku tego testu. Czy to na przykład dobre wykorzystanie pliku $ .cache do testowania użycia pamięci? – ChuckE

+0

@ChuckE Nie martwiłbym się o $ .cache, jedynym sposobem na uniknięcie tego jest użycie delegacji zdarzeń do elementów statycznych, które nigdy nie są usuwane. W przeciwnym razie upewnij się, że zawsze używasz metod jQuery, a nie standardowych DOM: http://jsfiddle.net/SGZW4/1/ vs http://jsfiddle.net/SGZW4/2/ – Esailija

+0

humm, ciekawe. Oznacza to, że w przypadku testowanej sprawy $ .cache nie może nawet sprawdzić, czy wystąpił wyciek pamięci? – ChuckE

Powiązane problemy