ASP.NET MVC ETag & Cache等優化方法

背景

最近有一個項目是用SmartAdmin + Jquery + EasyUI 一個ASP.NET MVC5的項目,一直存在一個性能問題,加載速度比較慢,第一次加載需要(在沒有cache的情況下)需要4-5秒完成全部的加載.

如下圖就是用Chrome PageSpeed 測試的結果 

有幾個非常重要的指標

Fist Contentfu Paint:第一次繪出頁面,需要4秒,前4秒都是白屏,確實有點長

Fist Meaningfull Paint:第一次繪出有意義的內容,需要8.6秒,才出現可見的操作頁面.

Eliminate render-blocking resources:阻塞加載資源文件,因為的項目在head中加載了jquery和css,因為有些代碼必須先執行導致的

Remove unused css:存在大量的沒用的css樣式定義,這也很難避免.

分析一下原因

出現上述問題的主要原因,頁面本身的大小,所有資源加起來超過3.2M,Jquery EasyUI的JS+css 就接近3M,另外頁面里有嵌入了好幾個PartialView,還有就是執行js的時間,EasyUI DataGrid需要從后台抓起數據並生成復雜的Dom結構這都需要時間.

一般的優化手段

Cache

第一想到的就是使用cache,單只能解決第二次訪問的速度問題,對少有點用,我一般會這樣做,設置的方法有

• 添加outputcache 例如:

 

[OutputCache(Duration = 360, VaryByParam = "none")]
public ActionResult Index() => this.View();

 

• web.Config 添加對靜態文件的緩存

 

<system.webServer>
        <staticContent>
            <remove fileExtension=".js" />
            <mimeMap fileExtension=".js" mimeType="text/javascript" />
            <remove fileExtension=".ico" />
            <mimeMap fileExtension=".ico" mimeType="image/x-icon" />
            <remove fileExtension=".eot" />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
            <remove fileExtension=".svg" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
            <remove fileExtension=".ttf" />
            <mimeMap fileExtension=".ttf" mimeType="application/x-font-ttf" />
            <clientCache cacheControlMode="UseMaxAge" httpExpires="365.00:00:00" cacheControlMaxAge="365.00:00:00" />
        </staticContent>
</system.webServer>

壓縮和合並資源文件

盡量減少資源文件的大小和請求次數,通常的做法就是使用BundleConfig.cs合並和壓縮js,css文件.我現在使用bundleconfig.json配置代替System.Web.Optimization.配置靈活一點,如果使用bundleconfig.json 編譯壓縮還需要解決客戶端更新的緩存的問題,我使用一下代碼添加一個指紋標志

public class Fingerprint
    {
        public static string Tag(string rootRelativePath)
        {
            if (HttpRuntime.Cache[rootRelativePath] == null)
            {
                string absolute = HostingEnvironment.MapPath("~" + rootRelativePath);

                DateTime date = File.GetLastWriteTime(absolute);
                int index = rootRelativePath.LastIndexOf('/');

                string result = rootRelativePath.Insert(index, "/v-" + date.Ticks);
                HttpRuntime.Cache.Insert(rootRelativePath, result, new CacheDependency(absolute));
            }

            return HttpRuntime.Cache[rootRelativePath] as string;
        }
    }

<system.webServer>
   <urlCompression doStaticCompression="true" doDynamicCompression="true" dynamicCompressionBeforeCache="false" />
   <rewrite>
      <rules>
        <rule name="fingerprint">
          <match url="([\S]+)(/v-[0-9]+/)([\S]+)" />
          <action type="Rewrite" url="{R:1}/{R:3}" />
        </rule>
      </rules>
    </rewrite>
 </system.webServer>

<link rel="stylesheet" href="@Fingerprint.Tag("/content/site.css")" />

ETag

ETags 是用於 Web 緩存驗證的工具，允許有條件的客戶端請求。通過 ETags，瀏覽器可以判斷某項資源是否被需要。如果不需要，瀏覽器就不會向 Web 服務器發送請求，從而最小化請求數量。配置方法

