Tras los artículos sobre cómo optimizar los selectores en jQuery, otras formas de optimizar jQuery y optimizar la manipulación del DOM con jQuery, en este artículo, último de esta serie, vamos a tratar técnicas de optimización que se basan en no usar jQuery más de lo necesario, ya que utilizar simple javascript es mucho más rápido, así como técnicas para evitar que jQuery ejecute funciones de forma innecesaria.

En artículos anteriores vimos cómo optimizar los selectores en jQuery y otras formas de optimizar jQuery para conseguir un mejor rendimiento de nuestro código. En este artículo trataremos sobre la manipulación del DOM, una acción que es tan costosa que debe tratarse con mucho cuidado.

Recordar que, para la mayoría de proyectos no es necesario rehacer el código pero que siempre podemos tener en cuenta estas pautas en adelante.

En un artículo anterior vimos cómo optimizar los selectores en jQuery para conseguir un mejor rendimiento de nuestro código. En este artículo veremos varias técnicas que persiguen el mismo objetivo.

Como se explica en el anterior artículo, para la mayoría de proyectos es innecesario preocuparse de la optimización aunque, si bien la mejora no justifica rehacer el código de proyectos antiguos, siempre podemos realizar los nuevos siguiendo estas pautas. Además, algunas de las técnicas que se explican en este artículo, sí pueden suponer una gran mejora en los tiempos.

En este artículo veremos algunos consejos para aumentar el rendimiento y la velocidad de ejecución del código jQuery. En este primer artículo vamos a centrarnos en los selectores. Aunque para la mayoría de proyectos es innecesario preocuparse de la optimización, ya que el beneficio que se obtiene es ínfimo, para algunos proyectos en los que se hace un uso intensivo de javascript, unos milisegundos en cada acción pueden suponer una gran diferencia. Además, si bien la mejora no justifica rehacer el código de proyectos antiguos, siempre podemos realizar los nuevos siguiendo estas pautas.

Para asociar eventos a elementos HTML con jQuery basta con usar bind() (o cualquiera de sus variantes) en el elemento y, cuando se cargue el código javascript, el evento quedará asociado. El problema viene dado cuando el elemento al que queremos asociar un evento no existe en el momento de cargar el javascript, sino que será creado dinámicamente en algún momento. Hasta que el elemento exista, no se le pueden asociar eventos. En este artículo veremos cómo podemos solucionar este problema con la función on() de jQuery.