No content

ASP.NET WEB OPTIMIZATIONS 

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] 

The Goal 

• CSS: top (antes de ) • Scripts: bottom (antes de ) • Nunca dejes el src de un vacío! (Petición extra al servidor) • Especifica width y height de • < # cookies = < bandwith = > velocidad • < # elems DOM = > velocidad render = > UX HTML Structure 

• HTML: • CSS: background: url(data:image/png;base64,XXXX); Base64 img data (I) 

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

CSS Sprites (I) 

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

• Online builder: http://css-sprit.es/ CSS Sprites (III) 

• 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 

• “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 

• Web.config: Statics caching @ IIS 7 

• Algunos desde el web.config… • Pero otros IIS 7 no deja cambiarlos: Cleaning IIS Headers (I) 

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

• Carga de JS asíncrono y externo: (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')); • Ejecución de fragmento de código asíncronamente: Loading & Execution (I) 

• Carga correcta de JS secuencial: 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); } • Si se usa JQuery, meterlo dentro de: jQuery(document).ready(function(){ /* … */ }); Loading & Execution (II) 

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

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

• Precalcular lengths y similares for (var i=0; i < items.length; i++) { // ... } for (var i=0, count=items.length; i < count; i++) { // ... } Loops (I) 

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

• 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 

• FXCop para CSS • Usa CSS Lint (de Nicholas Zakas) • Reglas configurables • URL: http://kartones.net/r.ashx?NF CSSCop 

• URL: http://kartones.net/r.ashx?NG CSS3 Intellisense Schema 

• 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 

• Minimizador de Javascript y CSS • También hace análisis de sintaxis • URL: http://ajaxmin.codeplex.com/ Microsoft AJAX Minimizer 

• Bundling de CSS y JS en runtime 1. Ficheros CSS en una carpeta (ej: “styles”) 2. Link a la carpeta con /css de sufijo: • También minimiza (2x1!) • + Info: http://kartones.net/r.ashx?NQ ASP.NET 4.5 Bundling 

• Profiling, funcionalidades, limitaciones… • URL: http://www.browserscope.org • Ejemplo: Browserscope 

• 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 

• 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 

GRACIAS 

Patrocinan 

No content