Seis mejores prácticas de jQuery para mejorar el rendimiento
jQuery es uno de la Las bibliotecas de JavaScript más populares hoy en día. Su API es muy fácil de usar, lo que lleva a una curva de aprendizaje no tan pronunciada. Una gran cantidad de proyectos utilizan el código jQuery en lugar de usar directamente el JavaScript de vainilla para incorporar funcionalidades dinámicas.
Pero jQuery también tiene sus defectos.. Puede llevar a algunos problemas de rendimiento si se usa sin cuidado Al igual que el lenguaje en el que se basa. Esta publicación enumerará algunas de las mejores prácticas en el uso de jQuery que nos ayudarán a evitar cualquier problema de rendimiento..
1. Lazy cargar scripts cuando sea necesario
Los navegadores ejecutan JavaScript antes de crear el árbol DOM y pintar los píxeles en la pantalla, ya que los scripts pueden agregar nuevos elementos a la página o cambiar el diseño o el estilo de algunos nodos DOM. Entonces por dando al navegador menos scripts para ejecutar durante la carga de la página, podemos reducir el tiempo que lleva para la creación y pintura final del árbol DOM, después de lo cual el usuario será poder ver la página.
Una forma de hacer esto en jQuery es usando $ .getScript para cargar cualquier archivo de script en el momento de su necesidad en lugar de durante la carga de la página.
$ .getScript ("scripts / gallery.js", devolución de llamada); Es una función ajax que obtendrá un solo archivo de script cuando lo desee, pero tenga en cuenta que el archivo recuperado no se almacena en caché. Para habilitar el almacenamiento en caché para GetScript Tendrá que habilitar el mismo para todas las solicitudes ajax. Puedes hacerlo usando el siguiente código:
$ .ajaxSetup (cache: true);
2. Evitar $ (ventana) .load () Si tu script no necesita sub-recursos de la página.
los $ (documento) .ready () es equivalente a DOMContentLoaded (dónde DOMContentLoaded está disponible) y $ (ventana) .load () a Carga. El primero se activa cuando se carga el propio DOM de una página, pero no activos externos como imágenes y hojas de estilo. El segundo se activa cuando todo está compuesto por una página, incluido su propio contenido y sus sub-recursos..
Por lo tanto, si está escribiendo un script que se basa en los sub-recursos de una página, como cambiar el color de fondo de un div que está diseñado por una hoja de estilo externa, es mejor usar $ (ventana) .load ().
Pero, si ese no es el caso, es mejor atenerse a $ (documento) .ready () porque, jQuery llama a su Listo manejador de eventos si usas $ (documento) .ready () o no, así que úsalo cuando puedas.
3. Use despegar para eliminar elementos de DOM que necesitaban ser cambiados.
“Reflujo” es un término que se refiere a los cambios de diseño en una página web, es cuando el navegador reorganiza los elementos de una página para acomodar un nuevo elemento, ajustarse a los cambios estructurales de un elemento, rellenar el espacio dejado por un elemento eliminado o alguna otra acción que necesite una cambio de diseño en la página. el reflujo es un costoso proceso del navegador.
Podemos reducir el no. de los reflujos causados por cambios estructurales en un elemento al realizar los cambios en él después sacándolo del flujo de páginas y devolviéndolo cuando esté listo. Si agrega varias filas a una tabla una por una, causará muchos reflujos. Así que es mejor saque la tabla del árbol DOM, agréguele las filas y vuelva a colocarla en el DOM; esto reducirá los reflujos.
jQuery despegar() nos permite eliminar un elemento de la página, es diferente de retirar() porque guardará los datos asociados con el elemento para cuando sea necesario agregarlos a la página más adelante. Un elemento separado se puede volver a colocar en la página cuando se haya modificado..
4. Utilizar css () para establecer la altura o el ancho en lugar de altura() y anchura()
Si está configurando la altura o el ancho de un elemento en jQuery, le sugiero que use el css () función porque la configuración de esos valores utilizando altura() y anchura() provocará reflujos adicionales debido al acceso de algunas propiedades de diseño en la función computeStyleTests en jQuery (probado en la última versión).
Para el codigo p.height ("300px"); aquí están los reflujos.
por p.css ("height": "300px");
computeStyleTests Se utiliza para hacer algunas pruebas de soporte. También se llama mientras consiguiendo la altura y anchura utilizando ambos css () y anchura altura() , pero para ajuste solo es necesario para anchura altura() que puede no ser necesario, así que use css () en lugar.
5. No acceder a las propiedades de diseño innecesariamente
El acceso a las propiedades de diseño como la altura, el ancho, el margen, etc. provocará un reflujo en la página. El motivo es que cada vez que solicite al navegador alguna de las propiedades de diseño, se asegura de obtener el valor actualizado (En caso de que el valor haya sido invalidado anteriormente) por Recalcular los valores y aplicar los cambios de diseño..
Así que si estás usando jQuery o vanilla JavaScript, cuidado con acceder a las propiedades de diseño innecesariamente Especialmente en un bucle o en consecuencia después de hacer cambios de estilo..
6. Haz uso del caché donde puedas
Algunas de las funciones de jQuery vienen con mecanismos de almacenamiento en caché que se pueden utilizar. Las solicitudes de Ajax guardan en caché los recursos, pero no está disponible para guión y jsonp, así que si desea almacenar en caché en todas sus solicitudes de ajax, es posible que desee configurarlo globalmente como abajo.
También tenga en cuenta que si obtiene recursos utilizando enviar no se almacenará en caché incluso si habilita el almacenamiento en caché con la configuración anterior.
Como mencione antes, despegar() almacena en caché los datos asociados con el elemento a eliminar a diferencia retirar();esconder() almacena en caché el CSS inicial monitor El valor de un elemento antes de ocultarlo para que pueda restaurarse más tarde sin perder los datos..
Conclusión
Una forma en la que puede estar seguro de que está utilizando el código jQuery más efectivo para su necesidad es esperar hasta que haya ejecutado su código y haya notado si hay algún problema de rendimiento o no. Si hay, use las herramientas de rendimiento y depuración para Detectar la raíz del problema..
Ya que jQuery es como un capullo para JavaScript con funcionalidades adicionales para las compatibilidades y características del navegador, puede ser difícil diagnosticar los problemas sin estas herramientas..
