Combinar scripts del cliente en un script compuesto

Actualización: noviembre 2007

En una aplicación ASP.NET AJAX, el comportamiento de cliente de los controles se define usando archivos JavaScript. Normalmente, un solo archivo JavaScript define el comportamiento de cliente de un solo control. Si una página web contiene varios controles, el explorador debe descargar varios archivos JavaScript. El tiempo que se tarda en descargar un solo archivo es mínimo. Sin embargo, cuando una página web contiene muchos controles, el tiempo necesario para descargar varios archivos puede afectar al rendimiento que se percibe de la página.

Una solución es combinar varios archivos JavaScript en un solo archivo, denominado script compuesto. Así se reduce el número de solicitudes del explorador. El resultado es menor tiempo de descarga para el usuario y menos carga en el servidor web.

ASP.NET AJAX permite combinar varios archivos JavaScript en un solo script compuesto usando las referencias de script compuesto de uno del control ScriptManager o de ScriptManagerProxy. Si los scripts contienen dependencias, por ejemplo scripts que llaman a funciones de otros scripts, debe administrar los scripts para que se registren en el orden adecuado.

Si el explorador admite la compresión de script, un script compuesto se comprimirá automáticamente antes de enviarse al explorador. La única excepción es Microsoft Internet Explorer 6.0, al que ASP.NET siempre envía los scripts descomprimidos.

Crear un script compuesto

En una aplicación ASP.NET AJAX, puede crear automáticamente un script compuesto utilizando el control ScriptManager. Para combinar scripts, agregue el elemento CompositeScript y enumere las referencias de script en el orden en que desee incluirlas en el script compuesto.

En el ejemplo siguiente se muestra cómo combinar scripts de cliente utilizando un elemento ComposteScript en el control ScriptManager. Cuando el usuario hace clic en uno de los botones, se llama a una función del script compuesto y se actualiza el elemento span correspondiente.

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Combining Scripts</title>
</head>
<body>
    <form id="form1" >
    <asp:ScriptManager ID="ScriptManager1" >
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/Script1.js" />
                <asp:ScriptReference Path="~/Scripts/Script2.js" />
                <asp:ScriptReference Path="~/Scripts/Script3.js" />
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>
    <h2>Combining Scripts</h2>
    <p>This example shows how to combine multiple client scripts into
    a single composite script.</p>
    <div>
        <input id="Button1" type="button" value="Button 1" onclick="buttonClick1()" />
        <span id="Span1"></span><br /><br />
        <input id="Button2" type="button" value="Button 2" onclick="buttonClick2()" />
        <span id="Span2"></span><br /><br />
        <input id="Button3" type="button" value="Button 3" onclick="buttonClick3()" />
        <span id="Span3"></span>
    </div>
    </form>
</body>
</html>

Para evitar complicar el ejemplo, los siguientes scripts son casi idénticos. Cada script busca el elemento span y escribe un breve mensaje.

function buttonClick1()
{
    var text = Sys.UI.DomElement.getElementById("Span1");
    text.innerHTML = "You clicked Button 1. (Script1)";
}

function buttonClick2()
{
    var text = Sys.UI.DomElement.getElementById("Span2");
    text.innerHTML = "You clicked Button 2. (Script2)";
}

function buttonClick3()
{
    var text = Sys.UI.DomElement.getElementById("Span3");
    text.innerHTML = "You clicked Button 3. (Script3)";
}

Orígenes de los scripts compuestos

Un script compuesto puede contener referencias de script que se basen en una ruta de acceso local o que hagan referencia a un ensamblado. Las referencias de script basadas en rutas de acceso locales se identifican con el atributo Path del elemento ScriptReference. Las referencias basadas en ensamblados se identifican con el atributo Name. No puede utilizar una referencia de script local que haga referencia a un script que no se encuentre en el servidor (es decir, que haga referencia a una ruta de acceso de red).

