尝试这个：
我最近在工作中完成了相当多的研究和后续开发，这对提高我们的 Web 应用程序前端的性能大有帮助。我想我应该在这里分享基本的解决方案。
第一件显而易见的事情是使用雅虎的 YSlow 和谷歌的 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))
{
//log custom exception
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)
{
//log exception
context.Response.StatusCode = 500;
return;
}
}
context.Response.Write(response.ToString());
string version = "1.0"; //your dynamic version number
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);
}
}
}
好的，现在一些解释：
是否可重用属性：
我们不处理任何特定于实例的事情，这意味着我们可以安全地重用处理程序的同一实例来处理多个请求，因为我们的 ProcessRequest 是线程安全的。更多信息。
处理请求方法：
这里没有什么太忙碌的事情发生。我们循环遍历提供给我们的 CSS 文件（请参阅下面的 CSSControl 了解它们是如何进入的）并使用雅虎 YUICompressor 的 .NET 端口压缩每个文件，然后将内容添加到传出响应流。
该方法的其余部分涉及设置一些 HTTP 缓存属性，以进一步优化浏览器客户端下载（或不下载，视情况而定）内容的方式。
我们在代码中设置 Etag，以便它们在我们的服务器场中的所有计算机上都相同。
我们根据实际文件设置响应和缓存依赖项，因此，如果替换它们，缓存将失效。
我们设置 Cacheability 以便代理可以缓存。
我们使用 cssfiles 属性进行 VaryByParams，这样我们就可以缓存通过处理程序提交的每个 CSS 文件组。
这里是 CSSControl，一个继承 .NET LiteralControl 的自定义服务器端控件。
Front:
<customcontrols:csscontrol id="cssControl" runat="server">
<CustomControls:Stylesheet File="main.css" />
<CustomControls:Stylesheet File="layout.css" />
<CustomControls:Stylesheet File="formatting.css" />
</customcontrols:csscontrol>
Back:
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" //your version number
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))
{
//log custom exception
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)
{
//log exception
context.Response.StatusCode = 500;
return;
}
}
context.Response.Write(response.ToString());
string version = "1.0"; //your dynamic version number here
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);
}
}
}
及其附带的 JSControl：
Front:
<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>
Back:
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" //your dynamic version number
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 所说，在网站服务器上启用 Gzip 是理所当然的事情。经过一番跟踪后，我决定对以下文件类型启用 Gzip：
.css
.js
.axd（Microsoft Javascript 文件）
.aspx（常见的 ASP.NET Web 表单内容）
.ashx（我们的处理程序）
要在 IIS 6.0 Web 服务器上启用 HTTP 压缩：
打开 IIS，右键单击网站，服务选项卡，启用压缩应用程序文件和压缩静态文件
停止 IIS
在记事本中打开 IIS Metabase (C:\WINDOWS\system32\inetsrv\MetaBase.xml) – 如果您对这些事情感到紧张，请进行备份
找到并使用以下内容覆盖两个 IIsCompressionScheme 和一个 IIsCompressionSchemes 元素：
就是这样！这为我们节省了大量带宽，并提高了 Web 应用程序的响应速度。
Enjoy!
