您的位置：首页 > 运维架构 > 网站架构

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

2013-05-20 11:41 316 查看

如何减少请求数?

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

　　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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航