Mejores prácticas

MejoresPrácticasen el Desarrollo de SitiosWeb & ASP.NET Ajax & Nuevas funcionalidades de ASP.NET 4 Gonzalo Pérez C.Web Developer CoroboriMVP ASP/ASP.NEThttp://www.chalalo.clTwitter:chalalochalalo@hotmail.com Juan Carlos OlamendyTurruellas Arquitecto Principal, Exynko Máster en InformáticaEmpresarial Microsoft MVP Oracle ACE johnx_olam@fastmail.fm

Agenda de Hoy Optimización Web Networking HTML CSS JavasCript Marshalling ASP.NET AJAX Lo Nuevo de ASP.NET 4.0 Caché extensible Redirección de páginas Compresión del Session State Uso de etiquetasMetas Mejor control del ViewState Enrutamiento en páginas Web Forms Uso de identificadores del cliente Control Chart Expresiones con soporte Html Encoding Mejoras en ASP.NET MVC 2 2

Optimización Web «En la mayoría de las páginas web, menos del 10 - 20% del tiempo de carga de una página , corresponde a la descarga del documento html, existe entonces un 80-90% que podemos intentar reducir» - Steve Souders

Puntos de Optimización Networking Networking HTML JavaScript Marshalling ASP.NET Ajax CSS

