jQuery rallenta il rendering delle pagine Web di 100 ms o più?

Sto cercando di migliorare la velocità di caricamento della pagina di frontend per gli utenti e sto riscontrando che jQuery sta rallentando l'evento di DomContentLoaded di oltre 100 ms.jQuery rallenta il rendering delle pagine Web di 100 ms o più?

Sono un benchmarking su Windows 7 con Chrome 17 utilizzando un computer con un i5 2.5 Ghz, unità SSD e 8 GB di RAM. Il test viene eseguito sul mio computer locale. Sono preoccupato che la bassa velocità che vedo sulla mia macchina sarà ancora più lenta nei computer e nei browser più vecchi.

Questa è solo la sanzione standard per l'utilizzo di jQuery o esiste un modo per accelerare le prestazioni che mi mancano?

Ecco il codice che sto usando:

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      console.time("DOMContentLoaded"); 
     </script> 
    </head> 
    <body> 
     <h1>Hello World</h1> 

     <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script> 

     <script type="text/javascript"> 
      document.addEventListener("DOMContentLoaded", ready, false); 

      function ready() { 
       console.timeEnd("DOMContentLoaded"); 
      } 
     </script> 
    </body> 
</html>

Sulla console, il tempo che vedo è di circa ~ 100 ms.

Quando rimuovo la riga che carica jQuery, il tempo è circa ~ 1 ms.

Ho anche provato il codice di cui sopra utilizzando il Google CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Il risultato è in gran parte la stessa.

C'è sempre una penalità di 100ms per l'utilizzo di jQuery? C'è qualcosa che mi manca? Grazie!

fonte

2012-03-10 Chris

Provare a mettere il codice all'interno del DOM pronto con jQuery: '$ (pronto);' – gdoron

Hi gdoron: questo ritardo di 100 ms sembra essere sufficiente per caricare jQuery, senza eseguire effettivamente altro javascript. Sembra che sarebbe di aiuto solo per javascript aggiuntivi. – Chris

Questo recente articolo potrebbe essere pertinente ai tuoi interessi: "[Smetti di pagare la tassa jQuery] (http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax)" di @ [ Sam Saffron] (http://stackoverflow.com/users/17174/sam-saffron) – Piskvor

-3

Il rallentamento che si vede è dovuto al fatto che il browser deve prima scaricare la libreria jQuery. Questa è la "penalità" che ottieni quando includi qualsiasi javascript esterno. Non ha nulla a che fare con jQuery.

È possibile ridurlo a icona utilizzando un caricatore di script come require.js.

fonte

2012-03-10 21:49:48 blockhead

Tuttavia ha qualcosa a che fare con jquery. Anche se si carica l'intera cosa come un file locale, c'è tempo di analisi per jquery, come minimo potrebbe essere. – jdi

Hi blockhead: nei test stavo caricando jQuery localmente. Ho anche provato a caricarlo dal CDN di Google e a misurare l'ora nei successivi caricamenti della pagina quando la libreria era già stata memorizzata nella cache. – Chris

Ogni volta che si carica una libreria JS di grandi dimensioni come jQuery, si verificherà un piccolo problema. Personalmente, direi che 100 ms non è molto, bisogna tenere a mente TUTTI i fattori che portano a questo:

Si sta calcolando il tempo, il carico richiede tempo.
La connessione di rete suona un fattore (c'è un documento di analisi, effettua una richiesta, aspetta una risposta). La latenza della connessione deve essere presa in considerazione (utilizzare http://http://pingtest.net/ per verificare la latenza e sottrarla dai 100 ms + per avere un'idea migliore del risultato effettivo).
Un corretto controllo della cache sul server Web può eliminare completamente il numero 2, configurare quel server in modo che il file scada solo una volta al mese circa. Questa intestazione verrà quindi passata con il file in modo che il browser dell'utente la carichi solo una volta al mese. Continuerai a sostenere la piccola richiesta sul caricamento della prima pagina, ma almeno le successive richieste di pagina la estrarranno dalla cache locale riducendo questa volta.
C'è un tempo di esecuzione dell'analisi; L'INTERO file jQuery deve essere analizzato ed eseguito. Minifying riduce solo le dimensioni e quindi la larghezza di banda necessaria per il trasferimento (che equivale al tempo basato sulla velocità di connessione) ... la minimizzazione fa molto poco per ridurre il tempo di analisi (i motori JS moderni come il V8 sorvolano commenti e spazi bianchi come se non fossero anche lì).

Tenete a mente, che la maggior parte delle pagine non avranno quasi quanto personalizzato JS (sulla base di jQuery) come la biblioteca vera e propria, quindi, anche una pagina intensamente interattivo vedrà solo pochi [dozzina] millisecondi supplementari sovraccarico su ciò che la biblioteca stessa ha già imposto.

Come per le persone con macchine/browser vecchi; è probabile che stiano sperimentando scarse prestazioni in ogni pagina che visitano. Il web è un luogo dinamico, devi stare al passo se vuoi avere una buona esperienza. C'è solo così tanto che puoi fare per i luddisti.

fonte

2012-03-10 21:51:20

Ciao Gregory - nei punti 2 e 3, avrei dovuto notare che stavo eseguendo il test localmente e usando un disco rigido SSD, quindi la latenza dovrebbe essere minima. – Chris

Localmente da un SSD certamente non si avvicina a nessun sovraccarico. Ottenere risultati simili dal CDN di Google, penso, dimostra abbastanza bene che a causa di analisi/esecuzione, probabilmente non miglioreresti ... Sono ancora al mio ultimo paragrafo :) –

La mia ipotesi è che il ritardo è dovuto per l'analisi di jQuery. Devi proababilmente voler guardare il carico della pagina usando webpagetest.org, o HTTPWatch per vedere questo ritardo piuttosto che affidarti a javascript per risolverlo (che potrebbe introdurre altri problemi con la breve durata di cui stiamo parlando) –

jQuery è un file 92K. Devi caricarlo e analizzarlo.

Ho ospitato il tuo esempio su studio831.com/jquery_test/index.html, cdn.html e dom_ready.html.

È possibile visualizzare gli orari di ciascun Take per il download. Puoi anche utilizzare gli strumenti di sviluppo di Chrome per visualizzare la suddivisione per quanto tempo impiegano i download.

fonte

2012-03-10 21:51:47

Questi funzionano esattamente allo stesso modo per me una volta che il jQuery è stato memorizzato nella cache. Le ricariche multiple si comportano allo stesso modo in termini di tempo impiegato per analizzare jquery. – jdi

sì, come previsto. –

jQuery rallenta il rendering delle pagine Web di 100 ms o più?

risposta

Problemi correlati