これを試して：
私は最近、Web アプリケーションのフロントエンドのパフォーマンスを大幅に改善するために、かなりの量の調査とそれに伴う開発を完了しました。ここで基本的な解決策を共有したいと思いました。
最初にやるべきことは、Yahoo の YSlow と Google の PageSpeed を使用してサイトのベンチマークを行うことです。これらは、実現すべき「簡単に達成できる」パフォーマンスの改善を強調します。まだ行っていない限り、結果として得られる提案には、静的コンテンツの結合、縮小、および gzip がほぼ確実に含まれます。
実行する手順は次のとおりです。
カスタム 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);
}
}
}
さて、いくつかの説明：
IsReUsable プロパティ:
インスタンス固有のものは扱っていません。つまり、ProcessRequest はスレッドセーフであるため、ハンドラーの同じインスタンスを安全に再利用して複数のリクエストを処理できます。より詳しい情報。
ProcessRequest メソッド:
ここではあまりにも忙しいことは何もありません。提供された CSS ファイルをループ処理し (CSSControl を参照してください)、Yahoo の YUICompressor の .NET ポートを使用して各ファイルを圧縮してから、コンテンツを発信応答ストリームに追加します。
メソッドの残りの部分では、いくつかの HTTP キャッシュ プロパティを設定して、ブラウザ クライアントがコンテンツをダウンロードする (場合によってはダウンロードしない) 方法をさらに最適化します。
サーバー ファーム内のすべてのマシンで同じになるように、コードで Etag を設定します。実際のファイルに Response と Cache の依存関係を設定するため、それらが置き換えられると、キャッシュが無効になります。プロキシがキャッシュできるように Cacheability を設定します。cssfiles 属性を使用して VaryByParams を実行し、ハンドラーを介して送信された CSS ファイル グループごとにキャッシュできるようにします。これは、.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" //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:
フロント：
<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" //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 が言うように、Web サイト サーバーで Gzip を有効にするのは簡単です。いくつかのトレースの後、次のファイル タイプで Gzip を有効にすることにしました。
.css .js .axd (Microsoft Javascript ファイル) .aspx (通常の ASP.NET Web フォーム コンテンツ) .ashx (当社のハンドラー) IIS 6.0 Web サーバーで HTTP 圧縮を有効にするには:
IIS を開き、[Web サイト] の [サービス] タブを右クリックして、[アプリケーション ファイルの圧縮] と [静的ファイルの圧縮] を有効にします IIS を停止します IIS メタベースをメモ帳 (C:\WINDOWS\system32\inetsrv\MetaBase.xml) で開きます。 2 つの IIsCompressionScheme 要素と 1 つの IIsCompressionSchemes 要素を見つけて、次のように上書きします。
以上です！これにより帯域幅が大幅に節約され、Web アプリケーション全体の応答性が向上しました。
楽しみ！