• 全局方案,自定義一個HttpModule

  public class ETagHttpModule : IHttpModule
  {
    #region IHttpModule Members
    void IHttpModule.Dispose()
    {
      // Nothing to dispose; 
    }
    void IHttpModule.Init(HttpApplication context)
    {
      context.BeginRequest += new EventHandler(context_BeginRequest);
      WebPageHttpHandler.DisableWebPagesResponseHeader = true;
    }
    #endregion
    void context_BeginRequest(object sender, EventArgs e)
    {
      HttpApplication app = sender as HttpApplication;

      //if (app.Request.CurrentExecutionFilePath.EndsWith("/") || app.Request.CurrentExecutionFilePath.EndsWith(".cshtml"))
      //{
        app.Response.Filter = new ETagStream(app.Response, app.Request);
      //}
    }
    #region Stream filter
    public class ETagStream : MemoryStream
    {
      private HttpResponse _response = null;
      private HttpRequest _request;
      private Stream _filter = null;
      public ETagStream(HttpResponse response, HttpRequest request)
      {
        _response = response;
        _request = request;
        _filter = response.Filter;
      }
      private string GetToken(Stream stream)
      {
        var checksum = new byte[0];
        checksum = MD5.Create().ComputeHash(stream);
        return Convert.ToBase64String(checksum, 0, checksum.Length);
      }
      public override void Write(byte[] buffer, int offset, int count)
      {
        var data = new byte[count];
        Buffer.BlockCopy(buffer, offset, data, 0, count);
        var token = GetToken(new MemoryStream(data));
        var clientToken = _request.Headers["If-None-Match"];
        if (token != clientToken)
        {
          _response.AddHeader("ETag", token);
          _filter.Write(data, 0, count);
        }
        else
        {
          _response.SuppressContent = true;
          _response.StatusCode = 304;
          _response.StatusDescription = "Not Modified";
          _response.AddHeader("Content-Length", "0");
        }
      }
    }
    #endregion
  }

<modules>
            <remove name="FormsAuthentication" />
            <!--<add type="WhitespaceModule" name="WhitespaceModule" />-->
           <add type="WebApp.ETagHttpModule" name="ETagHttpModule" />
</modules>

• Action頁面級

　　

public class ETagAttribute : ActionFilterAttribute
  {
    public override void OnActionExecuting(ActionExecutingContext filterContext) => filterContext.HttpContext.Response.Filter = new ETagFilter(filterContext.HttpContext.Response, filterContext.RequestContext.HttpContext.Request);
  }

  public class ETagFilter : MemoryStream
  {
    private HttpResponseBase _response = null;
    private HttpRequestBase _request;
    private Stream _filter = null;

    public ETagFilter(HttpResponseBase response, HttpRequestBase request)
    {
      _response = response;
      _request = request;
      _filter = response.Filter;
    }

    private string GetToken(Stream stream)
    {
      var checksum = new byte[0];
      checksum = MD5.Create().ComputeHash(stream);
      return Convert.ToBase64String(checksum, 0, checksum.Length);
    }

    public override void Write(byte[] buffer, int offset, int count)
    {
      var data = new byte[count];

      Buffer.BlockCopy(buffer, offset, data, 0, count);

      var token = GetToken(new MemoryStream(data));
      var clientToken = _request.Headers["If-None-Match"];

      if (token != clientToken)
      {
        _response.AddHeader("ETag", token);
        _filter.Write(data, 0, count);
      }
      else
      {
        _response.SuppressContent = true;
        _response.StatusCode = 304;
        _response.StatusDescription = "Not Modified";
        _response.AddHeader("Content-Length", "0");
      }
    }

   
  }

　　

//[OutputCache(Duration = 360, VaryByParam = "none")]
[ETag]
public ActionResult Index() => this.View();

效果圖,回發的字節數確實減少了很多,單響應時間差不多,不是很明顯.

總結

優化方案有很多,但是感覺效果都不是很理想,要做到極致的用戶體驗,可能真的要拋棄Jquery,EasyUI,這類肥大又復雜的類庫.

問題

另外大家有沒有非常好用又簡單的方法解決初始加載白屏的問題,我試過用js preloading圖層動畫,但是效果還是不理想.但看過一些網址和APP做的效果非常好,不知道具體是如何實現的,在Asp.net mvc環境下能不能用

參考文章

(ASP.NET MVC 應用提速的十種方法)http://blog.oneapm.com/apm-tech/679.html