Dowiedz się, jak używać Chrome i Narzędzi deweloperskich, aby wykryć problemy z pamięcią, które wpływają na wydajność strony, w tym wycieki pamięci, przeciążenie pamięci i częste czyszczenie pamięci.
Podsumowanie
- Za pomocą Menedżera zadań Chrome możesz sprawdzić, ile pamięci obecnie wykorzystuje Twoja strona.
- Wizualizacja wykorzystania pamięci w czasie za pomocą nagrań na osi czasu.
- Identyfikowanie odłączonych drzew DOM (częsta przyczyna wycieków pamięci) przy użyciu zrzutów sterty.
- Dowiedz się, kiedy nowa pamięć jest przydzielana na stercie JS za pomocą nagrań na osi czasu alokacji.
Omówienie
Zgodnie z modelem wydajności RAIL działania związane z wynikami powinny użytkowników.
Problemy z pamięcią są ważne, ponieważ często użytkownicy je dostrzegają. Użytkownicy mogą postrzegać pamięć następujące problemy:
- Wydajność strony staje się z czasem coraz gorsza. Prawdopodobnie jest to objaw wyciek pamięci. Wyciek pamięci ma miejsce, gdy błąd na stronie sprawia, że jej strona coraz częściej i zwiększa ilość pamięci.
- Wydajność strony jest stale niska. Prawdopodobnie jest to objaw zaburzeń pamięci. Pamięć występuje, gdy strona zużywa więcej pamięci niż jest to konieczne do uzyskania optymalnej szybkości działania.
- Wydajność strony jest opóźniona lub prawdopodobnie zatrzymuje się często. Prawdopodobnie jest to objaw będzie często czyszczenia pamięci. Czyszczenie pamięci ma miejsce, gdy przeglądarka odzyskuje pamięć. Przeglądarka decyduje o tym, kiedy to nastąpi. Podczas zbierania danych wykonywanie skryptu jest wstrzymane. Jeśli więc przeglądarka jeśli często zbierają śmieci, wykonywanie skryptu będzie dużo wstrzymywane.
Za dużo pamięci: ile to „za dużo”?
Wyciek pamięci można łatwo zdefiniować. Jeśli witryna zużywa coraz więcej pamięci, przeciek. Ale za dużo pamięci jest trochę trudniejsze do przypięcia. Co kwalifikuje się jako „nadmierne wykorzystanie pamięci”?
Nie ma tu sztywnych wartości, ponieważ różne urządzenia i przeglądarki mają różne możliwości. Strona, która działa płynnie na wysokiej klasy smartfonie, może ulec awarii na słabszych smartfonach.
Najważniejsze jest użycie modelu RAIL i skupienie się na użytkownikach. Sprawdzaj, które urządzenia są popularne z użytkownikami, a następnie przetestować ją na tych urządzeniach. Jeśli działanie jest stale to znaczy, że strona może przekraczać możliwości pamięci tych urządzeń.
Monitoruj użycie pamięci w czasie rzeczywistym za pomocą Menedżera zadań Chrome
Jako punkt wyjścia do analizy problemów z pamięcią użyj Menedżera zadań Chrome. Menedżer zadań to monitor w czasie rzeczywistym, który informuje, ile pamięci wykorzystuje strona.
Naciśnij Shift+Esc lub otwórz menu główne Chrome i wybierz Więcej narzędzi > Menedżer zadań: otwórz Menedżera zadań.
Kliknij prawym przyciskiem myszy nagłówek tabeli w Menedżerze zadań i włącz pamięć JavaScript.
Te dwie kolumny różnią się informacjami o tym, jak strona wykorzystuje pamięć:
- Kolumna Pamięć reprezentuje pamięć natywną. Węzły DOM są przechowywane w pamięci natywnej. Jeśli rośnie, są tworzone węzły DOM.
- Kolumna Pamięć JavaScript przedstawia stertę JS. Ta kolumna zawiera 2 wartości. interesującą Cię wartość to liczba bieżąca (w nawiasach). Aktywny numer informuje, ile pamięci używają osiągalne obiekty na stronie. Jeśli ten numer to rośnie liczba nowych, albo przyrastają istniejące obiekty.
Wizualizacja wycieków pamięci za pomocą nagrań wydajności
Jako punktu wyjścia do analizy możesz też użyć panelu Skuteczność. Skuteczność ułatwiają wizualizację wykorzystania pamięci przez stronę w czasie.
- Otwórz panel Skuteczność w Narzędziach deweloperskich.
- Zaznacz pole wyboru Pamięć.
- Nagraj
Aby zademonstrować rejestrowanie wydajności, użyj tego kodu:
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('div'));
}
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
Przy każdym naciśnięciu przycisku, do którego odwołuje się kod, dołączane jest 10 tys. węzłów div.
do treści dokumentu, a ciąg miliona znaków x jest przekazywany do tablicy x.
Uruchomienie tego kodu spowoduje utworzenie na osi czasu zapisu takiego jak ten zrzut ekranu:
Pierwsza z nich to omówienie interfejsu użytkownika. Wykres HEAP w panelu Przegląd (poniżej) NET) reprezentuje stertę JS. Pod panelem Przegląd znajduje się panel Licznik. Tutaj możesz: wyświetlić wykorzystanie pamięci w podziale na stertę JS (tak samo jak na wykresie HEAP w panelu Przegląd), dokumentów, węzłów DOM, detektorów i pamięci GPU. Wyłączenie pola wyboru spowoduje ukrycie go na wykresie.
Analiza kodu w porównaniu ze zrzutem ekranu. Jeśli spojrzysz na licznik węzłów (parametr
zielony wykres), widać, że dobrze pasuje do kodu. Liczba węzłów wzrasta o
do naszych celów. Możesz przyjąć, że każde zwiększenie liczby węzłów jest wywołaniem funkcji grow(). Plik JS
wykres sterty (niebieski) nie jest tak prosty. Zgodnie ze sprawdzonymi metodami pierwszy spadek
jest to wymuszone usuwanie odśmiecania (osiągnięte po naciśnięciu przycisku Usuń śmieci). Jako
nagranie postępuje, zobaczysz, że rozmiar sterty JS gwałtownie rośnie. Jest to naturalne i oczekiwane:
Kod JavaScript tworzy węzły DOM przy każdym kliknięciu przycisku i wykonuje dużą pracę, gdy
tworzy ciąg miliona znaków. Kluczowe jest tutaj to, że sterta JS kończy się
jest wyższy niż początek (tutaj „początek” to punkt po wymuszonym odczyszczeniu). W
w świecie rzeczywistym, jeśli zauważysz ten wzorzec zwiększania rozmiaru sterty JS lub rozmiaru węzła,
co może oznaczać wyciek pamięci.
Wykrywanie wycieków pamięci odłączonego drzewa DOM za pomocą zrzutów sterty
Węzeł DOM może zostać usunięty tylko wtedy, gdy nie ma do niego żadnych odwołań z poziomu Drzewo DOM lub kod JavaScript. Węzeł jest nazywany „odłączonym”. po usunięciu z drzewa DOM, ale w niektórych JavaScripcie wciąż się do niego odwołują. Odłączone węzły DOM są częstą przyczyną wycieków pamięci. Ten pokazuje, jak korzystać z Narzędzi deweloperskich usługi profilowania sterty umożliwiające identyfikację odłączonych węzłów.
Oto prosty przykład odłączonych węzłów DOM.
var detachedTree;
function create() {
var ul = document.createElement('ul');
for (var i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
detachedTree = ul;
}
document.getElementById('create').addEventListener('click', create);
Kliknięcie przycisku, do którego odwołuje się kod, tworzy węzeł ul z 10 elementami podrzędnymi li. Te węzły
są wskazywane przez kod, ale nie istnieją w drzewie DOM, więc zostały odłączone.
Zrzuty sterty to jeden ze sposobów identyfikacji odłączonych węzłów. Jak wskazuje nazwa, zrzuty stosu pokazują jaka jest rozkład pamięci między obiekty JS i węzły DOM strony w momencie wywołania zdjęcia.
Aby utworzyć zrzut, otwórz Narzędzia deweloperskie, przejdź do panelu Pamięć i wybierz opcję Stos Przycisk Migawka, a następnie kliknij przycisk Zrób zrzut ekranu.
Przetworzenie i wczytanie zrzutu może trochę potrwać. Po zakończeniu wybierz go z lewej strony (o nazwie HEAP SNAPSHOTS).
Aby wyszukać odłączone drzewa DOM, wpisz Detached w polu tekstowym Filtr klasy.
Aby zbadać oddalone drzewo, możesz powiększyć karaty.
Węzły zaznaczone na żółto mają bezpośrednie odwołania z kodu JavaScript. Wyróżnione węzły czerwony nie ma bezpośrednich odwołań. Żyją tylko dlatego, że wchodzą w skład żółtego węzła drzewo. Skupiamy się zwykle na żółtych węzłach. Napraw kod, tak aby żółty węzeł nie aktywne dłużej, niż jest to konieczne, a także zostaną usunięte czerwone węzły będące częścią żółtego węzła.
Aby dokładniej zbadać ten problem, kliknij żółty węzeł. W panelu Obiekty zobaczysz więcej informacji
na temat kodu, który się do niego odwołuje. Na przykład na zrzucie ekranu poniżej widać,
że zmienna detachedTree odwołuje się do węzła. Aby naprawić ten wyciek pamięci,
sprawdzi kod, który korzysta z detachedTree, i upewni się, że usuwa swoje odwołanie do węzła
gdy nie są już potrzebne.
Identyfikuj wycieki pamięci sterty JS za pomocą osi czasu alokacji
Oś czasu alokacji to kolejne narzędzie, które pomaga wykrywać wycieki pamięci w stercie JS.
Aby zademonstrować oś czasu alokacji, użyj tego kodu:
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
Za każdym razem, gdy przycisk, do którego odwołuje się kod, jest kopiowany ciągiem miliona znaków
dodano do tablicy x.
Aby zarejestrować oś czasu alokacji, otwórz Narzędzia deweloperskie, przejdź do panelu Profile i wybierz Rejestruj
Przycisk Oś czasu alokacji, naciśnij przycisk Rozpocznij i wykonaj oczekiwane działanie
powoduje wyciek pamięci, a następnie naciśnij przycisk Zatrzymaj nagrywanie.
(
), gdy
Gotowe.
Podczas nagrywania możesz sprawdzić, czy na osi czasu alokacji pojawią się niebieskie paski, zrzut ekranu poniżej.
Te niebieskie paski oznaczają nowe przydziały pamięci. Te nowe przydziały pamięci są Twoimi kandydatami do wycieków pamięci. Możesz powiększać słupek, aby w panelu Konstruktor wyświetlić tylko obiekty, które zostały przydzielone w określonym przedziale czasu.
Rozwiń obiekt i kliknij jego wartość, aby wyświetlić więcej informacji na jego temat w panelu Obiekt. Dla:
Na zrzucie ekranu poniżej widać szczegóły nowo przydzielonego obiektu,
zobaczysz, że została przydzielona do zmiennej x w zakresie Window.
Badanie przydziału pamięci według funkcji
Aby wyświetlić przydział pamięci według funkcji JavaScriptu, użyj typu Próbkowanie przydziałów w panelu Pamięć.
- Wybierz opcję Próbkowanie przydziału. Jeśli na stronie znajduje się instancja robocza, możesz wybrać go jako miejsce docelowe profilowania w menu obok przycisku Rozpocznij.
- Naciśnij przycisk Start.
- Wykonaj czynności na stronie, którą chcesz zbadać.
- Gdy skończysz, naciśnij przycisk Zatrzymaj.
W Narzędziach deweloperskich znajdziesz zestawienie przydziału pamięci według funkcji. Domyślny widok to Ciężki (u dołu) w górę), który przedstawia funkcje, które przydzieliły najwięcej pamięci na górze.
Wykrywaj częste usuwanie odpadów
Jeśli strona często się zatrzymuje, może to oznaczać, że występują problemy z odśmiecaniem.
Aby wykryć częste nieczytelne elementy, możesz użyć Menedżera zadań Chrome lub nagrań z osi czasu na osi czasu. kolekcji. W Menedżerze zadań często rosną i maleje wartości Pamięć lub Pamięć JavaScript. reprezentują częste usuwanie odpadów. Nagrania na osi czasu często rosną i spadają Wykresy stosu JS lub liczby węzłów wskazują na częste usuwanie czyszczenia pamięci.
Po zidentyfikowaniu problemu możesz użyć rejestracji na osi czasu alokacji, aby dowiedzieć się, alokacja pamięci i funkcje, które je powodują.