Rimandare JavaScript in caricamento

Ho ascoltato e letto alcuni articoli sul rinvio del caricamento di JavaScript e sono molto interessato. Sembra essere molto promettente per le app Web che potrebbero essere utili su piattaforme mobili in cui la quantità di JavaScript che può essere caricata ed eseguita è limitata.Rimandare JavaScript in caricamento

Sfortunatamente, la maggior parte degli articoli parla di questo ad un livello estremamente alto. Come ci si avvicina a questo?

EDIT

Normalmente, tutti JavaScript è caricato al caricamento della pagina, tuttavia, ci possono essere funzioni che non sono necessari finché non si verifica una certa azione, momento in cui, deve essere caricato il JavaScript. Questo aiuta a ridurre il carico del browser al caricamento della pagina.

In particolare, ho una pagina che usa molto JavaScript. Quando carico la pagina sul mio telefono, non si caricherà correttamente. Mentre eseguivo il debug della pagina, ho eliminato alcune delle funzioni JS. Una volta eliminato abbastanza, la pagina ha funzionato all'improvviso.

Desidero poter caricare il JS in base alle esigenze. E possibilmente anche eliminare le funzioni semplicemente utilizzate per l'avvio.

fonte

2011-09-01 steveo225

stai cercando di ritardare il caricamento di esecuzione di codice JavaScript o il browser carica un file js? Se la prima funzione di jquery.ready farebbe ciò che si desidera – Eonasdan

Le basi sono semplici: suddividere il codice JavaScript in componenti logicamente separati e caricare solo ciò di cui hai bisogno. A seconda di cosa si sta costruendo è possibile utilizzare:

Pale usate:

Modernizr.load (o yepnope.js da solo)
LABjs
Many, many, many altre librerie di carico differito.

manager di dipendenza (che sono anche caricatori):

Require.js
dojo.require
JavaScript MVC's steal.js
Diverse altre biblioteche gestione delle dipendenze.

Questi strumenti fanno uso di una vasta gamma di tecniche di differire il caricamento di script, l'esecuzione di script, gestire le dipendenze, ecc Quello che vi serve dipende da ciò che si sta costruendo.

Si consiglia inoltre di leggere this discussion per ulteriori informazioni sui pro e contro dell'utilizzo di tali tecniche.

Risposta da modificare:

In realtà non è un buon modo per scarico JavaScript che è già stato caricato - l'approssimazione più vicina si può arrivare è quello di mantenere tutto il codice di carico namespace nello spazio dei nomi dell'applicazione e quindi "ripulire" impostando tale spazio dei nomi e tutti i riferimenti ad esso su null.

fonte

2011-09-01 14:56:52

se si utilizza un approccio AMD o commonJS (requirejs e backdraft utilizzano AMD), il JS caricato viene associato a una variabile locale.Quando ciò non rientra nel campo di applicazione, a condizione che non vengano conservati riferimenti, viene raccolta la garbage collection, quindi la struttura del codice può gestire il modo in cui i pacchetti vengono mantenuti. – peller

Questo commento è leggermente fuorviante, quindi ho pensato di chiarire. CommonJS e AMD non fanno nulla di speciale per aiutare il tuo codice di garbage collection. Nella migliore delle ipotesi, la funzione di callback in AMD è una chiusura e quindi tutte le variabili sono associate a tale chiusura per la raccolta di dati inutili (supponendo che non siano state esposte funzioni che potrebbero contenere il contesto della chiamata della funzione di chiusura. un IIFE come fa la maggior parte delle persone nel loro codice. Per IIFE, intendo il wrapping del codice in (function() {... your code here ...}()); –

Posticipazione caricamento quando? Il motivo in genere per il quale JS è stato caricato per ultimo, è che l'intero DOM è stato caricato per primo.

Un modo semplice è usare solo

<body onload="doSomething();">

Così si potrebbe facilmente avere doSomething() funzione per caricare tutti i vostri JS.

È inoltre possibile aggiungere una funzione per window.onload, come

window.onload = function(){ };

Inoltre, se si utilizza librarys JS, come ad esempio jQuery e Dojo, ognuno ha le proprie onReady e addOnLoad metodi in ordine per eseguire alcuni JS solo dopo che il documento è già stato caricato.

fonte

2011-09-01 14:56:12 Layke

Ecco lo a useful article sugli attributi di postincronizzazione e asincrono dell'elemento di script. Specificando questi attributi, il browser può differire il caricamento in modi diversi. Puoi caricare anche uno script esterno utilizzando JavaScript dopo il caricamento della pagina.

Si noti inoltre che la posizione degli elementi di script nel documento HTML determinerà il carico e l'ordine di esecuzione se non sono stati specificati né posticipo né asincrono.

fonte

2011-09-01 14:57:42 Spycho

Ho usato un semplice script pubblicato in linea con alcune modifiche apportate da me. Assumendo che il file Javascript COMPRESSED sia nella directory della cache nel server web e si voglia rinviare il caricamento di questo file js compresso.

Il file js compressa:

80aaad2a95e397a9f6f64ac79c4b452f.js

Questo è il codice codice html:

<script type="text/javascript" src="/resources/js/defer.js?cache=80aaad2a95e397a9f6f64ac79c4b452f.js"></script>

Questo è il contenuto del file defer.js:

(function() { 

    /* 
    * http://gtmetrix.com/ 
    * In order to load a page, the browser must parse the contents of all <script> tags, 
    * which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, 
    * and deferring parsing of unneeded JavaScript until it needs to be executed, 
    * you can reduce the initial load time of your page. 
    */ 

    // http://feather.elektrum.org/book/src.html 
    // Get the script tag from the html 
    var scripts = document.getElementsByTagName('script'); 
    var myScript = scripts[ scripts.length - 1 ]; 

    // Get the querystring 
    var queryString = myScript.src.replace(/^[^\?]+\??/,''); 

    // Parse the parameters 
    var params = parseQuery(queryString); 

    var s = document.createElement('script'); 
    s.type = 'text/javascript'; 
    s.async = true; 
    s.src = '/cache/' + params.cache; // Add the name of the js file 

    var x = document.getElementsByTagName('script')[0]; 
    x.parentNode.insertBefore(s, x); 

    function parseQuery (query) { 
     var Params = new Object(); 
     if (! query) return Params; // return empty object 
     var Pairs = query.split(/[;&]/); 
     for (var i = 0; i < Pairs.length; i++) { 
      var KeyVal = Pairs[i].split('='); 
      if (! KeyVal || KeyVal.length != 2) continue; 
      var key = unescape(KeyVal[0]); 
      var val = unescape(KeyVal[1]); 
      val = val.replace(/\+/g, ' '); 
      Params[key] = val; 
     } 
     return Params; 
    } 
})();

vorrei grazie grazie a http://feather.elektrum.org/book/src.html che mi ha aiutato a capire come ottenere i parametri dal tag dello script.

bye

fonte

2012-10-30 10:57:14 Michelangelo

Rimandare JavaScript in caricamento

risposta

Problemi correlati