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.

Anuncio publicitario

El Control ScriptReferenceProfiler.

Como ya hemos vistos en algunos post anteriores el control ScriptManager de Microsoft se traduce en una serie de archivos javascript que son necesarios para trabajar con Ajax, de forma similar, los controles “extender” (como por ejemplo los del AjaxControlToolKit) que nos permiten añadir funcionalidad Ajax a algunos controles de servidor también añaden algunos archivos javascript.

El control ScriptReferenceProfiler, nos va a mostrar en todo momento que archivos javascript (de “sistema”) se están añadiendo a nuestra página. Esto nos puede resultar muy útil a la hora de “afinar” nuestras aplicaciones web.

Este control se puede descargar de forma gratuita desde el sitio de codeplex.

Para usarlo, tan simple como esto:

Trabajando con Ajax y las Microsoft Ajax Library (ScriptManager, UpdatePanel etc…) e IFrames: Como resolver el error «Access Denied».

No es extraño, encontrarse con escenarios de integración de aplicaciones (hablamos de aplicaciones Web) donde tenemos que integrar nuestras apps con aplicaciones de terceros.

Una solución muy extendida, es hacerlo con la ayuda de IFrames, donde en el cargamos nuestra aplicación en un sitio de terceros, de manera que la aplicación de terceros (donde integramos la nuestra) está en un servidor y nuestra aplicación esta en otro servidor.

Si nuestra aplicación, está trabajando con Ajax (y con ScriptManager, UpdatePanel etc…), seguramente cuando la ejecutemos en Internet Explorer (solo lo he probado con IE7 aunque tengo sospechas de que ocurrirá también con IE6) vamos a recibir un error cuya descripción es “Access Denied”.

¿Qué es el ScriptManager?

El ScriptManager, es un control de servidor que nos proporciona el Framework que nos va a gestionar  la descarga de los archivos necesarios de JavaScript  para poder trabajar con Ajax de forma sencilla.

Además, el ScriptManager, también inicializa valores del JavaScript etc… Así que tendremos que estar pendientes del uso que estamos haciendo de este para poder replicar su comportamiento.

¿Qué produce el error?

El error, lo produce la función getLocation del archivo MicrosoftAjax.js. El archivo MicrosoftAjax.js es uno de los que nos descarga el ScriptManager.

La función getLocation determina las coordenadas relativas de un pixel de un elemento del DOM respecto a la esquina superior izquierda del navegador. Como los distintos navegadores, esto lo calculan de distinta forma, esta función hace distinción del browser (algunos tienen en cuenta el scroll otros no etc…) que está ejecutando la página (he aquí la razón por la que únicamente falla en Internet Explorer) así que nos encontramos con que la parte de código que calcula las coordenadas para Internet Explorer, no lo hace demasiado bien.

¿Cómo solucionar el error?

Pues bien, dado que tenemos localizada la razón por la que se produce el error, la solución es sencilla, tenemos hacer un wrapper del código que produce el susodicho error.

Como eliminar el ScriptManager de nuestra página y que el desarrollo Ajax siga funcionando igual.

En este post, vamos a ver cómo eliminar el ScriptManager de nuestra página (y porque eliminarlo) y que todo nos siga funcionando ok, sin que esto sea una experiencia traumática. También veremos que es el ScriptManager y cuáles son sus funciones.

¿Qué es el ScriptManager y para qué Sirve?

El ScriptManager, es un control que nos proporciona el Framework y que nos permite trabajar de forma sencilla con Ajax (Asynchronous JavaScript And XML). Este se encarga de descargar los archivos javascript necesarios para trabajar con Ajax, renderizar el javascript necesario en función de un contexto, crear las llamadas XmlHttpRequest, llamadas a Web Services etc.

Al final lo que intenta, es que trabajar con Ajax sea sencillo y rápido, de manera que con un pequeño esfuerzo podamos obtener unos muy buenos resultados, haciendo él el “trabajo sucio”.

¿Qué ganamos si eliminamos el ScriptManager de una página?

Y ¿si el ScriptManager se dedica a facilitarnos la vida, porque vamos a querer eliminarlo? pues he aquí las razones: