applicazione singola pagina web riguarda

Question

La situazione

sto prototipazione un'applicazione web di diverse pagine, alcune delle quali con gravi carico JavaScript. Ho avuto l'idea (non molto originale) di caricare il layout della pagina una sola volta e di modificare il contenuto solo con richieste Ajax. Questo può essere fatto, e funziona bene, ma ho alcune preoccupazioni.

Il sito verifica ogni richiesta che riceve e, se si tratta di una richiesta AJAX, restituisce solo il contenuto (come una vista parziale MVC 4, ma non è esattamente il punto, questo può essere fatto ovunque.) Altrimenti, carica tutta la pagina, con il layout e tutto. L'idea è di avere qualcosa come un flag di stato per ogni pacchetto javascript che sto scaricando. Il layout avrebbe un file js di inizializzazione, contenente la logica di visualizzazione di base della pagina, come ottenere i contenuti, ecc.

Tutte le pagine di contenuto verrebbero controllate, se i loro script pertinenti sono caricati, in caso contrario, quindi avviare il scarica e, in caso di successo, imposta il flag corretto. Per i casi in cui la chiamata ajax fallisce per qualche motivo, è necessaria una gestione degli errori aggiuntiva.

The Question (s)

Ora la mia preoccupazione è, non v'è abbastanza molto JS su alcuni "sottopagine". Dal momento che devo essere in grado di lavorare sui browser mobili (anche se la maggior parte dei contenuti js-pesanti è solo desktop, ma dimentichiamolo per un minuto), come inciderà sulle prestazioni, se avessi bisogno di diversi MB-s di script caricati in memoria e "mai" scaricandoli (poiché la pagina non viene ricaricata). Inoltre, gli script verranno memorizzati nella cache, se li ottengo tramite la funzione jQuery.getScript (...)? O dovrei caricare gli script in un altro modo?

Stessa domanda per il contenuto. Se rimuovo gli elementi DOM dal corpo, li sostituisco con altri elementi, quindi ricarico la pagina secondaria originale, cosa farò con l'utilizzo della memoria e le prestazioni, durante un lungo periodo di utilizzo?

Mi piacerebbe davvero che qualcuno esperto in questo campo mi desse qualche idea sulle mie preoccupazioni, prima di farmi sembrare completamente stupido con un prototipo di proof-of-concept inutile.

Grazie in anticipo!

EDIT: Titolo cambiato per una corretta espressione

EDIT 2: Separato qual è la domanda, e ciò che è il contesto

Answer 1

Abbiamo sviluppato un'applicazione simile qualche tempo fa e abbiamo deciso per l'applicazione di rendere ogni pagina AJAX-pesante una pagina separata. Ci sono ca. 6-8 pagine e ognuna di esse ha responsabilità molto diverse, quindi potreste pensare a questo come ad avere 6-8 applicazioni a pagina singola indipendenti.

Ci sono due approcci che mi viene in mente, per il vostro caso:

1. Se le pagine sono veramente Javascript-pesante e ciascuno di essi richiede molto diverse serie di script, le prestazioni che ci si guadagnare da non ricaricare il layout della pagina verrebbe probabilmente perso dalla quantità di cose che dovresti caricare tutto il tempo.
   Soprattutto per JavaScript scritto male dove la spazzatura inizia a consumare la memoria non è male ricaricare l'intera pagina ogni tanto per estrarre la spazzatura.
2. Se il JavaScript utilizzato dalle pagine è praticamente lo stesso (o presenta solo differenze minori), suggerirei di raggruppare tutti gli script di tutte le pagine in uno e caricare lo script in bundle.
   In questo caso, tuttavia, è possibile che ci si trovi in ​​una situazione in cui la pagina intera non viene mai ricaricata, quindi fare in modo di scrivere js che non perdi memoria.

Se il lato server è in grado di gestire correttamente le intestazioni HTTP di controllo della cache, allora sì, indipendentemente dal modo in cui si carica una particolare risorsa, funzionerà la memorizzazione nella cache. Tuttavia, ti consiglio di raggruppare gli script in uno solo e non preoccuparti di caricarli uno per uno.
Così facendo, avrai salvato un po 'di richieste HTTP e poiché il browser memorizzerà nella cache lo script in bundle, salverà anche la larghezza di banda in seguito.

A proposito di applicare/rimuovere elementi dal DOM:
jQuery automaticamente si libera di tutti i gestori di eventi e data() quando si utilizza remove() o empty(). Li conserva solo se si utilizza detach().

più su Javascript e memoria consumo

Ecco alcuni articoli sul tema che vale la pena di leggere.

• 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

Sembra che si sta tentando di costruire una SPA!

Ci sono alcuni framework/librerie là fuori che sono progettati per aiutare la costruzione e la progettazione di tali applicazioni, un by-no-mezzi-esaustivo elenco dei quali è:

• backbonejs - vedi anche backbone tutorials
• angularjs
• knockoutjs

Spesso applicazioni che utilizzano queste strutture potranno anche utilizzare alcuni cosa come requirejs per aiutare la modularizzazione e caricare solo le risorse quando sono necessarie.

Ci sono molte opzioni là fuori, ma ti suggerisco di eseguire alcuni tutorial e vedere se ce n'è uno adatto alle tue esigenze: buona fortuna! :)

Ci sono anche un paio di video tutorial rilevanti su pluralsight, relativi al loro uso con .NET MVC 4 e Web API. Hai bisogno di un abbonamento, ma penso che è possibile registrarsi per una prova gratuita -

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

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

Aggiornato:

di risolvere i problemi di performance - Ci sono alcune interessanti informazioni profiling prestazioni della memoria - Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools vale la pena di leggere se solo per la prima immagine.

Inoltre, Writing Fast, Memory-Efficient JavaScript, ha alcuni buoni punti per quanto riguarda l'utilizzo della memoria:

Per dare il garbage collector la possibilità di raccogliere il maggior numero possibile di oggetti il ​​più presto possibile, non tenere a oggetti non hai più bisogno.

Infine, anche se la spina dorsale specifico, Backbone.js And JavaScript Garbage Collection dà una buona sintesi di

idee di base [che] dovrebbe rivelarsi utile per le persone che vogliono fare un lavoro migliore di gestire l'uso della memoria in JavaScript.

Che a sua volta riferimenti questa risposta: What does backbone.js do with models that are not used anymore