ottimizzazione del codice jquery-in-footer (teoria)

Question

Sto utilizzando vari plug-in jquery, incluso lazy-load, scrollTo, un effetto effetto immagine e vari frammenti raccolti dalla lettura di messaggi di persone su questo sito. Ora, tutti questi effetti vengono sparati, dal piè di pagina, e c'è un ritardo che sta accadendo. Gli effetti sono come, titubanti o nervosi o non lisci.

Mi sono divertito a usare il carico del documento rispetto al caricamento della finestra e ho un frammento nell'intestazione per prevenire FOUC, ma ho la sensazione che ci sia un problema di accodamento, sovraccarico della memoria o qualcosa del genere. (È come quando cerchi di usare il tuo laptop con troppi programmi in esecuzione, e tutto sembra pesante e lento.)

Soprattutto in Opera. Per qualche motivo è come se Opera non fosse in grado di gestire il mio sito.

Non ha senso per me che alcuni effetti jquery debbano porre questo problema. La gente gioca intensi videogames, nessun problema, eppure un sito web con un effetto fadeIn è improvvisamente troppo per i computer da gestire? Deve esserci qualcosa che sto facendo male con il mio codice footer.

Quindi sulla mia domanda teoria -

C'è come una pratica standard Ho bisogno di iniziare a seguire, per assicurarsi che tutti questi effetti jQuery funzionare meglio, divorare meno memoria, non siano in conflitto con l'altro, o qualsiasi altra cosa?

Answer 1

Per prima cosa è necessario capire se è il il codice JavaScript/jQuery che sta rallentando la pagina Web o se si tratta dei plug-in. In altre parole, profile il tuo codice.

Una volta fatto, è possibile iniziare l'ottimizzazione. Ci sono tonnellate di articoli là fuori che discutono l'ottimizzazione di jQuery.

• http://24ways.org/2011/your-jquery-now-with-less-suck
• http://hungred.com/useful-information/jquery-optimization-tips-and-tricks/
• http://addyosmani.com/blog/8-jquery-performance-tips/

Alcuni consigli:

• selettori di ID di per sé sono veloci dal momento che sono delegati a getElementById(), che è fortemente ottimizzato dal browser .
• Selettori jQuery cache. Cioè, non chiamare $('.class1 #id2 > child3') 10 volte di seguito. Salvalo su una variabile come var $mytd

Se l'errore si trova nel plug-in, le opzioni sono più limitate. Ma ci sono alcune cose che si possono provare:

• assicurarsi che siano ridotte di modo che caricano rapidamente (ma non si limita a prendere tempo per trasferire i file, ma anche da leggere in quanto non vengono compilati)
• Trova alternative leggere. per esempio. Se hai solo bisogno di un effetto di dissolvenza, non includere una libreria jQuery piena di 50 kb.

L'opera dovrebbe essere molto veloce, almeno da quello che sento. Tuttavia, se stai eseguendo il test usando IE, aspettati che sia lento. Il loro motore JavaScript non è molto buono.