Inizio Interfaccia utente sul blog (YUIBlog)

In Galleria 3 YUI: Il modulo Preload

Qualche settimana fa, Stoyan Stefanov ( @ stoyanstefanov ) ha pubblicato il risultato della sua ricerca sulla precarico componenti in anticipo senza eseguirli . Questa tecnica può aiutare a migliorare le prestazioni delle pagine successive che fanno uso delle risorse memorizzate nella cache.

Per sfruttare questi risultati, abbiamo deciso di portarlo a YUI 3 con un nuovo modulo chiamato " galleria-precarico ", che è ora disponibile tramite il Loader YUI.

Vediamo un esempio precarico :

  YUI ({
     / / Galleria Ultimo Costruire di questo modulo
     galleria: 'galleria-2010.05.05-19-39'
 }). Uso ('galleria-precarico', function (Y) {
   Y.preload ([
     'Http://tools.w3clubs.com/pagr2/1.sleep.expires.png',
     'Http://tools.w3clubs.com/pagr2/1.sleep.expires.js',
     'Http://tools.w3clubs.com/pagr2/1.sleep.expires.css'
   ]);
 }); 

Come funziona questo modulo migliorare l'esperienza degli utenti?

Al giorno d'oggi, le applicazioni web hanno un ingombro di grandi dimensioni in termini di JavaScript, CSS e le immagini. La maggior parte dei file in ciascuna di queste categorie sono statici e possono essere serviti attraverso un CDN per mettere in cache. Una volta che uno di questi file viene scaricato e memorizzato nella cache, il browser non ha bisogno di scaricare lo stesso file in richieste successive per la stessa pagina. Ma ancora, abbiamo un grande impatto nella richiesta della pagina iniziale.

Studi recenti suggeriscono che 0,1 secondi [100 ms] è di circa il limite per avere l'utente sente che il sistema reagisce istantaneamente, oltre che renderanno gli impazienti utente (Jakob Nielsen). Lo stesso vale per il processo di caricamento. Abbiamo bisogno di rendere le nostre applicazioni o corrono veloci per stare al passo con le aspettative dei nostri utenti.

Con le applicazioni web come Facebook o Gmail, l'utente ha il log-in per primo. Questo è uno scenario classico in cui "precarico" ha senso. Possiamo stimare che ogni utente spenderà tra 5 e 10 secondi interagendo con un modulo. Durante questo periodo, la nostra applicazione non fa nulla. Se possiamo usare questo tempo per caricare i file cacheable in background, i file saranno disponibili nella cache quando l'utente completa il processo di login - perché sappiamo dove s / sta andando prossimo, sappiamo esattamente che cosa s / avrà bisogno. In generale, qualsiasi applicazione web con i percorsi degli utenti prevedibile (anche sotto forma di flussi di lavoro) possono sfruttare questa tecnica.

Questa tecnica non è nuova, ma, come Stoyan sottolineato, è difficile farlo senza eseguire gli script o iniettando il CSS o la visualizzazione di immagini stesse, c'è un costo associato con questi post-carico passi, e dovremmo evitare pagare quel costo. Inoltre, in alcuni casi, questi file non si gioca bene con la pagina iniziale. Al fine di evitare conflitti e ridurre al minimo il tempo di mettere una soluzione a posto, avremmo bisogno di garantire che questi file vengono inclusi nella cache senza utilizzare nella pagina corrente.

Questo processo deve essere completamente innocuo, e anche se l'utente naviga o si arresta il processo di caricamento prima che il file vengono scaricati e memorizzati nella cache, il ripiego è sempre nel posto - la pagina di destinazione si tenta di caricare il file direttamente.

Il codice seguente mostra come implementare questo approccio con la gallery-preload modulo:

  YUI ({
     / / Galleria Ultimo Costruire di questo modulo
     galleria: 'galleria-2010.05.05-19-39'
 }). Uso ('evento a fuoco', 'galleria-precarico', function (Y) {
   / / Attesa finché l'utente non si concentra su un elemento di input per iniziare le attività di carico
   Y.on ("focus", function () {
     Y.preload ([
       'Http://tools.w3clubs.com/pagr2/2.sleep.expires.png',
       'Http://tools.w3clubs.com/pagr2/2.sleep.expires.js',
       'Http://tools.w3clubs.com/pagr2/2.sleep.expires.css'
     ]);
   } ". Myform input.query");
 }); 

In questo esempio, lo script attende che l'utente si concentra su uno degli elementi di input del modulo per avviare il caricamento attività che sarà utilizzato in pagina di destinazione del form. Ciò permetterà di migliorare il tempo di caricamento della pagina una volta che l'utente invia il modulo.

Verificare le differenze tra l'accesso a una pagina direttamente e precarico una serie di YUI 2/YUI 3 componenti prima del tempo:

Compresi poche righe di codici a precarico questo insieme di componenti permette di caricare questa pagina quattro volte più veloce. Non sono necessarie modifiche nella logica della vostra applicazione, e non è necessario modificare la pagina di destinazione ... una performance economico ed efficace tweak.

Una caratteristica in più:

Abbiamo anche incluso una funzione più avanzata per coloro che vogliono essere meno aggressivo. Il modulo include un built-in integrazione con il modulo timer di inattività Nicola Zakas ' ; Timer inattività ci consente di precaricare i file solo se l'utente è inattivo per un determinato periodo di tempo. Ecco un esempio:

  YUI ({
     / / Galleria Ultimo Costruire di questo modulo
     galleria: 'galleria-2010.05.05-19-39'
 }). Uso ('galleria-precarico', function (Y) {
   / / File precarico solo quando l'utente è inattivo per almeno 100ms
   Y.preloadOnIdle ([
     'Http://tools.w3clubs.com/pagr2/3.sleep.expires.png',
     'Http://tools.w3clubs.com/pagr2/3.sleep.expires.js',
     'Http://tools.w3clubs.com/pagr2/3.sleep.expires.css'
   ], 100);
 }); 

Conclusioni:

E 'importante essere davanti a nostri utenti. Conoscendo il flusso di lavoro delle nostre applicazioni web, e sfruttando questa tecnica precarico ci aiuterà a migliorare l'esperienza complessiva dell'utente. E 'anche importante farlo senza aumentare la complessità delle nostre applicazioni. Questo nuovo componente ( gallery-preload ) garantisce a entrambi gli obiettivi.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!