(Per essere onesti, io sono solo trovare il tempo sufficiente per fare gli ultimi ritocchi per la mia progetti che stanno raccogliendo polvere e pubblicarli qui!)
Veniamo con hack nuovo, sempre con un file allegato javascript. Si aggiungono tutti gli hack, finisce con un carico di javascript comprende e, quindi, un tempo di caricamento più lunghi.
La causa principale
Il vero problema è la natura sequenziale del XHTML. XHTML viene analizzato un tag alla volta. Quindi, se avete un paio di righe come questa:
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
i file vengono caricati come segue:
Il parser primi incontri il primo tag script. E 'quindi recupera lentamente script1.js e lo carica in memoria, che prende un sacco di tempo. Il parser pensa che questo sia il momento migliore per fare un pisolino e non si preoccupa di analizzare il tag successivo copione fino a quando il download corrente di script1.js è finito.
Vedere la parte cerchiata in precedenza. Non importa i tempi di caricamento. La roba da notare è che scriptaculous.js non si avvia il caricamento fino prototype.js termine del caricamento.
Ora, abbiamo un sacco di banda inferno andare sprecato in questo periodo. Possiamo fare altre attività in parallelo. Ma come farlo?
IL FIX
La risposta è semplice: Load gli script in modo asincrono!
Io lo chiamo EOF. EOF per Eseguire-Open-Forget. (Well!! Queste cose dovrebbero avere un nome geek!) Abbiamo eseguire una funzione javascript, richiesta di un download di script1.js, dimenticare, ed eseguire la funzione di nuovo con un altro argomento per un download di script2.js
Il risultato è molto evidente dal grafico che segue qui sotto.
Ancora una volta, non ti preoccupare i tempi di caricamento dei file singolare. Non possiamo migliorare per l'utente. Ma controllare il tempo totale impiegato per i due file javascript cerchiato. E 'minore perché la seconda inizia ancor prima che il primo è finito. Questa differenza sarà evidente se i file javascript sono grandi e richiede alcuni secondi per caricare.
Ora si potrebbe chiedere come renderlo un EOF?
Questo è ciò che Javascript è qui per questo. Noi utilizziamo Javascript per caricare un file Javascript. Non potrebbe essere più strano.
Check out questa funzione nifty:
<script type='text/javascript'>
//<![CDATA[
function loadScript(src) {
var script = document.createElement("script");
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
script.src = src;
}
//]]>
</script>
Ora è possibile caricare un numero qualsiasi di funzioni utilizzando la funzione.
Devi solo aggiungere le chiamate dove vuoi
<script type='text/javascript'>
loadScript("script1.js");
loadScript("script2.js");
</script>
Questo può andare in qualsiasi parte del codice, tra cui evento onload.
Essere più intelligenti
Questa tecnica può essere usata abilmente in situazioni specifiche.
Ad esempio, si possono fare uso di alcune librerie JS per alcuni dei vostri hack. Se l'hack non si presenta durante il caricamento e lo fa solo quando si utilizza una certa azione, si può impostare un timer per caricare lo script in background dopo, diciamo, 5 secondi. La pagina principale sarà caricato in un batter d'occhio, e l'utente sarà effettivamente ingannato.
Questo si tradurrà in un problema di temporizzazione davvero critica, se non gestito con cura. Troppo di timeout, e l'utente può ottenere il tempo di manomettere l'hack relativi prima che lo script è stato caricato.
È inoltre possibile inserire il loadScript () chiamata in qualche luogo comodo nel codice HTML. Può essere, per quanto la parte inferiore del codice HTML prima tag body, in modo che la pagina viene visualizzata molto veloce. (Anche in questo caso, il problema di cui sopra vale anche qui.)
AVVERTENZE
Tutto ha un prezzo. Anche questo ha le sue proprie deficienze. Alcuni che conosco di:
1. Questo è a causa del diverso comportamento di IE. IE e Firefox sia possibile scaricare script in modalità sopra descritte. La differenza è che IE li esegue nell'ordine in cui completare il download, mentre Firefox li esegue nell'ordine in cui vengono aggiunti al DOM.
Ciò significa che gli script non può avere dipendenze su ogni altro in IE. Si può ottenere via a volte, se non si utilizza il file di script solo molto tempo dopo il caricamento. (Un esempio è il mio Hack AJAX etichette)
Aggiornamento: Devi essere molto attenti che non consentono all'utente di effettuare chiamate a una funzione particolare nello script dipendente in questo caso. L'unico vantaggio che si può ottenere è un leggero miglioramento nel tempo di caricamento totale.
2. È possibile scaricare più di due file allo stesso tempo, solo se sono di diversi domini o sottodomini. Normali browser (compresi Firefox) può aprire solo fino a 2 connessioni simultanee HTTP a un dominio. Se si tenta di scaricare troppi file allo stesso tempo, si può anche assistere i colli di bottiglia. Quindi, utilizzare questo discrezione.
0 commenti:
Posta un commento