Acelarándo la carga de Javascript con eval()
A traves del blog de anieto2k nos encontramos con este exelente articulo relacionado a mejorar la velocidad de carga de nuestras paginas web usando la funcion eval().
La fuente original es el blog de SproutCore, aunque en el blog de anieto2k encontramos explicado todo en detalle en español. A continuacion podran ver su uso:
El problema
El problema radica en que las aplicaciones muy ricas en Javascript suelen ser muy pesadas para el procesador y el navegador, despues de descargar el JS, parsear el script lo ha de evaluar (internamente) para poner a nuestra disposición todas las funcionalidades que hayamos desarrollado, en este último punto es donde más se penaliza la ejecución de JS (hasta un 80% del tiempo de carga total).
La propuesta
Para solventar el problema, nos propone cargar el Javascript de una forma diferente, en lugar de código usar comentarios. Osea, hacer que todo el código Javascript sea un gran comentario.
/*
function mifuncion(){
....
}
var lala = mifuncion();
lala.prototype.bla = function(){
...
}
....
*/
Explicación
Al tratarse de un comentario el navegador no lo evalua y nos ahorramos un tiempo de carga muy valioso y podemos hacer que la carga del código sea cosa nuestra haciendo uso únicamente de él cuando lo necesitemos. Esto nos permite tener un control sobre el Javascript que está ejecutado en todo momento.
Como vemos en el gráfico, la evaluación de comentarios es ligeramente menor a la de una cadena de texto y muy menor a la de funciones.
En dispositivos móviles este tiempo parece más significativo como podemos ver en la imagen siguiente:
Implementándolo
<html>
[...]
<!-- Javascript que será ejecutado posteriormente -->
<script id="lazy">
/*
Código Javascript
*/
</script>
[...]
<script>
// Función encargada de recoger el contenido del <script id="lazy" /> y evaluarlo
function lazyLoad() {
var lazyElement = document.getElementById('lazy');
var lazyElementBody = lazyElement.innerHTML;
var jsCode = lazyElementBody.replace(/(\/\*|\*\/)/g,''); // Eliminamos (/*|*/)
eval(jsCode);
}
</script>
[...]
<!-- Activamos la carga del JS al hacer click-->
<div onclick=lazyLoad()> Lazy Load </div>
</html>Como vemos en el código, el sistema básicamente lo que hace es cargar el javascript como un tag con un el código Javascript comentado completamente por lo que el navegador lo omitirá en el momento de evaluarlo.
lazyLoad() se encarga de coger el innerHTML del elemento que hemos cargado previamente con el javascript comentado, elimina los carácteres que indica que sea un comentario (en el ejemplo elminará todos los carácteres /* y */ del innerHTML, por que hay que usarlo con cabeza) y posteriormente lo evalua con eval().
Resultado
La ventaja de este sistema es que nos permite ejecutar ese código cuando queremos y no cuando está cargando la página, mayor control y sobretodo mayor velocidad global de la aplicación.
En los ejemplo de SproutCore obtienen una mejoría de entre 3x y 20x frente a la versión de carga secuencial de Javascript.
Entradas Recientes
- Formularios para carga de archivos usando JQuery
- iPad GUI PSD
- BBVA Open Talent
- Buscar más de 13.000 fuentes gratis de alta calidad
- FormToWizard: Formularios largos paso a paso con Jquery
- Gestión de eventos vs Delegación de eventos
- 250 iconos navideños
- Análisis de XML con javascript: jParse
- 9 Texturas de Madera en alta resolucion
- Insertar y personalizar Google Maps en tu sitio web