5 prácticas para mejorar el rendimiento de jQuery

jQuery es una de las librerías más populares de JavaScript hoy en día. Su API es muy sencilla de utilizar y cuenta con una curva de aprendizaje no muy pronunciada. Multitud de proyectos utilizan código jQuery en lugar de utilizar directamente vainilla JavaScript para conseguir funcionalidades dinámicas.

Pero jQuery tiene sus defectos también. Puede acarrear algunos problemas de rendimiento si no se utiliza como el lenguaje en el que se basa. En este post voy a enumerar algunas prácticas en el uso de jQuery que nos ayudarán a evitar cualquier problema de rendimiento.

Cargar scripts cuando se necesiten

Los navegadores ejecutan JavaScript antes de crear el árbol DOM y pintar los píxeles en pantalla, ya que los scripts pueden añadir nuevos elementos a la página o cambiar el diseño o el estilo de algunos nodos DOM. Así, dándole al navegador menos scripts a ejecutar durante la carga de la página, podemos reducir el tiempo que tarda en crear el árbol DOM y mostrarlo todo, después de lo cual el usuario será capaz de ver la página.

Una forma de hacer esto en jQuery es mediante el uso de $.getScript para cargar cualquier script en el momento que se necesite en lugar de durante la carga de la página.

$.getScript( "scripts/gallery.js", callback);

Es una función AJAX que obtendrá un único script cuando lo desee, pero ten en cuenta que el archivo recuperado no se almacena en caché. Para habilitar el almacenamiento en caché para getScript lo tendrás que activar para todas las peticiones Ajax. Puedes hacerlo utilizando el código de más abajo:

$.ajaxSetup({
 cache: true
});

Evitar $(window).load() si tu script no necesita ningún sub-recurso de la página

$(document).ready() es equivalente a DOMContentLoaded (cuando DOMContentLoaded está disponible) y $(window).load() para Load. El primero de ellos se activa cuando se carga el DOM propio de una página, pero no cuando se cargan assets externos como imágenes y hojas de estilo. El segundo se activa cuando la página se ha cargado completamente, incluyendo el propio contenido y sus sub-recursos.

Por lo tanto, si estás desarrollando un script que se basa en una página de sub-recursos, como uno que cambie el color de fondo de un div que está personalizado por una hoja de estilo externa, es mejor utilizar $(window).load().

Pero, si no es el caso, es mejor atenerse a $(document).ready() porque, jQuery llama a su controlador de eventos ready tanto si se usa $(document).ready() como si no, a fin de utilizarlo cuando pueda.

Usar detach para eliminar elementos del DOM que necesitaban ser modificados

"Reflow" es un término utilizado en los cambios de diseño de una página web. Es cuando el navegador reordena los elementos de una página para dar cabida a un nuevo elemento, adaptarse a los cambios estructurales de un elemento, llenar el hueco dejado por un elemento eliminado, o alguna otra acción que necesita un cambio de diseño en la página. El reflow es un proceso costoso para el navegador.

Podemos reducir el número de reflows causado por los cambios estructurales de un elemento mediante la realización de los cambios después de extraerlo del flujo de la página y volviéndolo a colocar cuando esté realizado. Si vas a añadir varias filas a una tabla, una por una, vas a causar una gran cantidad de reflows. Así que, lo mejor para sacar la tabla del árbol DOM, es añadir las filas a la misma y ponerlo de nuevo en el DOM, esto reducirá los reflows.

detach() de jQuery nos permite eliminar un elemento de la página. Es diferente de remove() porque guarda los datos asociados al elemento por si necesitas añadirlo a la página más tarde. Un elemento en el que se ha aplicado detach() puede ponerse de nuevo en la página aunque se haya modificado.

Usar css() para establecer el alto o ancho, en vez de width() y height()

Si vas a establecer la altura o anchura de un elemento con jQuery, te sugiero que utilices la función css(), ya que hacerlo utilizando el width() y height() generará reflows adicionales debido a que accede a algunas propiedades del diseño en la función de jQuery computeStyleTests.

computeStyleTests se utiliza para hacer ciertas pruebas. También se le llama cuando obtenemos la altura y el ancho utilizando css() y height () /width(), pero para “setting” sólo se llama para el height () / width(), que puede ser que no sea necesario, a fin de utilizar css() en su lugar.

No acceder a las propiedades de diseño innecesariamente

Acceder a las propiedades del diseño como la altura, ancho, margen, etc. desencadenará en reflows en la página. La razón de esto es que cada se solicita al navegador cualquier propiedad del diseño, se asegura que tenga el valor actualizado (en caso de que el valor ha sido invalidado antes), recalculando los valores y aplicando los cambios al diseño.

Así que si estás usando jQuery o Vanilla JS, ten cuidado de acceder a las propiedades del diseño innecesariamente sobre todo en un bucle, después de hacer cambios en el estilo.

Fuente: hongkiat

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP