Archivos de Etiqueta: javascript

Javascript – rendimiento: generación de nuevo contenido

Gracias a la mejora que ha sufrido los motores de javascript de los navegadores y de la revolución que ha supuesto Ajax para el mundo del desarrollo web, cada vez se ha optado por generación del contenido sin la necesidad de recargar la página.

El problema, es que esta generación al vuelo, si no se hace bien, puede producir que nuestra página sufra grandes retardos e incluso a mucha gente le aparezca el contenido a golpes. Esto suele ser debido a que el contenido que se está generando, se está inyectando al DOM durante su proceso de creación. Esto provoca que recorramos continuamente al DOM. Veamos un ejemplo:

var accessDiv = document.getElementById('access');
for (var i = 0; i < 50; i++){
accessDiv.innerHTML += 'hola';
}

De siguiente forma, generamos el html y una vez generado, entonces lo introducimos en el DOM:

var html = '';
for (var i = 0; i < 50; i++){
html += 'hola';
}
document.getElementById('access').innerHTML = html;

Javascript – rendimiento: array.length

Seguimos con otro punto a tener en cuenta a la hora de mejorar el rendimiento de nuestro código javascript. Supongamos que queremos recorrer todo los elementos DIV de una determinada página.  Normalmente el código que haríamos sería el siguiente:

var elementosDiv = document.getElementsByTagName('div');
for (var i = 0; i <  elementosDiv.length; i++){
//Trabajar con el array elementosDiv[i]
}

En la variable elementosDiv guardamos un array con todos los elementos DIV que contiene en nuestra página. Después, vamos iterando sobre este array trabajamos con cada uno de los elementos que componen este array. El problema que tiene este código, es que la variable elementosDiv contiene un array de elementos vivos, es decir, contiene una referencia directa al objeto DOM de nuestra página. Si durante la ejecución del bucle se agrega un nuevo elemento DIV a la página, automáticamente elementosDiv.length valdrá lo que valía antes más uno. Esto nos indica que para cada iteración del bucle, nuestro código solicita que se cuenten cuantos elementos DIV tiene el objeto DOM, lo cual produce una gran carga al navegador.

Para evitar este comportamiento, es tan sencillo como guardar cuantos elementos DIV hay justo antes de comenzar con la iteración.

var elementosDiv = document.getElementsByTagName('div');
for (var i = 0, count = elementosDiv.length; i < count; i++){
//Trabajar con el array elementosDiv[i]
}

En este código, justo cuando se inicializa el bucle, se guarda en la variable count el número de elementos del array. De esta forma, ya no es necesario que en cada iteración del bucle se tenga que ir a contar el número de elementos DIV al objeto DOM.

Cargar Google Maps de forma asíncrona

Google Maps ha sido uno de los grandes inventos que se sacó Google de la manga. Normalmente para cargar Google Maps situamos una etiqueta <script> dentro de nuestra página con nuestra id del api de Google Maps. Luego modificamos la etiqueta <body> para que cuando se cargue el documento, ejecute una función para inicializar el mapa.

El problema que ya comenté en un post anterior (Cargar Google Analytics una vez se haya cargado la página), es que esto, en según que momentos, puede enlentecer de una forma muy grave nuestra página, o por ejemplo, el mapa lo tenemos en una pestaña que por defecto no es visible. Por ello, podemos obtar por una solución que incrementará sustancialmente la velocidad de carga de nuestra página y que se encargará de que, una vez se haya cargado la página, proceder a la descarga y la inicialización del nuestro Google Map.

Esta no es la única utilidad, también podríamos cargar nuestro Google Map a voluntad mediante la pulsación de cualquier elemento. Esto nos permitiría que en una página no cargásemos el Google Map hasta que el usuario decidiese utilizaro, aliviando la carga de nuestra página.

leer más »

Cargar Google Analytics una vez se haya cargado la página

Muchas veces nos encontramos con la situación de que a una página le cuesta terminar de cargar por culpa del Google Analytics. Yo lo he sufrido en mis propias carnes con proyectos de cierto tamaño. A pesar de la granja inmensa y poderosísima de servidores de Google, muchas veces por razones varias, este caso se da. También afecta a la situación de que si utilizas frameworks de Javascript como jQuery, el Google Analytics te para la carga del resto de elementos hasta que él no haya terminado su carga. El problema es que no podemos guardar en nuestro servidor el fichero ga.js o el fichero urchin.js que solicitamos a Google.

Podemos solventar el problema de una manera muy sencilla, cargar Google Analytics una vez se haya cargado el resto de las páginas. Esta situación tiene una ventaja muy grande, si Google Analytics se pone tontito, el resto de la página puede vivir en paz. A pesar de que lo voy a explicar a continuación se puede realizar de otras formas, voy a utilizar el framework jQuery por su sencillez y potencia.

leer más »

Videotutorial – Reducir javascript con PHP

Videotutorial sobre el tutorial para reducir ficheros javascript con PHP.

Duración: 13:03

leer más »

Reducir ficheros javascript con PHP

Uno de los problemas más habituales hoy en día en el desarrollo de páginas web es la utilización de múltiples ficheros Javascript. Estos ficheros a la mínima que la página sea algo grande, toman un peso muy significativo. Una de las premisas que siempre debemos tener en la cabeza es hacer que nuestra página cargue lo más rápido posible. (El addon para Firefox llamado YSlow que se integra con Firebug es muy útil para optimizar nuestra página).

Como toda buena práctica de programación, nuestro código incluye sangrías y comentarios. Si no ponemos sangrías nuestro código se hace incomprensible, y si le quitamos los comentarios, dentro de unos meses nos acordaremos de aquel día que decidimos no escribir una frase aclaratoria de que hacía aquella función.

leer más »