TYPICO DE: PEGASUS

<script src=”my own” title=”typico de: pegasus”>

Os saludo gente, disculpándome de antemano por la tardanza. Hace tiempo ya que no publico nada en el blog y se me hace que no voy a llegar a superar las visitas del mes pasado 😳 (¡pero un millón de gracias de nuevo! :mrgreen: ).

Pero nada, a lo que vengo.

pegasus, carga asíncrona de datos en Javascript

Para este post, voy a utilizar pegasus, una librería de la gente de typicode que se encarga de la resolución de peticiones AJAX de forma diferida, permitiendo que la carga de los scripts javascript sea mucho más rápida. Vale decir que puede ser utilizada con cualquier librería sin interrumpir su normal funcionamiento.

Para ambos escenarios, usaré la versión CDN de jQuery y una petición AJAX simple a una página de prueba llamada jsonplaceholder, creada y soportada también por la gente de typicode. La intención es medir los tiempos de carga, ejecución y rendimiento de la aplicación sin pegasus y con pegasus. ¡Manos a la ubre!

Escenario uno, sin pegasus

Un archivo html con lo descrito:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
	<title>Pegasus Test</title>
</head>
<body>
	<script>
		var root = 'http://jsonplaceholder.typicode.com';
		var marca = 'Sin pegasus';

		console.time(marca);
		var request = $.ajax({
			url: root + '/posts',
			method: 'GET'
		});
	</script>
	<h1>Prueba de Scripts</h1>
	<script>
		request.then(function(data) {
			console.log('Data cargada!');
		});
		console.timeEnd(marca);
	</script>
</body>
</html>

NOTA: console.time() y console.timeEnd() son usados para medir el tiempo de ejecución de código Javascript mediante una diferencial de tiempo, puedes ver este post para más información al respecto.

TIempo de Carga

TIempo de Ejecución (Sin pegasus)

Tiempo de Rendimiento

Tiempo de Rendimiento (Sin pegasus)

Escenario dos, con pegasus

Algunas modificaciones al archivo script.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
	<script src="https://raw.githubusercontent.com/typicode/pegasus/master/dist/pegasus.js"></script>
	<title>Pegasus Test</title>
</head>
<body>
	<script>
		var root = 'http://jsonplaceholder.typicode.com';
		var marca = 'Sin pegasus';

		console.time(marca);

		var request = pegasus(root+'/posts');
	</script>
	<h1>Prueba de Scripts</h1>
	<script>
		request.then(function(data) {
			console.log('Data cargada!');
		});
		console.timeEnd(marca);
	</script>
</body>
</html>

NOTA: Estoy usando Firefox for Developers Edition, versión Aurora 41.2 sin ningún aditivo (o sea, sin Firebug) para las pruebas.

TIempo de Ejecución (Con pegasus)

TIempo de Rendimiento (Con pegasus)

TIempo de Rendimiento (Con pegasus)

Conclusiones

Sólo puedo decir: ¡Uau! De 27.06 a 4.48ms dice mucho del desempeño de esta librería, tiene potencial, tiene mucho potencial ❗

Ni que decir del rendimiento (¡gracias Aurora por la ayuda prestada! XD ). La barra roja indica que el cacheo de la data correspondiente a cada script en el navegador se realiza mucho antes de cargar los datos, lo cual indica un porcentaje (pequeño, pero visible en términos de ejecución) salvado en el rendimiento de la aplicación.

Recuerda que la creatividad es un rasgo typico de las mentes curiosas 😉

</script>

Anuncios