Un script compuesto no puede contener otros scripts compuestos. No tiene por qué contener todos los scripts que se utilizan en la página web. Sin embargo, puede contener scripts del marco ASP.NET AJAX, como MicrosoftAjax.js.

En el ejemplo siguiente se muestra un script compuesto que combina un script de marco, un script basado en una ruta de acceso local y varios scripts de extensor basados en ensamblados.

<asp:ScriptManager id="SM1" >
  <Scripts>
    <asp:CompositeScript>
      <Scripts>
        <asp:ScriptReference Name="MicrosoftAjax.js"/>
        <asp:ScriptReference Name="Custom.Extender.1.js" 
             Assembly="Custom" />
        <asp:ScriptReference Path="Scripts/Custom2.js" />
        <asp:ScriptReference Name="Custom.Extender.2.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.3.js" 
             Assembly="Custom" />
      </Scripts>
    </asp:CompositeScript>
  </Scripts>
</asp: ScriptManager>

En el ejemplo anterior, el control ScriptManager descarga un script compuesto, que contiene los siguientes scripts individuales en el siguiente orden:

  • MicrosoftAjax.js

  • Custom.Extender.1.js

  • Custom2.js

  • Custom.Extender.2.js

  • Custom.Extender.3.js

El atributo ScriptPath del control ScriptManager se aplica a los scripts individuales incluidos en el grupo, pero no al script compuesto resultante. La ruta de acceso del script compuesto se define mediante el atributo Path del elemento CompositeScript.

Asignar un nombre de archivo a un script compuesto

De manera opcional, puede asignar un nombre de archivo a un script compuesto agregando el atributo Path al elemento CompositeScript, como se muestra en el ejemplo siguiente:

<asp:CompositeScript Path="~/Scripts/MyCompositeScript.js">
Nota:

No utilice una coma (,) ni una barra vertical (|) en el nombre de script.

Modificar dinámicamente las referencias de script

La combinación de scripts se produce una vez provocado el evento ResolveScriptReference. Esto significa que puede escribir un controlador de eventos para modificar las referencias de script. Sin embargo, no puede modificar el orden en que se registran los scripts.

Compartir scripts compuestos entre páginas

Para compartir un script compuesto entre varias páginas y evitar así varias descargas, puede agregar el script compuesto a una página maestra. De igual forma, puede utilizar temas para definir una combinación de scripts.

Combinar scripts traducidos

Si la propiedad EnableScriptLocalization está establecida en true (que es el valor predeterminado), el marco combina las versiones traducidas de los scripts si están disponibles. Los scripts traducidos se combinan en el mismo orden y utilizan el mismo modelo que las versiones originales.

Utilizar scripts compuestos con el control UpdatePanel

Puede crear un script compuesto que incluya scripts de controles o componentes personalizados de un control UpdatePanel. Durante la devolución (postback) asincrónica de un control UpdatePanel, un control podría intentar registrar un script previamente descargado como parte del script compuesto. En ese caso, el marco quita la referencia al script único y la reemplaza por una referencia al script compuesto descargado previamente.

En el ejemplo siguiente se muestra una referencia de script compuesto que admite un componente personalizado definido en un control UpdatePanel.

<asp:ScriptManager id="SM1" >
  <Scripts>
    <asp:CompositeScript>
      <Scripts>
        <asp:ScriptReference Name="MicrosoftAjax.js"/>
        <asp:ScriptReference Name="Custom.Extender.1.js" 
             Assembly="Custom" />
        <asp:ScriptReference Path="~/Scripts/Custom2.js" />
        <asp:ScriptReference Name="Custom.Extender.2.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.3.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.4.js" 
             Assembly="Custom" />
      </Scripts>
    </asp:CompositeScript>
  </Scripts>
</asp: ScriptManager>

<asp:UpdatePanel ...>
  <ContentTemplate>
    ...
    <cc:custom4  id="cc4"... />
    ...
  </ContentTemplate>
</asp:UpdatePanel>

Vea también

Conceptos

Agregar funcionalidad AJAX y de cliente

  • Last updated on