optimización de código jquery-in-footer (teoría)

Question

Estoy usando varios plugins de jquery, incluyendo lazy-load, scrollTo, un efecto de imagen y varios fragmentos recogidos de la lectura de publicaciones de personas en este sitio. Ahora, todos estos efectos se disparan, desde el pie de página, y hay un rezago que está sucediendo. Los efectos son como, vacilante o nervioso o poco amable.

He jugado con el uso de documentos listos frente a la carga de ventanas, y tengo un fragmento en el encabezado para evitar el FOUC, pero tengo la sensación de que hay un problema de cola, sobrecarga de memoria o algo así. (Es como cuando intenta usar su computadora portátil con demasiados programas funcionando, y todo parece pesado y lento.)

Especialmente en Opera. Por alguna razón, es como si Opera no puede manejar mi sitio.

No tiene sentido para mí que algunos efectos de jquery representen un problema. La gente juega videojuegos intensos, no hay problema, y ​​sin embargo, un sitio web con efecto fadeIn de repente es demasiado para que las computadoras lo manejen. Debe haber algo que estoy haciendo mal con mi código de pie de página.

Así que mi pregunta en teoría -

¿Hay como una práctica estándar que tienen que empezar a seguir, para asegurarse de que todos estos efectos jQuery correr más suave, engullir menos memoria, no entran en conflicto entre sí, ¿o lo que sea?

Answer 1

Bueno, primero debe averiguar si es su código JavaScript/jQuery que está ralentizando la página web o si se trata de los complementos. En otras palabras, profile su código.

Una vez que haya hecho eso, puede comenzar a optimizar. Hay toneladas de artículos que discuten la optimización de 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/

Algunos consejos:

• selectores de identidad por sí mismos son rápidos, ya que se delegan a getElementById(), que está muy optimizado por el navegador .
• Selectores de caché jQuery. Es decir, no llame al $('.class1 #id2 > child3') 10 veces seguidas. Guárdelo en una variable como var $mytd

Si el error se encuentra en el complemento, las opciones son más limitadas. Sin embargo, hay algunas cosas que puede probar:

• asegurarse de que son miniaturizada para que se carguen rápidamente (que no sólo toma tiempo para transferir los archivos, sino también para leer, ya que no se compilan)
• Encuentra alternativas ligeras. p.ej. Si solo necesita un efecto de fundido, no incluya una biblioteca jQuery completa de 50 kb.

Opera debería ser muy rápido, al menos por lo que escuché. Sin embargo, si está probando con IE, espere que sea lento. Su motor de JavaScript simplemente no es muy bueno.