网站优化策略（减少请求次数）

如何减少请求数?

我们可以通过几个方法来减少网站的请求次数：

　　1.合并外部资源文件（比如：javascript，css，image...）

　　　　a.图片的合并，指的是将多个图片合并为一张图片，然后采用css的一些设置（background-image,background-position）来使用他们，这个方法简单实用，效果显著。

　　　　b.javascript和css文件的合并，这次主要讲解这个方式。

　　2.实用Inline image方式。这种方式可能依赖于浏览器的实现，目前不是所有浏览器都支持。

合并javascript文件和css文件：

对于这两种文件的合并，我们当然可以手动去做（如：copy，paste），把一个文件的内容粘贴在另一个文件内容底部即可。但这种方式有几个缺点：

　　1.破坏了原有文件的结构

　　2.不同页面需要的文件组合可能不同，这种情况会需要产生多个不同文件，而且需要比较小心　　的维护它们。

　　3.若文件内容发生变化，就必须重新来过。

因此，并不很推荐用这种手工合并的方式，事实上，有更好的工具来实现，并且在ASP.NET的一些框架（MVC）中已经内置了实现。

在MVC项目中,默认会有一个所谓的BundleConfig类，它提供了一个方法RegisterBundles,如下所示：

using System.Web;
using System.Web.Optimization;

namespace Mvc.Project
{
    public class BundleConfig
    {
       
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

        }
    }
}

然后，这个方法在Global.asax文件中调用，如下所示

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace Mvc.Project
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            //BundleTable.EnableOptimizations = false;//启用这一行，则使用Bundle的机制进行文件打包
            AuthConfig.RegisterAuth();
        }
    }
}

在具体页面中，如果需要用到上述的脚本组合，则可以实用下面的语法来调用：

@Scripts.Render("~/bundles/jqueryval")

另外，这个技术在普通的ASP.NET Web Forms中也可以使用，如下操作:

按照惯例，在项目中添加一个文件，来进行Bundle注册

using System.Web.Optimization;

namespace Web.Project
{
    public class BundleConfig
    {
        public static void RegisterBundle(BundleCollection config)
        {
            config.Add(new ScriptBundle("~/css").Include("~/scripts/jquery-2.1.0.min.js", "~/scripts/common.js", "~/default.js"));
        }
    }
}

然后我们修改Global.asax文件，添加如下代码：

using System;
using System.Web.Optimization;

namespace Web.Project
{
    public class Global : System.Web.HttpApplication
    {

        protected void Application_Start(object sender, EventArgs e)
        {
            BundleConfig.RegisterBundle(BundleTable.Bundles);
            BundleTable.EnableOptimizations = true;
        }

    }
}

最后，在页面上修改如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<%@ Import Namespace="System.Web.Optimization" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%= Scripts.Render("~/default") %>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

到此为止，我们的文件合并已经介绍完毕，现在将之前的N个请求合并成一个请求。

需要注意的是,如果我们去计算文件大小，这个合并之后的文件，体积会比之前三个文件体积总和略小一些。所以你可以理解为这里存在一定的压缩，但这个压缩比 是不大的（尤其是原有的javascript文件本身就经过了压缩的情况下）。

其实，css文件的合并也是类似的做法，区别在于要使用StyleBundle : http://msdn.microsoft.com/en-us/library/system.web.optimization.stylebundle.aspx