尝试这个：
我最近在工作中完成了大量的研究和开发，以显著提高我们网页应用程序前端的性能。我想在这里分享基本的解决方案。
首先明显的是，使用Yahoo的YSlow和Google的PageSpeed对您的网站进行基准测试。这些工具将突出显示需要进行的“低成本”性能改进。除非您已经这样做，否则得到的建议几乎肯定包括合并，缩小和压缩静态内容。
我们要执行的步骤为：
编写自定义HTTPHandler以组合和缩小CSS。
编写自定义HTTPHandler以组合和缩小JS。
包括一种机制，以确保上述仅在应用程序不处于调试模式时才发挥其魔力。
编写自定义服务器端Web控件以便于维护css/js文件包含。
启用IIS 6上某些内容类型的GZIP。
好的，让我们从实现.NET IHttpHandler接口的CSSHandler.asax开始吧：
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Web;
namespace WebApplication1
{
public class CssHandler : IHttpHandler
{
public bool IsReusable { get { return true; } }
public void ProcessRequest(HttpContext context)
{
string[] cssFiles = context.Request.QueryString["cssfiles"].Split(',');
List<string> files = new List<string>();
StringBuilder response = new StringBuilder();
foreach (string cssFile in cssFiles)
{
if (!cssFile.EndsWith(".css", StringComparison.OrdinalIgnoreCase))
{
context.Response.StatusCode = 403;
return;
}
try
{
string filePath = context.Server.MapPath(cssFile);
string css = File.ReadAllText(filePath);
string compressedCss = Yahoo.Yui.Compressor.CssCompressor.Compress(css);
response.Append(compressedCss);
}
catch (Exception ex)
{
context.Response.StatusCode = 500;
return;
}
}
context.Response.Write(response.ToString());
string version = "1.0";
context.Response.ContentType = "text/css";
context.Response.AddFileDependencies(files.ToArray());
HttpCachePolicy cache = context.Response.Cache;
cache.SetCacheability(HttpCacheability.Public);
cache.VaryByParams["cssfiles"] = true;
cache.SetETag(version);
cache.SetLastModifiedFromFileDependencies();
cache.SetMaxAge(TimeSpan.FromDays(14));
cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
}
}
}
好的，现在有些解释：
IsReUsable属性：
我们没有处理任何特定于实例的内容，这意味着我们可以安全地重复使用处理程序的同一实例来处理多个请求，因为我们的ProcessRequest是线程安全的。更多信息请参见此处。
ProcessRequest方法：
这里没有太过复杂的操作。我们正在循环遍历传递给我们的CSS文件（请参见下面的CSSControl以了解它们是如何传入的），并使用Yahoo的YUICompressor的.NET移植版压缩每个文件，然后将内容添加到输出响应流中。
该方法的其余部分涉及设置一些HTTP缓存属性，以进一步优化浏览器客户端下载（或不下载）内容的方式。
我们在代码中设置ETag，以便它们可以在我们的服务器群中的所有计算机上相同。
我们在实际文件上设置了Response和Cache依赖项，以便更换它们时会使缓存失效。
我们设置Cacheability以使代理可以缓存。
我们使用cssfiles属性进行VaryByParams，以便我们可以根据通过处理程序提交的CSS文件组进行缓存。
这就是CSSControl，一个自定义的服务器端控件，继承自.NET LiteralControl。
前端：
<customcontrols:csscontrol id="cssControl" runat="server">
<CustomControls:Stylesheet File="main.css" />
<CustomControls:Stylesheet File="layout.css" />
<CustomControls:Stylesheet File="formatting.css" />
</customcontrols:csscontrol>
返回：
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Linq;
using TTC.iTropics.Utilities;
namespace WebApplication1
{
[DefaultProperty("Stylesheets")]
[ParseChildren(true, "Stylesheets")]
public class CssControl : LiteralControl
{
[PersistenceMode(PersistenceMode.InnerDefaultProperty)]
public List<Stylesheet> Stylesheets { get; set; }
public CssControl()
{
Stylesheets = new List<Stylesheet>();
}
protected override void Render(HtmlTextWriter output)
{
if (HttpContext.Current.IsDebuggingEnabled)
{
const string format = "<link rel=\"Stylesheet\" href=\"stylesheets/{0}\"></link>";
foreach (Stylesheet sheet in Stylesheets)
output.Write(format, sheet.File);
}
else
{
const string format = "<link type=\"text/css\" rel=\"Stylesheet\" href=\"stylesheets/CssHandler.ashx?cssfiles={0}&version={1}\"/>";
IEnumerable<string> stylesheetsArray = Stylesheets.Select(s => s.File);
string stylesheets = String.Join(",", stylesheetsArray.ToArray());
string version = "1.00"
output.Write(format, stylesheets, version);
}
}
}
public class Stylesheet
{
public string File { get; set; }
}
}
HttpContext.Current.IsDebuggingEnabled被连接到您的web.config文件中的以下设置：
<system.web>
<compilation debug="false">
</system.web>
基本上，如果您的网站处于调试模式，您将获得以下HTML标记：
<link rel="Stylesheet" href="stylesheets/formatting.css"></link>
<link rel="Stylesheet" href="stylesheets/layout.css"></link
<link rel="Stylesheet" href="stylesheets/main.css"></link>
但是如果你处于生产模式（debug=false），你将会得到这样的标记：
<link type="text/css" rel="Stylesheet" href="CssHandler.ashx?cssfiles=main.css,layout.css,formatting.css&version=1.0"/>
接下来显然会调用CSSHandler，它将负责合并、压缩和缓存准备您的静态CSS内容。
以上所有内容也可以为您的静态JavaScript内容复制：
`JSHandler.ashx:
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Web;
namespace WebApplication1
{
public class JSHandler : IHttpHandler
{
public bool IsReusable { get { return true; } }
public void ProcessRequest(HttpContext context)
{
string[] jsFiles = context.Request.QueryString["jsfiles"].Split(',');
List<string> files = new List<string>();
StringBuilder response = new StringBuilder();
foreach (string jsFile in jsFiles)
{
if (!jsFile.EndsWith(".js", StringComparison.OrdinalIgnoreCase))
{
context.Response.StatusCode = 403;
return;
}
try
{
string filePath = context.Server.MapPath(jsFile);
files.Add(filePath);
string js = File.ReadAllText(filePath);
string compressedJS = Yahoo.Yui.Compressor.JavaScriptCompressor.Compress(js);
response.Append(compressedJS);
}
catch (Exception ex)
{
context.Response.StatusCode = 500;
return;
}
}
context.Response.Write(response.ToString());
string version = "1.0";
context.Response.ContentType = "application/javascript";
context.Response.AddFileDependencies(files.ToArray());
HttpCachePolicy cache = context.Response.Cache;
cache.SetCacheability(HttpCacheability.Public);
cache.VaryByParams["jsfiles"] = true;
cache.VaryByParams["version"] = true;
cache.SetETag(version);
cache.SetLastModifiedFromFileDependencies();
cache.SetMaxAge(TimeSpan.FromDays(14));
cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
}
}
}
并且它相应的JS控制器：
前端：
<customcontrols:JSControl ID="jsControl" runat="server">
<customcontrols:Script File="jquery/jquery-1.3.2.js" />
<customcontrols:Script File="main.js" />
<customcontrols:Script File="creditcardpayments.js" />
</customcontrols:JSControl>
返回：
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Linq;
namespace WebApplication1
{
[DefaultProperty("Scripts")]
[ParseChildren(true, "Scripts")]
public class JSControl : LiteralControl
{
[PersistenceMode(PersistenceMode.InnerDefaultProperty)]
public List<Script> Scripts { get; set; }
public JSControl()
{
Scripts = new List<Script>();
}
protected override void Render(HtmlTextWriter writer)
{
if (HttpContext.Current.IsDebuggingEnabled)
{
const string format = "<script src=\"scripts\\{0}\"></script>";
foreach (Script script in Scripts)
writer.Write(format, script.File);
}
else
{
IEnumerable<string> scriptsArray = Scripts.Select(s => s.File);
string scripts = String.Join(",", scriptsArray.ToArray());
string version = "1.0"
const string format = "<script src=\"scripts/JsHandler.ashx?jsfiles={0}&version={1}\"></script>";
writer.Write(format, scripts, version);
}
}
}
public class Script
{
public string File { get; set; }
}
}
启用Gzip：
正如Jeff Atwood所说，启用Web服务器上的Gzip压缩是一件轻而易举的事情。在跟踪后，我决定对以下文件类型启用Gzip压缩：
.css
.js
.axd（Microsoft Javascript文件）
.aspx（通常的ASP.NET Web Forms内容）
.ashx（我们的处理程序）
要在IIS 6.0 Web服务器上启用HTTP压缩，请执行以下操作：
打开IIS，右键单击Web Sites，选择服务选项卡，启用“压缩应用程序文件”和“压缩静态文件”
停止IIS
在记事本中打开IIS元数据库（C:\WINDOWS\system32\inetsrv\MetaBase.xml）-如果您对这些东西感到紧张，请备份
找到并覆盖两个IIsCompressionScheme和一个IIsCompressionSchemes元素，如下所示：
就这样！这为我们节省了大量带宽，并使Web应用程序更加响应。
享受吧！
