pojedyncze zgłoszenie strona internetowa dotyczy

Question

Sytuacja

Ja prototypowania aplikacji internetowych z kilku stron, niektóre z nich z poważnymi obciążenia JavaScript. Miałem (niezbyt oryginalny) pomysł, aby raz załadować układ strony i zmienić tylko zawartość za pomocą zapytań ajaxowych. Można to zrobić i działa dobrze, ale mam pewne obawy.

Witryna sprawdza każde żądanie, które otrzyma, a jeśli jest żądaniem AJAX, zwraca tylko zawartość (jako częściowy widok MVC 4, ale to nie jest dokładnie ten punkt, można to zrobić w dowolnym miejscu). W przeciwnym razie ładuje całą stronę, układ i wszystko. Chodzi o to, aby mieć coś w rodzaju flagi stanu dla każdego pakietu javascript, który pobieram. Układ miałby plik inicjujący js, zawierający podstawową logikę wyświetlania strony, sposób uzyskiwania zawartości, itp.

Wszystkie strony zawartości powinny sprawdzić, czy zostały załadowane odpowiednie skrypty, a jeśli nie, zainicjować pobierz, aw przypadku sukcesu ustaw poprawną flagę. Pewna dodatkowa obsługa błędów jest wymagana w przypadkach, gdy wywołanie ajax nie działa z jakiegoś powodu.

Pytanie (s)

Teraz moim zmartwieniem jest, jest dość dużo JS na niektórych "podstron". Ponieważ muszę pracować nad przeglądarkami mobilnymi (chociaż większość rzeczy js-heavy jest tylko na pulpicie, ale zapomnijmy o tym przez chwilę), jak wpłynie to na wydajność, jeśli mam kilka MB-ów załadowanych skryptów pamięć i "nigdy" nie rozładowują ich (ponieważ strona nie jest ponownie ładowana). Czy skrypty będą buforowane, jeśli otrzymam je za pomocą funkcji jQuery.getScript (...)? Czy powinienem załadować skrypty w inny sposób?

To samo pytanie dotyczące treści. Jeśli usuwam elementy DOM z ciała, zastępuję je innymi elementami, a następnie ponownie ładuję oryginalną podstronę, co się stanie z wykorzystaniem pamięci i wydajnością podczas długiego okresu użytkowania?

Naprawdę chciałbym, aby ktoś z doświadczonych w tej dziedzinie dał mi pewien wgląd w moje obawy, zanim sprawię, że będę wyglądał zupełnie głupio z bezużytecznym prototypem proof-of-concept.

Z góry dziękuję!

EDIT: Zmieniono tytuł właściwy wyraz

EDIT 2: separacji jakie jest pytanie, jaki jest kontekst

Answer 1

Opracowaliśmy podobny wniosek jakiś czas temu i zdecydowaliśmy się na tej aplikacji, aby mieć każda strona AJAX ciężki oddzielnej stronie. Jest około 6-8 stron, a każda z nich ma bardzo różne obowiązki, więc można pomyśleć o tym, że ma 6-8 niezależnych aplikacji na jedną stronę.

Istnieją dwa podejścia, które można myślę, w Twoim przypadku:

1. Jeśli strony są naprawdę JavaScript ciężki, a każdy z nich wymaga bardzo różne zestawy skryptów, wydajność byś zdobycia przez nie ponowne załadowanie układu strony prawdopodobnie zostałoby utracone przez ilość ładunków, które ładowałbyś cały czas.
   Specjalnie dla słabo napisanych skryptów JavaScript, w których śmieci zaczynają spożywać swoją pamięć, ładowanie całej strony od czasu do czasu jest niezłe, aby wyrzucić śmieci.
2. Jeśli JavaScript używany przez strony jest prawie taki sam (lub ma niewielkie różnice), proponuję połączyć każdy skrypt ze wszystkich stron w jeden i wczytać dołączony skrypt.
   W takim przypadku możesz jednak dostać się do sytuacji, w której pełna strona nigdy nie zostanie ponownie załadowana, więc postaraj się napisać js, który nie przecieka Twojej pamięci.

Jeśli strona serwera może obsługiwać nagłówki HTTP sterujące pamięcią podręczną poprawnie, to tak, niezależnie od sposobu załadowania określonego zasobu, będzie działało buforowanie. Mimo wszystko, polecam połączenie skryptów w jeden i nie zawracam sobie głowy ładowaniem ich jeden po drugim.
Dzięki temu będziesz mieć zapisane kilka żądań HTTP, a ponieważ przeglądarka będzie buforować dołączony skrypt, również zaoszczędzisz przepustowość później.

O mocowania/usuwanie elementów z DOM:
jQuery automatycznie pozbywa się wszystkich procedur obsługi zdarzeń i data() podczas korzystania remove() lub empty(). Zachowuje je tylko wtedy, gdy używasz detach().

Więcej o JavaScript i pamięci zużycia

Oto kilka artykułów na ten temat, które są warte przeczytania.

• http://nesj.net/blog/2012/04/javascript-memory-leaks/
• http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
• http://www.ibm.com/developerworks/library/wa-jsmemory/index.html
• http://www.infoworld.com/d/application-development/brendan-eich-tells-how-prevent-javascript-memory-leaks-210974

Answer 2

Brzmi jak próbujesz zbudować SPA!

Istnieje kilka ram/bibliotek, które obecnie nie są przeznaczone do wspomagania budowy i projektowania takich zastosowaniach, przez nie-drodze-wyczerpująca-lista, która jest:

• backbonejs - patrz też backbone tutorials
• angularjs
• knockoutjs

Często aplikacje wykorzystujące te ramy będą również korzystać z niektórych coś takiego jak requirejs, aby pomóc modularyzacji i ładować zasoby tylko wtedy, gdy są potrzebne.

Istnieje wiele opcji, ale proponuję przeprowadzić kilka samouczków i sprawdzić, czy istnieje taki, który odpowiada Twoim potrzebom - powodzenia! :)

Istnieje również kilka odpowiednich samouczków wideo na temat pluralsight, związanych z ich użyciem z .NET MVC 4 i Web API. Musisz członkostwa, ale myślę, że można zapisać się na bezpłatny okres próbny -

Single Page Apps with HTML5, Web API, Knockout and jQuery

Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure

Aktualizacja:

Aby rozwiązać swoje problemy z wydajnością - Jest kilka ciekawych informacji na temat profilowanie wydajności pamięci - Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools warte przeczytania, jeśli tylko dla pierwszego obrazu.

Dodatkowo Writing Fast, Memory-Efficient JavaScript, ma kilka dobrych punktów, aby w odniesieniu do wykorzystania pamięci:

dać śmieciarza szansę, aby zebrać jak najwięcej przedmiotów, jak to możliwe, jak najszybciej, nie trzymaj się obiektów już nie potrzebujesz.

Wreszcie, chociaż kręgosłup specyficzne Backbone.js And JavaScript Garbage Collection daje dobre podsumowanie

podstawowych idei [że] powinny okazać się przydatne dla ludzi, którzy chcą zrobić lepiej zarządzania zużycie pamięci w JavaScript.

Które w odnośnikach Włącz tę odpowiedź: What does backbone.js do with models that are not used anymore