2017-06-09 4 views
2

"PushPromise" .NET 4.6.1を使用してHttp2プッシュサーバー機能を実装しようとしていますが、これはRazorの「html拡張子」を持っていますページを構築するためのRazorエンジン)。 ASP.Net HTTP2 PushPromiseが遅い

public static IHtmlString PushPromiseStylesheet(this HtmlHelper htmlHelper, string src, bool addDomElement = true) 
    { 
     var context = HttpContext.Current; 
     var path = System.Web.Optimization.Styles.Url(src).ToString(); 

     var headers = new NameValueCollection { { "accept-encoding", context.Request.Headers["accept-encoding"] } }; 
     context.Response.PushPromise(path, "GET", headers); 

     var styleElement = $"<link rel=\"preload\" href=\"{path}\" as=\"style\">"; 

     return new HtmlString(addDomElement ? styleElement : String.Empty); 
    } 

    public static IHtmlString PushPromiseJavascript(this HtmlHelper htmlHelper, string src) 
    { 
     var context = HttpContext.Current; 
     var path = System.Web.Optimization.Scripts.Url(src).ToString(); 

     var headers = new NameValueCollection { { "accept-encoding", context.Request.Headers["accept-encoding"] } }; 
     context.Response.PushPromise(path,"GET",headers); 

     var javascriptElement = $"<link rel=\"preload\" href=\"{path}\" as=\"script\">"; 

     return new HtmlString(javascriptElement); 
    } 
    public static IHtmlString PushPromiseImage(this HtmlHelper htmlHelper, string src, bool addDomElement = false) 
    { 
     var context = HttpContext.Current; 
     var path = System.Web.Optimization.Scripts.Url(src).ToString(); 

     var headers = new NameValueCollection { { "accept-encoding", context.Request.Headers["accept-encoding"] } }; 
     context.Response.PushPromise(path,"GET",headers); 

     var imgElement = $"<link rel=\"preload\" href=\"{path}\">"; 

     return new HtmlString(addDomElement ? imgElement : String.Empty); 
    } 

    public static IHtmlString PushPromiseWebFont(this HtmlHelper htmlHelper, string src, string type = null) 
    { 
     var context = HttpContext.Current; 
     var path = System.Web.Optimization.Scripts.Url(src).ToString(); 
     type = string.IsNullOrWhiteSpace(type) ? "font/woff2" : type; 

     var headers = new NameValueCollection { { "accept-encoding", context.Request.Headers["accept-encoding"] } }; 
     context.Response.PushPromise(path, "GET", headers); 

     var fontElement = $"<link rel=\"preload\" href=\"{path}\" as=\"font\" type=\"{type}\"> "; 

     return new HtmlString(fontElement); 
    } 

とページの<頭部>で

:私は(credimejorademo) "PushPromiseを使用せずに" 同じプロジェクトを主催してきた

<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 
<title>@Page.Title</title> 
@Html.PushPromiseStylesheet("~/css/app/fonts.css") 
@Html.PushPromiseStylesheet("~/css/landing.base.css") 
@Html.PushPromiseStylesheet("~/css/landing.style.css") 
@Html.PushPromiseImage("/assets/img/bg-ofertas.jpg") 
@Html.PushPromiseImage("/assets/img/landings/v2/iphone.png") 
@Html.PushPromiseImage("/assets/img/landings/v2/ipad-new.png") 
@Html.PushPromiseImage("/assets/img/landings/v2/macbook-new.png") 

@Html.PushPromiseWebFont("/assets/fonts/CredimejoraIcons.woff2?miydpz") 
@Html.PushPromiseWebFont("/assets/fonts/centrale_sans_regular_italic-webfont.woff2") 
@Html.PushPromiseWebFont("/assets/fonts/centrale_sans_bold_italic-webfont.woff2") 
@Html.PushPromiseWebFont("/assets/fonts/centrale_sans_regular-webfont.woff2") 
@Html.PushPromiseWebFont("/assets/fonts/centrale_sans_bold-webfont.woff2") 

@Html.PushPromiseJavascript("/assets/js/public/libs/jquery.inputmask.bundle-3.3.6.2.js") 

、別のドメインに私が実装しましたプッシュプロミス(aquituinmueble):

Demo(credimejorademo) | Demo2 (aquituinmueble)

https://www.webpagetest.org/video/compare.php?tests=170609_PD_e32f303e034aef3fef7140fef181a738,170609_FK_7d538ecdacf071cce320ad14bf97414c

+1

非常に遅れています。 [この記事](https://www.tpeczek.com/2016/12/one-of-new-features-in-http2-is-server.html)をお読みください。これはASP.NET MVCのコンテキストにありますが、「いつ」と「何か」の影響を示します。 – tpeczek

答えて

0

私はここで言及したいことのほんの2つです。第一に、これは直感的ではないように思われるかもしれませんが、あなたはおそらくすべてを押し進めない方がよいでしょう。私が見た限られた量のテスト(例:https://www.smashingmagazine.com/2017/04/guide-http2-server-push/)では、cssをプッシュするだけで、パフォーマンスを向上させる最善の方法であることが示唆されていますが、個々のサイトで再生する価値があります。

もう1つのことは、PushPromiseを実装する方法は、IISが既にページの処理を開始した後に初めてその要求を取得することを意味します。つまり、ページが標準で要求したのとほぼ同じ時間にプッシュを要求しています。

これが役に立ちます。