Cómo hacer una representación HTML rápida

Question

Estoy trabajando en una aplicación web desarrollada en C#/ASP.NET. Estamos utilizando controles de terceros para mostrar Grids, Tabs, Trees y otros controles complejos en nuestras páginas. El problema es que estos controles generan una gran cantidad de HTML. Debido a esto, el tamaño de las páginas ha aumentado considerablemente y el navegador tarda un tiempo en cargar una página. Quiero encontrar algunas técnicas generales para hacer que la representación de HTML en un navegador (Internet Explorer, Firefox, etc.) sea rápida.

Tenga en cuenta que todas las páginas tienen ViewState desactivado.

Answer 1

gzip HTML - no aumentará la velocidad de reproducción, pero reducirá enormemente el tamaño de página.

Asegúrate de que no estés utilizando un diseño basado en tablas, y asegúrate de que cualquier javascript o css que se use se minimice, gzipee y se vincule en el encabezado para que se pueda almacenar en caché.

Answer 2

1. comprimir el HTML usando una herramienta de 3 ª parte o al menos mediante el uso de la opción de compresión integrado en IIS6 (Microsoft TechNet).

2. Evalúe los controles de terceros para ver si son necesarios. Si lo son, escriba el suyo para sus propias necesidades y/o use sus controles si están "habilitados para AJAX". La mayoría de los controles de terceros populares tienen capacidades AJAX y permitirían que los datos se completen una vez que el resto de la página se cargue, lo que mostrará al usuario cierto progreso.

3. Desactive ViewState si no es necesario. Al usar controles de terceros, ViewState puede ser enorme.

Actualización: he escribió en su blog acerca de esto en http://weblogs.asp.net/jgaylord/archive/2008/09/29/web-site-performance.aspx

Answer 3

Me gustaría echar un vistazo a la Viewstate de los controles de la página. Debería desactivarlo si es posible, ya que se serializa (y creo que está codificado en Base64) y se rellena en la página. Si actualizas los datos en los controles en cada post-back, deberías poder deshabilitar viewstate de forma segura y probablemente guardar una buena porción de ancho de banda.

Answer 4

Para controles de terceros, todo lo que puede hacer es evitar su soporte para mejorar su rendimiento.

Pero al codificar puede usar varias técnicas. Una clave es entender que la llamada DOM de JavaScript es mucho más lenta que el análisis html. Por lo tanto, si configura innerHTML = "...." con miles de filas, será extremadamente rápido en comparación con representarlo mediante llamadas a document.createElement() en un bucle.

Estos son algunos consejos de MSDN:

http://msdn.microsoft.com/en-us/library/ms533019.aspx

Answer 5

Hay una extensión para Firefox, YSlow (http://developer.yahoo.com/yslow/) que analiza cualquier página web y enumera los cambios específicos a realizar, para mejorar la velocidad. Algunos de los cambios que sugiere están relacionados con el servidor web, no el contenido del HTML, pero de todos modos es muy útil.
Captura de pantalla de la página web YSlow: alt text http://us.i1.yimg.com/us.yimg.com/i/rt/yslow/perfview.png

Answer 6

I fuertemente sugeriría mirar en el Yahoo CSS & JavaScript Compressor que no sólo reducirá su CSS & tamaños de archivos JavaScript, pero también incrementar los errores & posible duplicación en el código. Una necesidad definida en cualquier caja de herramientas de desarrollador web.

Answer 7

Si el problema radica en el control en sí mismo, quizás buscando un nuevo proveedor. Me doy cuenta de que esto implicaría una reinversión en tiempo y dinero, pero es posible que deba presentar la siguiente revisión importante si no puede obtener el resultado que necesita con los métodos de compresión mencionados anteriormente.

Y recuerda, establecer EnableViewState a falso donde se puede

Answer 8

abrir sus páginas normales, y escribe esto en la URL, y pulse Intro:

javascript:var tags = document.getElementsByTagName('*');alert('Page weight: ' + tags.length + ' tags.'); 

(incluso se puede guardar como un bookmarklet)

Si tiene MÁS DE 500 etiquetas, es probable que desee examinar la limpieza de la "sopa de etiquetas" siempre que sea posible.

¡La página de Digg pesa alrededor de 1,000 etiquetas! por lo tanto es muy lento para hacer (por primera vez)

la página principal de MSN pesa alrededor de 700 etiquetas ... por lo tanto es bastante lento para hacer

página de inicio de Yahoo pesa alrededor de 600 etiquetas ... en consecuencia, vuelve más rápido

¡La página de inicio de Google pesa alrededor de 92 etiquetas! ... ¡así se renderiza como un rayo!

Answer 9

La compresión no acelera el procesamiento, solo acelera la entrega de contenido.

Recomendaría hacer algún tipo de 'creación de perfiles' - hacer una página de prueba con muchos tipos de objetos html (como una fila de tabla o un contenedor div común) y luego usar complementos como YSlow para probar cómo toma mucho tiempo renderizar, por ejemplo, 10K de tales elementos. Después de perfilar, verá el fondo real de representación.

Por cierto, el problema puede ser en realidad la entrega de contenido, no la prestación. YSlow también mostrará dónde está. También puede usar algunas herramientas visuales para verificar la velocidad de carga del sitio, como http://Site-Perf.com/

Answer 10

Para acelerar la representación de las cuadrículas, use la paginación de la cuadrícula.
La paginación de cuadrícula causará menos renderización al reducir el número de líneas de cuadrícula que se muestran.

Por lo general, comenzamos con 50 filas por página y siempre establecemos el número de cuadrículas como un parámetro del sistema que se puede disminuir o aumentar fácilmente después de la implementación.

Al usar controles ASP.NET estándar, también descubrieron que son más rápidos al usar adaptadores de control compatibles con CSS. CSS Friendly control adapters