2017-06-09 4 views
2

J'essaie d'implémenter la fonctionnalité de serveur Push Http2 en utilisant "PushPromise" .NET 4.6.1, pour cela j'ai une "extension html" avec Razor (nous n'avons pas implémenté MVC seulement utilisé le moteur Razor pour construire les pages).ASP.Net HTTP2 PushPromise est lent

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); 
    } 

Et dans la tête <> de la page:

<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") 

J'ai accueilli le même projet "sans utiliser PushPromise" (credimejorademo), et dans un autre domaine que je l'ai mis en œuvre PushPromise (aquituinmueble):

Demo(credimejorademo) | Demo2 (aquituinmueble)

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

+1

Vous poussez très tard. Vous pouvez lire [cet article] (https://www.tpeczek.com/2016/12/one-of-new-features-in-http2-is-server.html). C'est dans le contexte de ASP.NET MVC mais montre l'impact de "quand" et "quoi". – tpeczek

Répondre

0

Juste quelques choses que je mentionnerais ici. Tout d'abord, bien que cela puisse sembler contre-intuitif, il vaut probablement mieux ne pas pousser-tout. Le nombre limité de tests que j'ai vus (par exemple: https://www.smashingmagazine.com/2017/04/guide-http2-server-push/) suggère que pousser le css seulement est probablement le meilleur moyen d'améliorer les performances, même si cela vaut la peine de jouer sur un site individuel.

L'autre aspect est que la manière dont vous implémentez PushPromise signifie qu'IIS n'obtient cette requête qu'une fois qu'il a déjà commencé à traiter la page. c'est-à-dire que vous demandez la poussée plus ou moins en même temps que la page l'aurait demandé via une norme.

Espérons que cela aide.