Dowiedz się, jak używać Chrome i Narzędzi dla programistów, aby znajdować problemy z pamięcią, które wpływają na wydajność strony, w tym wycieki pamięci, nadmierne zużycie pamięci i częste usuwanie pamięci podręcznej.
Podsumowanie
- Za pomocą Menedżera zadań Chrome sprawdź, ile pamięci wykorzystuje Twoja strona.
- Wykorzystanie pamięci można wizualizować na przestrzeni czasu za pomocą nagrań z osi czasu.
- Za pomocą migawek Heap możesz wykrywać odłączone drzewa DOM (częsta przyczyna wycieków pamięci).
- Dowiedz się, kiedy w stosie JS jest przydzielana nowa pamięć, dzięki zapisom na osi czasu alokacji.
- Identyfikowanie odłączonych elementów przechowywanych przez odwołanie JavaScript.
Omówienie
Zgodnie z modelem skuteczności RAIL Twoje działania na rzecz poprawy skuteczności powinny być ukierunkowane na użytkowników.
Problemy z pamięcią są ważne, ponieważ użytkownicy często je zauważają. Użytkownicy mogą odczuwać problemy z pamięcią w takie sposoby:
- Wydajność strony z upływem czasu stopniowo spada. Może to być objawem wycieku pamięci. Wyciek pamięci występuje, gdy błąd na stronie powoduje, że z czasem strona wykorzystuje coraz więcej pamięci.
- Wydajność strony jest stale niska. Może to być objaw nadmiernego zużycia pamięci. Zapełnianie pamięci występuje, gdy strona zużywa więcej pamięci niż jest to konieczne do zapewnienia optymalnej szybkości.
- Wyświetlanie strony jest opóźnione lub często się zatrzymuje. Może to być objaw częstego usuwania elementów. Zbieranie pamięci to proces, w którym przeglądarka odzyskuje pamięć. O tym, kiedy to nastąpi, decyduje przeglądarka. Podczas tworzenia kolekcji wszystkie skrypty są wstrzymywane. Jeśli przeglądarka często usuwa śmieci, wykonywanie skryptu będzie często wstrzymywane.
Nadmierne zużycie pamięci: ile to jest „zbyt dużo”?
Wyciek pamięci jest łatwy do zdefiniowania. Jeśli witryna zużywa coraz więcej pamięci, oznacza to, że występuje wyciek pamięci. Wypełnianie się pamięci jest jednak trudniejsze do zdiagnozowania. Co oznacza „używanie zbyt dużej ilości pamięci”?
Nie ma tu konkretnych liczb, ponieważ różne urządzenia i przeglądarki mają różne możliwości. Ta sama strona, która działa płynnie na smartfonie z najnowocześniejszym procesorem, może się zawiesić na smartfonie z procesorem niskiej klasy.
Kluczem jest tu zastosowanie modelu RAIL i skupienie się na użytkownikach. Dowiedz się, jakie urządzenia są popularne wśród użytkowników, a następnie przetestuj swoją stronę na tych urządzeniach. Jeśli problem występuje stale, może to oznaczać, że strona przekracza możliwości pamięci tych urządzeń.
Monitorowanie wykorzystania pamięci w czasie rzeczywistym za pomocą Menedżera zadań Chrome
Rozpocznij analizę problemu z pamięcią od Menedżera zadań w Chrome. Menedżer zadań to monitor w czasie rzeczywistym, który pokazuje, ile pamięci zajmuje dana strona.
Naciśnij Shift + Esc lub otwórz menu główne Chrome i kliknij Więcej narzędzi > Menedżer zadań.