Combinando scripts para mejorar el rendimiento de nuestras aplicaciones web gracias a la característica CompositeScript del ScriptManager.

Con el Service Pack 1 de Visual Studio 2008, se han incluido muchas novedades como ya vimos, pero para trabajar con Ajax, este Service Pack incluía dos mejoras bastante interesantes:

• Historial con ASP.NET Ajax.
• Soporte para combinar ASP.NET Ajax Scripts.

Hoy veremos cómo combinar scripts y que ganamos al hacerlo.

¿Qué ganamos combinando varios archivos Javascript en uno?

Por razones muy diversas, puede ser recomendable que tengamos nuestra funcionalidad cliente en varios archivos de Javascript. Eso si esta practica también tiene consecuencias de cara al rendimiento de nuestra aplicación.

Actualmente cuando un navegador Web comienza a realizar peticiones para servir el contenido de una página, estas peticiones se van procesando de manera que nunca se estén sirviendo más de 4 peticiones simultaneas, que sucede que cuantas más peticiones, más lento es el proceso de carga de una página.

Así pues, como podemos deducir, hay veces que es preferible tener menos peticiones web y archivos más grandes que muchísimos pequeños y muchas peticiones web.

Como combinar scripts.

Gracias a CompositeScript, nueva funcionalidad del ScriptManager que viene con el Service Pack 1 de Visual Studio 2008 y del Framework 3.5 esto, es sumamente sencillo.

Supongamos que tenemos una página que usa dos archivos distintos de Javascript y lo que queremos es combinarlos en uno solo. Esto lo podríamos hacer con un código como este:

<asp:ScriptManager ID="scriptManager" runat="server">
<CompositeScript>
<Scripts>
<asp:ScriptReference Path="~/Scripts/JSFile-1.js" />
<asp:ScriptReference Path="~/Scripts/JSFile-2.js" />
</Scripts>
</CompositeScript>
</asp:ScriptManager>

De manera que al renderizarse la página el servidor preprocesara esos dos archivos en uno solo, y será el ScriptManager el que se encargara de hacer el include apropiado para el archivo descargado.

Quizá estés viendo esto y digas, bien, va a descargar un único Javascript con la funcionalidad de los archivos JSFile-1 y JSFile-2, pero ¿qué pasa con los Javascript en los que se traduce el ScriptManager? (como ya vimos anteriormente), pues bien, ese es el tema, tendremos que tener cuidado, porque si insertamos el ScriptManager en la página, a la hora de servirla el servidor, se van a pedir como poco dos archivos Javascript (de más) y quizás perdamos más de lo que ganamos.

Para solucionar esto, lo que deberíamos conseguir, es que se descargara un único script con toda la funcionalidad Javascript (es decir, la que hemos generado nosotros y la necesaria del ScriptManager), y esto, también lo podemos conseguir (o casi).

Usando ScriptReferenceProfiler (como ya hemos visto) podemos obtener la lista de todos los archivos Javascript de “sistema” que se están renderizando en la página, así pues teniendo ese listado, únicamente tenemos que incluirlos como archivos a unificar.

Esto sería algo así:

<asp:ScriptManager ID="scriptManager" runat="server">
<CompositeScript>
<Scripts>
<asp:ScriptReference name="MicrosoftAjax.js"/>
<asp:ScriptReference name="MicrosoftAjaxWebForms.js"/>
<asp:ScriptReference Path="~/Scripts/JSFile-1.js" />
<asp:ScriptReference Path="~/Scripts/JSFile-2.js" />
</Scripts>
</CompositeScript>
</asp:ScriptManager>

Dicen que una imagen vale que más que mil palabras, asi que teneis una página de descarga (monitorizada con Firebug) donde se puede ver que se han realizado 6 peticiones y descargado 62kb en 7,45s.

Y he aquí la misma página con los Scripts combiandos donde se realizan 3 peticiones descargandose 59 Kb en 3,96 s.

Descargas – Downloads

• Descargate el código fuente usado como ejemplo, y así podras ver esto en vivo y en directo.

Eso es todo amigos, os dejo con Elvis, que me ha acompañado mientras escribia este post y yo me voy que tengo una cita:

Anuncio publicitario