Optimizaciones - NetworkingComprimir el tráfico en la red Response Request GET / HTTP/1.1 Accept: */* Accept-Language: en-us UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible…) Host: www.live.com Response HTTP/1.1 200 OK Content-Length: 3479 Expires: -1 Date: Sun, 14 Mar 2010 21:30:46 GMT Content-Type: text/html; charset=utf-8 Pragma: no-cache Content-Encoding: gzip Accept-Encoding: gzip, deflate Content-Encoding: gzip …Habilitadodesde el WebServer … Revisarque y cuantocomprimir

Optimizaciones - NetworkingProveerContenido Cacheable Primer Request GET /images/banner.jpg HTTP/1.1 Host: www.chalalo.cl PrimerResponse HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 19 Sep 2010 00:00:00 GMT Expires: Fri, 19 Sep 2010 00:00:00 GMT Segundo Request GET /images/banner.jpg HTTP/1.1 Host: www.chalalo.cl No se necesita Response

Response Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com If-Modified-Since: Sun, 22 Jul 2010 21:30:46 GMT Response HTTP/1.1 304 Not Modified Content-Type: image/jpeg Last-Modified: Sun, 22 Jul 2010 21:30:46 GMT Last-Modified: Sun, 22 Jul 2010 21:30:46 GMT If-Modified-Since: Sun, 22 Jul 2010 21:30:46 GMT Optimizaciones - NetworkingRequest Condicionales

Optimizaciones - NetworkingMinimizar JavaScript ( no escompresión) JavaScript Original JavaScript Minimizado function CreateBoard() { images = []; board.innerHTML = ''; var c = 1; vari = count / 2 - .5; for (var x = -i; x <= i; x++) { for (var z = -i; z <= i; z++) { varimg = document.createElement('img'); img.setAttribute("name", "rotatingimage"); img.style.left = '5000px'; img.x3d = x; img.z3d = z; if (useBrowserLogos == true) { switch (c) { case 1: img.src = IEIMAGE; c ++; break; case 2: img.src = LOGO2; c ++; break; case 3: img.src = LOGO1; c ++; break; case 4: img.src = LOGO4; c ++; break; case 5: img.src = LOGO3; c = 1; break; } } else { img.src = IMAGE; } board.appendChild(img); images.push(img); } } countimages.innerHTML = images.length; } e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('b'+e(c)+'b','g'),k[c])}}return p}('y v(){a=[];b.e=apos;apos;;9 c=1;9 i=D/2-.5;d(9 x=-i;x<=i;x++){d(9 z=-i;z<=i;z++){9 0=l.H(apos;0apos;);0.o("n","p");0.q.s=apos;rapos;;0.m=x;0.f=z;g(h==k){j(c){8 1:0.6=t;c++;7;8 2:0.6=F;c++;7;8 3:0.6=G;c++;7;8 4:0.6=J;c++;7;8 5:0.6=w;c=1;7}}C{0.6=I}b.B(0);a.A(0)}}E.e=a.u}')

Optimizaciones - NetworkingNuncaredimesionarlasimágenes solo en escala. <html> <head> <title>Test</title> </head> <body> …  <imgsrc=“logo.gif" width="50" height="40" /> … </body> </html> 500 x 400 width="50" height="40"

Optimizaciones - Networking Nuncaredimesionarlasimágenessolo en escala. <html> <head> <title>Test</title> </head> <body> …  <imgsrc=“logo.gif" width="50" height="40" /> … </body> </html> 50 x 40 width="50" height="40"

Optimizaciones- NetworkingCombinarJavascript & CDN <script src=“miScript1.js” … ></script> <script src=“miScript2.js” … ></script> <script src=“miScript3.js” … ></script> <script src=“animater.js” … ></script> <script src=“extjs.js” … ></script> <script src=“yahooui.js” … ></script> <script src=“miScript4.js” … ></script> <script src=“jQuery.js” … ></script>

13 Optimizaciones: NetworkingCombinarJavascript & CDN <script src=“miScript.js” … ></script> <script src=“animater.js” … ></script> <script src=“extjs.js” … ></script> <script src=“yahooui.js” … ></script> <script src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js” … ></script>

Optimizaciones - NetworkingUsar Image Sprites <html> <head> <title>Test</title> </head> <body> … <imgsrc="a.gif" /> Item 1 <imgsrc="b.gif" /> Item 2 <imgsrc=“c.gif" /> Item 3 <imgsrc=“d.gif" /> Item 4 <imgsrc=“e.gif" /> Item 5 <imgsrc=“f.gif" /> Item 6 … </body> </html> <imgsrc="a.gif" /> Item 1 <imgsrc="b.gif" /> Item 2 <imgsrc=“c.gif" /> Item 3 <imgsrc=“d.gif" /> Item 4 <imgsrc=“e.gif" /> Item 5 <imgsrc=“f.gif" /> Item 6

Optimizaciones - Networking Usar Image Sprites

Optimizaciones - NetworkingUsar Image Sprites <head> <title>Test</title> <style type="text/css"> .a, .b { width: 10; height: 10 } .a, .b { background-image: "abc.gif" } .a { background-position: 0 0 } .b { background-position: 0 -10 } </style> </head> <body> … <div class="a"></div> Item 1 <div class="b"></div> Item 2 … </body> .a, .b { width: 10; height: 10 } .a, .b { background-image: "abc.gif" } .a { background-position: 0 0 } .b { background-position: 0 -10 } <div class="a"></div> <div class="b"></div>

Internet Explorer 9 Network ToolsMedirlasmejoras de rendimiento a nivel de Networking

- Mitificación de Script :Microsoft Ajax Minifier- Images Script DEMO Gonzalo Pérez C. MVP ASP/ASP.NET http://www.chalalo.cl Twitter: chalalo chalalo@hotmail.com

Optimizaciones - HTMLEvitarJavaScript embebido <html> <head> <title>Test</title> <script type="text/javascript">  </script> </head> <body> … </body> </html> <script type="text/javascript">  </script>

Optimizaciones- HTMLEvitarreferenciar o escribir JavaScript en el Head <html> <head> <title>Test</title> <script src=“myscript.js” … ></script> </head> <body> … </body> </html> <script src=“myscript.js” … ></script>

<html> <head> <title>Test</title> </head> <body> … … … </body> </html> <script src=“myscript.js” … ></script> Optimizaciones- HTMLReferenciar o escribir JavaScript al final de la página.

Optimizaciones - HTMLPerosi lo haces, utiliza el tag defer (Solo IE) <html> <head> <title>Test</title> <script src=“myscript.js” … ></script> </head> <body> … </body> </html> defer="defer">

Optimizaciones - CSSEvitarEstilosEmbebidos <html> <head> <title>Test</title> </head> <body> <style>  </style> … … … </body> </html> <style>  </style>

Optimizaciones- CSSEvitarreferenciar CSS al final de la página <html> <head> <title>Test</title> </head> <body> … … … </body> </html> <link rel="stylesheet" type="text/css" href=“mystyles.css" />

Optimizaciones - CSSReferenciar el archivo de estilos en el head. <html> <head> <title>Test</title> </head> <body> … … … </body> </html> <link rel="stylesheet" type="text/css"href="class.css" />

Optimizaciones - JavascriptMinimizar la resolución de símbolos varfoo obj.foo Costo DOM Global Prototype Chain Intermediate Scopes Instance Local

Optimizaciones - JavascriptMinimizar la Resolución de Símbolos function TrabajarConVariableLocal() { variableLocal= 5; return (variableLocal+ 1 ); } variableLocal variableLocal

function TrabajarConVariableLocal2() { varvariableLocal= 5; return (variableLocal+ 1 ); } varvariableLocal variableLocal Optimizaciones - JavascriptMinimizar la Resolución de Símbolos

Optimizaciones - JavascriptMinimizar la Resolución de Símbolos: Funciones function IterarSobreColeccionWork() { var length = myCollection.length; for(vari = 0; i < length; i++) { Work(myCollection[i]); } } Work

Optimizaciones - JavascriptMinimizar la Resolución de Símbolos: Funciones function IterarSobreColeccionWork2() { varfuncWork = Work; var length = myCollection.length; for(vari = 0; i < length; i++) { funcWork(myCollection[i]); } } varfuncWork = Work; funcWork

<html> <head> <title>Test</title> </head> <body> … … … <script src=“myscript.js” … ></script> <script src=“navigation.js” … ></script> <script src=“jquery.js” … ></script> <script src=“jquery.js” … ></script> </body> </html> Optimizacion: JavasScriptRemover referencias y códigosrepetidos <script src=“jquery.js” … ></script> <script src=“jquery.js” … ></script>

<html> <head> <title>Test</title> </head> <body> … … <script src=“jquery.js” … ></script> <script src=“prototype.js” … ></script> <script src=“dojo.js” … ></script> <script src=“animater.js” … ></script> <script src=“extjs.js” … ></script> <script src=“yahooui.js” … ></script> <script src=“mochikit.js” … ></script> <script src=“lightbox.js” … ></script> <script src=“jslibs.js” … ></script> <script src=“qooxdoo.js” … ></script> Optimizaciones - JavascriptRemover Script Duplicados…Librerías <script src=“jquery.js” … ></script> <script src=“prototype.js” … ></script> <script src=“dojo.js” … ></script> <script src=“animater.js” … ></script> <script src=“extjs.js” … ></script> <script src=“yahooui.js” … ></script> <script src=“mochikit.js” … ></script> <script src=“lightbox.js” … ></script> <script src=“jslibs.js” … ></script> <script src=“qooxdoo.js” … ></script>

Networking Networking HTML JavaScript Marshalling ASP.NET Ajax Puntos de Optimización CSS

Trident (MSHTML) JScript Engine Optimizaciones: MarshallingMinimizar la interacción con el DOM DOM

Optimizaciones: MarshallingMinimizar la interacción con el DOM function CalcularSuma() { // ObtenerValores var nume1 = document.body.all.nume1.value; var nume2 = document.body.all.nume2.value; // CalcularResultado document.body.all.resultado.value = nume1 + nume2; } document.body.all document.body.all document.body.all 9 Búsquedas en el DOM

Optimizaciones: MarshallingMinimizar la interacción con el DOM function CalcularSuma2() { // Cachear la colección de elementos var elms = document.body.all; // Obtener los valores var nume1 = elms.nume1.value; var nume2 = elms.nume2.value; // CalcularResultado elms.result.value = lSide + rSide; } var elms = document.body.all; elms elms 3 Búsquedas al Dom elms

Optimización – ASP.NET AJAXOptimizaciones a Nivel de ScriptManager ,[object Object]

ToolScriptManager,[object Object]

Optimizaciones a nivel de ASP.NET AJAX DEMO Gonzalo Pérez C. MVP ASP/ASP.NET http://www.chalalo.cl Twitter: chalalo chalalo@hotmail.com

Resumen Optimización 1)Usar Compresión2)Usar Request3)Condicionales4)Proveer Contenido Cacheable5)MinificarJavascript6)No escalar imágenes7)Usar ImageSprites8)Referenciar JScript al final9)Agregar deferTag10)Referenciar Hojas de Estilo arriba11)Disminuir las búsquedas en el Dom12)Cachear los referencias a funciones13)Remover Script repetidos14)Remover funciones repetidas15)Utilizar CDN16)Utilizar Mejoras de ScriptManager

Nuevas funcionalidades de ASP.NET 4 Caché extensible Problema: Si hay mucho tráfico, la necesidad de memoria aumenta, y existe competencia por la memoria que es un recurso limitado. Solución: La caché extensible permite configurar uno o más proveedores de caché ( asociados a mecanismo de almacenamiento). Estrategia de implementación: (Demo)

Caché extensible DEMO Juan Carlos OlamendyTurruellas Máster en InformáticaEmpresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm

Redirección de páginas Problema: Al mover páginas u otros recursos, se usaba Response.Redirectemitiendo una respuesta HTTP 302 (temporary moved) para enviar al cliente a la nueva dirección. Solución: ASP.NET 4 usa el nuevo método eResponse.RedirectPermanent("newlocation/page.aspx")para emitir respuestas HTTP 301 (permanent moved). Response.Redirect Response.RedirectPermanent("newlocation/page.aspx")

Comprensión del Estado de Sesión Problema: Se almacena una gran cantidad de objetos en el estado de sesión. Solución: ASP.NET 4 incorpora la opción de compresión del estado de sesión. Los datos se comprimen (descomprimidos) usando la clase System.IO.Compression.GZipStream. Estrategía de implementación: <sessionState mode="SQLServer" sqlConnectionString="data source=dbserver;Initial Catalog=aspnetstate" allowCustomSqlDatabase="true" compressionEnabled="true"/> compressionEnabled="true"

Uso de etiquetasMetas Problema: Queremos generar dinámicamente meta-información sobre nuestra página. Una técnica SearchEngineOptimization (SEO). Solución: ASP.NET 4 incluye las propiedades MetaKeywords y MetaDescription a la clase Page. Además se incluyen los atributos Keywords y Description en la directiva @Page. Estrategia de implementación: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_01WebAppOutputCacheDemo._Default" Keywords="This is the default page" Description="This is the default page" %> Keywords="This is the default page" Description="This is the default page"

Mejormanejo del ViewState Problema: Queremos mejor control del ViewState. Solución: Uso de la nueva propiedad ViewStateMode en los controles. Posibles valores: Enabled, Disabled, Inherit. Estrategia de implementación: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppViewStateDemo._Default" ViewStateMode="Disabled" %> ViewStateMode="Disabled"

Enrutamiento Problema: Queremos normalizar las URLs de manera descriptibles http://website/products/category/12. Otra técnica SEO. Solución: Configurar patrones del enrutamiento para asociar URL con las páginas Web Forms físicas. Estrategia de implementación: (Demo)

Enrutamiento DEMO Juan Carlos OlamendyTurruellas Máster en InformáticaEmpresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm

Uso de la propiedadClientID Problema: Es necesario conocer el identificador de los elementos HTML generados. El antiguo algoritmo hacía que esto no fuese predecibles. Solución: Alternativa 1. Alternativa 2. La nueva propiedad ClientIdMode de los controles Web. Posible valores AutoID, Static, Predictable y Inherit. varbtn = document.getElementById("<% =Button1.ClientID %>"); varbtn = $('<% =Button1.ClientID %>');

Uso de la propiedadClientID DEMO Juan Carlos OlamendyTurruellas Máster en InformáticaEmpresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm

Control Chart Problema: Se quiere visualizar datos de una manera comprensible. Ejemplo, un reporte de ventas. Solución: Se introdujo el nuevo control Chart con varias opciones de visualización. En tiempo de ejecución se genera una imagen referenciado por el usuario. Estrategia de implementación: (Demo)

Control Chart DEMO Juan Carlos OlamendyTurruellas Máster en InformáticaEmpresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm

SoporteHTML Encoding automático Problema: El desarrollo en ASP.NET está lleno de sentencias <%= expression %> para enviar texto a la salida. Si no se utiliza el método HttpUtility.HtmlEncode, se puede inyectar código JavaScript o HTML. Ataque conocido como XSS (Cross Site Scripting). Solución: Se introdujo la sentencia <%: expression %> generando <%= HttpUtility.HtmlEncode(expression) %>. Si el texto está formateado, entonces se utiliza: <%: new HtmlString("<div>This is already encoded< <%: expression %> <%= HttpUtility.HtmlEncode(expression) %> <%: new HtmlString("<div>This is already encoded</div>") %>

HTML Helpersfuertementetipiados Problema: En ASP.NET MVC, se quiere tener HTML Helpers tipiados para detectar errores de compilación y mejor soporte de IntelliSense. Solución: Se introdujeron los HTML Helpers fuertemente tipiados siguiendo la convención Html.HelperNameFor(, pasando como parámetro una expresión lambda. Estrategias de implementación: <%= Html.TextBoxFor(model=>model.ProductName) %> Html.HelperNameFor() <%= Html.TextBoxFor(model=>model.ProductName) %>

Mejores prácticas

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (11)

Similar a Mejores prácticas

Similar a Mejores prácticas (20)

Más de Gonzalo C.

Más de Gonzalo C. (12)

Último

Último (16)

Mejores prácticas