使用scriptreference profile使你的页面加载更快

 

1.       前几天看Omar写的一个项目代码,发现使用了ScriptReference在ASP.Net的ScriptManager节点处引用js文件。 搜了半天发现Script Reference是个能够把很多js文件同时结合到一块,然后在load页面的时候统一load以节省页面load的时间。看到作者写的一些介绍这个东东的优点说得还蛮好的。

2.          当你使用Ajax或者是与Ajax相关的控件控件时,你能发现很多的控件都需要执行脚本来与服务器交换数据。 对于一般情况下,浏览器可以向服务请求两个当前事件,比如可以在请求一个图片的同时请求一个CSS样式文件。不过对于javascript而言,浏览器不能够同时请求两个文件。当浏览器向服务器请求一个javascript时回停止所有其它的请求服务。

        当你使用Ajax或者是相关的控件比如AjacControlToolKit时,浏览器以.asx格式向服务器发送异步请求,当一个asd form的异步请求数量特别多时,load整个页面的时间就会降低很多。这时你如果能够吧这些axd请求放到一起那么你就大大提高了一个page的load时间。

       这里提供了如何能够把你的axd脚本放在一起发送请求:

a.       首先是你需要找到你页面中的所有javascript接口,那么你需要从codeplex上下载 script reference profile插件。

http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=13356.

     然后在你的页面注册scriptreference profile,如下所示:

<%@ Register Assembly="ScriptReferenceProfiler" Namespace="ScriptReferenceProfiler" TagPrefix="microsoft" %>

 

b.       在你的页面上添加这个控件:

   <microsoft:ScriptReferenceProfiler ID="profiler1" runat="server" />

     然后你再运行你的页面可以看到你的脚本已经被集成到一块了、如下图:

 

你也可以使用下面的方式集成js文件:

<asp:ScriptManager ID="sm1" runat="server" CompositeScript-ScriptMode="Release">

    <CompositeScript>

        <Scripts>

            <asp:ScriptReference Name="AjaxControlToolkit.Compat.Timer.Timer.js"

                Assembly="AjaxControlToolkit, Version=3.0.20820.23813,

                Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" />

            <asp:ScriptReference

                Name="AjaxControlToolkit.CollapsiblePanel.CollapsiblePanelBehavior.js"

                Assembly="AjaxControlToolkit, Version=3.0.20820.23813,

                Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" />

        </Scripts>

    </CompositeScript>

</asp:ScriptManager>