jQuery lub javascript, aby znaleźć wykorzystanie pamięci strony

Możesz użyć Navigation Timing API .

Navigation Timing jest JavaScript API do dokładnego pomiaru wydajności w Internecie. Interfejs API zapewnia prosty sposób na uzyskanie dokładnych i szczegółowych statystyk czasu-natywnie-dla nawigacji po stronie i zdarzeń ładowania.

window.performance.memory daje dostęp do danych wykorzystania pamięci JavaScript.

Zalecana lektura

• pomiar prędkości ładowania strony z pomiarem czasu nawigacji

To pytanie ma 5 lat, a zarówno javascript, jak i przeglądarki ewoluowały niesamowicie w tym czasie. Ponieważ jest to teraz możliwe (przynajmniej w niektórych przeglądarkach), a to pytanie jest pierwszym wynikiem, gdy Google "javascript show memory useage", pomyślałem, że zaproponuję nowoczesne rozwiązanie.

Pamięć-statystyki.js: https://github.com/paulirish/memory-stats.js/tree/master

Ten skrypt (który możesz uruchomić w dowolnym momencie na dowolnej stronie) wyświetli bieżące użycie pamięci strona:

var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);

Nie wiem, w jaki sposób można dowiedzieć się, ile pamięci jest używane przez przeglądarkę, ale może być w stanie użyć heurystyki na podstawie liczby elementów na stronie. Uinsg jQuery, możesz zrobić $('*').length i to da ci liczbę elementów DOM. Szczerze mówiąc, prawdopodobnie łatwiej jest po prostu przetestować użyteczność i wymyślić stałą liczbę kart do obsługi.

Użyj narzędzia Chrome Heap Snapshot tool

Istnieje również narzędzie Firebug o nazwie MemoryBug , ale wygląda na to, że nie jest jeszcze zbyt dojrzałe.

Jeśli chcesz po prostu zobaczyć do testów, istnieje sposób w Chrome poprzez stronę dewelopera, aby śledzić użycie pamięci, ale nie wiesz, jak to zrobić bezpośrednio w javascript.

Chciałbym zaproponować zupełnie inne rozwiązanie od innych odpowiedzi, a mianowicie obserwować szybkość aplikacji i gdy spadnie poniżej zdefiniowanych poziomów albo pokazać wskazówki dla użytkownika, aby zamknąć karty, lub wyłączyć nowe karty od otwierania. Prostą klasą dostarczającą tego rodzaju informacji jest na przykład https://github.com/mrdoob/stats.js . Poza tym, to może nie być mądre dla tak intensywnej aplikacji, aby zachować wszystkie karty w pamięci w pierwszej kolejności. Np. prowadzenie bezpieczniejszą opcją może być tylko stan użytkownika (przewijanie) i wczytywanie wszystkich danych za każdym razem, gdy otwierają się wszystkie ostatnie dwie karty.

Wreszcie, Programiści webkit dyskutowali nad dodawaniem informacji o pamięci do javascript, ale zdobyli wiele argumentów na temat tego, co i co nie powinno być ujawniane. Tak czy inaczej, nie jest mało prawdopodobne, że tego rodzaju informacje będą dostępne w ciągu kilku lat (chociaż informacje te nie są zbyt przydatne w tej chwili).

Idealne pytanie, kiedy zacznę od podobnego projektu!

Nie ma dokładnego sposobu monitorowania użycia pamięci JS w aplikacji, ponieważ wymagałoby to wyższych uprawnień. Jak wspomniano w komentarzach, sprawdzanie liczby wszystkich elementów itp. byłoby stratą czasu, ponieważ ignoruje związane wydarzenia itp.

To byłby problem z architekturą, gdyby wycieki pamięci były widoczne lub nieużywane elementy były utrzymywane. Upewnienie się, że zawartość zamkniętych kart zostanie całkowicie usunięta bez przeciągania obsługa zdarzeń itp. byłoby idealnie; zakładając, że tak się stało, możesz po prostu symulować intensywne użytkowanie w przeglądarce i ekstrapolować wyniki monitorowania pamięci (wpisz about:memory w pasku adresu)

Protip: jeśli otworzysz tę samą stronę w IE, FF, Safari... i Chrome; a następnie przejdź do about: memory w Chrome, będzie raportować użycie pamięci w wszystkich innych przeglądarkach. Super!

Możesz chcieć, aby serwer śledził ich przepustowość dla tej sesji (ile bajtów danych zostało do nich wysłanych). Gdy przekroczą limit, zamiast wysyłać dane za pośrednictwem ajax, serwer powinien wysłać kod błędu, którego javascript użyje, aby powiedzieć użytkownikowi, że użył zbyt dużo danych.

Możesz dostać dokument.documentElement.innerHTML i sprawdź jego długość. To da ci liczbę bajtów używanych przez Twoją stronę internetową.

To może nie działać we wszystkich przeglądarkach. Możesz więc zamknąć wszystkie elementy swojego ciała w gigantycznym div I wywołać innerhtml na tym div. Coś jak <body><div id="giantDiv">...</div></body>