ASP.NETWeb优化框架是由微软推出,旨在优化ASP.NET Web应用程序的性能。该框架通过以下两种技术来实现优化:
可能会问,为什么要使用这个框架,以及这个框架的必要性是什么。首先,让尝试理解这一点。使用这个框架有多种原因,以下是其中的一些:
如今,在单个网页中,使用许多JavaScript库来实现不同的功能,如日历、模型弹出等,或者可以说,由于对丰富视觉内容的需求,下载不同资源(如CSS、图片)的成本显著增加。因此,更少和更小的请求可以节省带宽,减少延迟,并延长电池寿命。特别提到电池寿命,是因为移动应用程序。
大多数当前的浏览器限制了每个主机名的并发连接数量为六个(有关更多信息,请点击此处)。这意味着,如果有超过6个请求正在处理,那么额外的请求将被浏览器排队。
目前,该框架提供了以下两种服务:
这个特性是在ASP.NET4.5中引入的,它减少了对服务器的请求次数。这意味着将多个资源(如脚本、CSS文件等)合并为单个资源,以便浏览器的请求次数更少。这提高了页面加载性能。
这个特性通过缩短变量名、移除空格、制表符、注释等来减少请求资源的大小,以优化代码。让来看一个例子,看看它是如何工作的。
function addNumbers(firstNumber, secondNumber) {
/// <signature>
/// <summary> Adds two integers </summary>
/// <param name="firstNumber" type="Integer">First Number.</param>
/// <param name="secondNumber" type="Integer">Second Number.</param>
/// </signature>
var thirdNumber = firstNumber + secondNumber;
}
让看看这段JavaScript代码在压缩后会如何变化:
function(n, p) {
var i = n + p;
}
现在应该更好地理解了这个框架是如何执行优化以提高Web性能的。
知道在这篇文章中,不可能讨论所有三种实现,但这里可以覆盖一些在所有三种实现中都通用的共同点。
有两种方法可以启用或禁用捆绑和压缩:
<system.web>
<compilation debug="false" />
</system.web>
public static void RegisterBundles(BundleCollection bundles) {
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
BundleTable.EnableOptimizations = true;
}
如果设置了这两个值,那么EnableOptimizations会覆盖debug属性。
这个类有Include方法,它接受一个字符串数组,每个字符串是资源的虚拟路径。可以添加多个文件,如下所示:
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include("~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.code.css",
"~/Content/themes/base/jquery.ui.button.css",));
但是,如果想包含特定目录中的所有文件,那么这个类提供了另一个方法叫做IncludeDirectory。可以使用这个方法,如下所示:
public Bundle IncludeDirectory(string dvirtPath, string pattern, bool subDirectory) {
// The Virtual Path for the directory.
// The search pattern.
// true to search subdirectories.
}
可以使用通配符字符“*”来搜索文件或子目录,如下所示:
Include("~/Scripts/Common/*.js") ==> this will include all js files.
IncludeDirectory("~/Scripts/Common", "T*.js") ==> this will include all js files whose name starts from T.
现在,下一个问题是创建了捆绑包,那么如何将其包含在视图或aspx文件中呢?将使用Styles.Render用于CSS和Scripts.Render用于脚本文件,如下所示:
@Styles.Render("~/Content/theme/base/css", "~/Content/css");
@Scripts.Render("~/bundles/jquery");
因此,已经涵盖了这个框架的所有基本细节。
现在,让看看如何在Web表单应用程序中逐步使用这个框架。将从头开始描述,以一个空的Web表单应用程序模板为例:
在解决方案资源管理器中右键单击,点击添加,然后从子菜单中选择添加新项,选择Global.asax文件。
可以看到Global.asax文件中有许多事件。在这里关注Application_Start事件。需要在该事件内编写以下代码。
System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.ScriptBundle("~/bundle/js").Include("~/Scripts/*.js"));
System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.StyleBundle("~/bundle/css").Include("~/Styles/*.css"));
在这里,直接创建并添加了两个捆绑包到捆绑表中。可以根据分类和使用定义。可以进一步将一个单独的捆绑包分类为其他子捆绑包。可能还注意到在这里使用了*.js,因为将所有js文件添加到一个捆绑包中,对于CSS也是如此。所以在这里所做的就是将所有JavaScript文件捆绑到一个捆绑包中,这意味着它们将作为一个单一的实体加载,而不是多个不同的文件,对于CSS,为所有CSS文件创建了一个单独的捆绑包。
现在,想现在可以更好地理解这个框架是如何在实践中优化调用和加载资源的。
在一些文章中,可能会发现他们创建了一个单独的文件,称为BundleConfig,用于在静态文件中创建捆绑包,并通过调用该静态方法在global.asax文件中添加捆绑包。这提供了一个额外的抽象层次。由于这是一篇非常基础的文章,直接在global.asax文件中创建并添加了捆绑包。
现在已经准备好了捆绑包,所以最后的任务是将这个捆绑包包含在aspx文件中。可以使用Scripts.Render和Styles.Render方法,如下所示:
<%: System.Web.Optimization.Scripts.Render("~/bundle/js") %>
<%: System.Web.Optimization.Styles.Render("~/bundle/css") %>
现在已经准备好了所有的实现。现在只剩下一个任务,即启用捆绑和压缩。正如在之前的文章中所描述的,有两种方法可以启用它。所以可以使用其中任何一种方法。在这里,通过设置web.config文件的编译元素的debug属性来启用它,如下所示:
<system.web>
<compilation debug="false" />
</system.web>
现在,是时候高兴并测试工作了。所以运行应用程序,将得到以下屏幕:
现在按F12查看Web优化框架的真正魔力。点击脚本选项卡并选择Test.aspx下拉列表。可以看到js?v…….像一些随机字符串,那就是捆绑包名称。
在这里,如果观察到,在单独的js文件的位置,只有一个捆绑包正在加载。可以在网络选项卡中看到不同的资源调用。在这里可以看到只有一个调用用于JavaScript文件,一个用于CSS文件。
如果没有看到Internet Explorer的这个开发者工具,并且没有在这里观察到没有ASP.NET优化框架的正常应用程序,那么可能无法区分真正的一个,所以对于那些人,可以向展示适当的差异。