Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ASP.NET Web Optimizations

Kartones
February 23, 2012

ASP.NET Web Optimizations

@ MindCamp 4.0 (February 2012)

Kartones

February 23, 2012
Tweet

More Decks by Kartones

Other Decks in Programming

Transcript

  1. Intro Status: 200 OK Date: 24-26 Feb 2012 Server: kartones.net

    Content-Type: text/powerpoint Content-Length: 20min Cache-Control: cache, share, tweet X-Powered-By: MindCamp/4.0 X-Author: Diego 'Kartones' X-Twitter: @Kartones X-Email: [email protected]
  2. • CSS: top (antes de </head>) • Scripts: bottom (antes

    de </body>) • Nunca dejes el src de un <img> vacío! (Petición extra al servidor) • Especifica width y height de <img> • < # cookies = < bandwith = > velocidad • < # elems DOM = > velocidad render = > UX HTML Structure
  3. // ImageFormat.Gif / ImageFormat.Png public string ConvertToFormat(string ImagePath, ImageFormat SourceFormat)

    { string base64String = string.Empty; using (Image sourceImage = Image.FromFile(@ImagePath)) { using (MemoryStream memoryStream = new MemoryStream()) { sourceImage.Save(memoryStream, SourceFormat); byte[] imageBytes = memoryStream.ToArray(); base64String = Convert.ToBase64String(imageBytes); } } return (SourceFormat == ImageFormat.Gif ? "data:image/gif;base64," : "data:image/png;base64,") + base64String; } Base64 img data (II)
  4. .menuspr { background-image : url(...); background-color : transparent; background-repeat :

    no-repeat; height : 16px; width : 16px; } #spr01 { background-position : -0px -0px; } #spr02 { background-position : -16px -0px; } CSS Sprites (II)
  5. • sessionStorage: Disponible solamente en un tab/ventana • localStorage: Se

    mantiene entre sesiones/tabs/ventanas • Siempre en un mismo browser • 5-10 MB por dominio usualmente • Desactivable por el usuario! • No es increíblemente rápido, pero no está mal • URL: http://dev.w3.org/html5/webstorage/ Web Storage
  6. • “el código más rápido es el que no se

    ejecuta” -> “la página más ligera es la que no tiene contenido” Response.Status = "204 No Content"; • Perfecto para keep-alives y pings • Mejor que un tracking pixel si podemos hacer peticiones AJAX Tracking pixels, keep-alives
  7. • Web.config: <urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true" /> <caching enabled="true" enableKernelCache="true">

    <profiles> <add extension=".jpg" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" /> <add extension=".gif" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" /> <add extension=".png" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" /> </profiles> </caching> <staticContent> <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="15.00:00:00" /> </staticContent> Statics caching @ IIS 7
  8. • Algunos desde el web.config… <system.webServer> <httpProtocol> <customHeaders> <remove name="X-Powered-By"

    /> </customHeaders> </httpProtocol> </system.webServer> • Pero otros IIS 7 no deja cambiarlos: Cleaning IIS Headers (I)
  9. • Solución: Crear un HttpModule public class CustomHeaderModule : IHttpModule

    { public void Init(HttpApplication application) { application.PostReleaseRequestState += new EventHandler(CleanHeaders); } void CleanHeaders(object sender, EventArgs e) { HttpContext.Current.Response.Headers.Remove("Server"); HttpContext.Current.Response.Headers.Remove("X-AspNet-Version"); HttpContext.Current.Response.Headers.Remove("ETag"); } } Cleaning IIS Headers (II)
  10. • Carga de JS asíncrono y externo: <script type="text/javascript"> (function

    (d,t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1; g.src = ' http:// kartones.net/myJS.js'; s.parentNode.insertBefore(g,s); } (document,'script')); </script> • Ejecución de fragmento de código asíncronamente: <script type="text/javascript" async="true"> </script> Loading & Execution (I)
  11. • Carga correcta de JS secuencial: <script type="text/javascript"> window.onload =

    function () { var g = document.createElement('script'); var s = document.getElementsByTagName('script')[0]; g.src = ‘http://kartones.net/myJS.js'; s.parentNode.insertBefore(g, s); } </script> • Si se usa JQuery, meterlo dentro de: jQuery(document).ready(function(){ /* … */ }); Loading & Execution (II)
  12. • Render tree: Partes visuales del DOM tree. • Frames/boxes:

    Nodos en el render tree. • Reflow (Mozilla) / Layout (others): Recalcular partes del render tree. • Repaint / Redraw (IE): Actualizar pantalla con render tree recalculado. • Style recalculation (Google SpeedTracer): styles sin cambios de geometría. Reflows / Repaints (I)
  13. • Causas de reflows y/o repaints: • Añadir/modificar/eliminar nodos del

    DOM • Aplicar display: none (reflow + repaint) o visibility: hidden (repaint) • Mover o animar un nodo DOM • Añadir un stylesheet • Añadir un atributo style • Acciones del usuario: Redimensionado de ventana, cambio de tamaño de fuente, scroll • URL: http://kartones.net/r.ashx?NR Reflows / Repaints (II)
  14. • Precalcular lengths y similares for (var i=0; i <

    items.length; i++) { // ... } for (var i=0, count=items.length; i < count; i++) { // ... } Loops (I)
  15. • Extraer DOM lookups fuera de bucles for (var i=0,

    len=divs.length; i < len; i++) { var div = document.getElementsByTagName("div")[i]; // ... } var divs = document.getElementsByTagName("div"); for (var i=0, len=divs.length; i < len; i++) { var div = divs[i]; // ... } Loops (II)
  16. • Siempre siempre siempre definir variables con “var” –Sino, es

    una variable global –Con var tienen un scope definido • Menos recorrido del DOM para encontrarlas –Bonus: var es similar a “private” Var
  17. • FXCop para CSS • Usa CSS Lint (de Nicholas

    Zakas) • Reglas configurables • URL: http://kartones.net/r.ashx?NF CSSCop
  18. • Intellisense y warnings de HTML 5 • Soporte de

    los nuevos tags HTML 5 • También sirve para VS2008 • URL: http://kartones.net/r.ashx?OH HTML5 Intellisense VS2010
  19. • Minimizador de Javascript y CSS • También hace análisis

    de sintaxis • URL: http://ajaxmin.codeplex.com/ Microsoft AJAX Minimizer
  20. • Bundling de CSS y JS en runtime 1. Ficheros

    CSS en una carpeta (ej: “styles”) 2. Link a la carpeta con /css de sufijo: <link href="styles/css" rel="stylesheet" /> • También minimiza (2x1!) • + Info: http://kartones.net/r.ashx?NQ ASP.NET 4.5 Bundling
  21. • Escalabilidad: http://speakerdeck.com/u/kartones/p/escalando-que-es-gerundio • PHP best practices: http://speakerdeck.com/u/kartones/p/tuenti-hardcore-php-uam • Debugging

    con Chrome: http://Kartones.Net/r.ashx?NY • Esta y otras charlas: http://speakerdeck.com/u/kartones/ Related Links
  22. • Todo lo comentado en esta charla funciona en Chrome,

    Firefox y Safari. • Gran parte también funciona con IE8+… en teoría (no lo he testeado). Friends don’t let friends use IE Disclaimer