Aprovechar HTTP/2 con ASP.NET 4.6 e IIS10
En la última década, la Web ha dado múltiples pasos largos. A partir del HTML básico, las páginas web desarrollaron un aspecto más rico, y se están volviendo más intuitivas, fáciles de usar y brillantes cada día.
Katie Mikova
6min read
En la última década, la Web ha dado múltiples pasos largos. A partir del HTML básico, las páginas web han desarrollado un aspecto más rico y se están volviendo más intuitivas, fáciles de usar y brillantes cada día.
Los principales contribuyentes a estos cambios son las tecnologías nuevas y renovadas respaldadas por el hardware más reciente y una mejor conectividad a Internet. Sin embargo, el rendimiento ha sido una preocupación con las aplicaciones web desde el principio.
En los últimos años, la erupción de las bibliotecas de JavaScript, las bibliotecas CSS y los complementos hizo posible que cada página accediera a muchos archivos de JavaScript, CSS, imágenes y otros archivos de recursos. Hay muchos escenarios en los que una página inicia más de 50 solicitudes HTTP al servidor. Cada solicitud crea una nueva conexión TCP con el servidor, recupera el archivo y cierra la conexión. Esto significa que se realizan más de 50 conexiones TCP al servidor. Crear y eliminar cada conexión es un proceso pesado y, aparte de eso, muchos navegadores también limitan el número de conexiones simultáneas, generalmente de cuatro a ocho.
El protocolo HTTP tampoco ha cambiado mucho en los últimos 15 años. HTTP1.1, que se utiliza hoy en día, se definió en 1997 y, desde entonces, la Web ha cambiado mucho. El IETF (Grupo de Trabajo de Ingeniería de Internet) entendió los nuevos desafíos y ha trabajado en esto durante un tiempo con POC. Ahora, han creado otra nueva versión del protocolo HTTP, llamada HTTP/2, que actualmente se encuentra en proceso de estandarización.
¿Qué es HTTP/2?
HTTP/2 es la segunda versión principal del protocolo HTTP, que se centra principalmente en disminuir la latencia para mejorar la velocidad de carga de la página. Se basa en el protocolo SPDY de Google y cubre los siguientes elementos clave:
- Carga de varias solicitudes en conexiones TCP únicas en paralelo
- Habilitación de la compresión en encabezados HTTP
- Permitir que el servidor envíe contenido al cliente
¿En qué se diferencia de las versiones anteriores?
La versión inicial del diseño HTTP utilizaba una nueva conexión TCP para cada solicitud, lo que implicaba configurar la conexión y otros paquetes, lo que consumía mucho tiempo. Se realizaron muchos cambios en HTTP 1.1, donde se introdujo la canalización, que teóricamente le permite enviar varias solicitudes en una sola conexión. Aun así, la solicitud y la respuesta se procesaron de forma sincrónica. HTTP/2 se basa en el protocolo SPDY, que abre una conexión TCP y utiliza la multiplexación, lo que permite enviar muchas solicitudes simultáneamente sin esperar una respuesta. Veámoslo gráficamente:
Aparte de eso, también comprime los encabezados HTTP y habilita el empuje del servidor como se mencionó anteriormente. Veremos cómo afecta eso a la carga de la página en nuestro ejemplo a continuación.
HTTP/2 en acción con ASP.NET 4.6
Una página web típica hace referencia a muchos recursos diferentes como archivos JavaScript, archivos CSS, imágenes, etc. En el ejemplo siguiente, he creado un ejemplo ASP.NET aplicación de formularios web vacía 4.6 con Visual Studio 2015 y he agregado diferentes recursos en la solución que hacen referencia a lo mismo en nuestra página web. Luego agregué un formulario web a la aplicación y también varios recursos, vea a continuación:
<head runat="server">
<title>HTTP2 Demo using ASP.NET Web forms 4.6</title>
<!-- CSS resources -->
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- Image resources-->
<img src="Content/images/img1.jpg" />
<img src="Content/images/img2.jpg" />
<!-- For demo, there are eight images added, but removed here for brevity-->
</div>
<!-- JavaScript file resources -->
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<!-- For demo, total six file added, but removed here for brevity-->
</form>
</body>
</html>
La página anterior hace referencia a 19 recursos diferentes (3 CSS, 8 imágenes, 8 archivos JS) para simular una página en tiempo real. Después de eso, implementé la aplicación en IIS10 en Win Server 2016 (también se puede usar Windows 10). Ahora es el momento de probar la aplicación.
Resultados de la prueba
Primero ejecutaré esta aplicación usando HTTP 1.1 y analizaré el tiempo de carga de la misma. Luego pasaremos a HTTP2 para ver las diferencias. Ejecutemos la aplicación y veamos la pestaña de red de la barra de herramientas para desarrolladores (la mayoría de los navegadores modernos proporcionan una barra de herramientas para desarrolladores que se puede abrir presionando F12). Esto mostrará el número de solicitudes activadas para la página web, su tiempo de espera, hora de inicio, tiempo de carga y otros detalles relevantes.
Al observar de cerca los detalles de la imagen de arriba, vemos que está utilizando el protocolo HTTP1.1, al que se hace referencia en la tercera columna (Protocolo). Además, cargó todos los archivos JavaScript, CSS e imagen como se esperaba, pero sus horas de inicio varían. Es bastante obvio que varias solicitudes pudieron iniciarse una vez que se completaron las solicitudes anteriores. La última solicitud tuvo que esperar alrededor de 4,5 segundos debido a la limitación en el número de conexiones paralelas desde el navegador. El tiempo de carga total de esta página es de unos 9,59 segundos.
Ahora abramos la misma página cambiando el protocolo a HTTP2 y veamos las diferencias. Para hacerlo, debemos cambiar la URL en la barra de direcciones de HTTP a HTTPS y volver a cargar la página y ver la pestaña de red en la barra de herramientas para desarrolladores nuevamente:
Aquí, la línea de tiempo se ve completamente diferente y todas las solicitudes comenzaron simultáneamente. Además, el tiempo de carga de la página se redujo en un 80%, que ahora es de alrededor de 2 segundos. Muestra claramente que todas las solicitudes se enviaron en paralelo al servidor, que era sincrónico en http1.1. La última solicitud tiene un tiempo de espera de solo 70 ms.
Recientemente, utilizamos varias técnicas como la agrupación y la minificación, que mejoran el rendimiento, pero eso también tiene varias limitaciones (por ejemplo, solo es aplicable a archivos JavaScript y CSS). Cada tipo de archivo debe agregarse en diferentes paquetes; Incluso no se recomienda incluir los archivos duplicados en un paquete. Se deben crear varios paquetes en función de su uso en varias páginas de la aplicación. HTTP2 libera al desarrollador de tener que usar estas funciones. Resuelve estos problemas, ya que realiza una sola conexión TCP y comienza a descargar todos los diferentes recursos simultáneamente, ahorrando mucho tiempo y eliminando la carga del desarrollador.
Nota: Actualmente, HTTP2 solo funciona con SSL. Así que abrí la misma página primero usando HTTP que usaba HTTP1.1 y luego usé https: que usaba el protocolo HTTP2 (que se muestra aquí como h2)
Conclusión
En esta publicación, discutimos las prácticas actuales de desarrollo web y los problemas de rendimiento que enfrentamos. Continuamos nuestra discusión sobre HTTP2 y vimos que se puede usar con IIS10 (Windows 10 y Windows Server 2016) y ASP.NET 4.6 con Visual Studio 2015. A continuación, creamos una página de muestra que incluía varios recursos, como JS, CSS e imágenes. Vimos que el uso de HTTP2 nos ahorró más del 75% de tiempo de carga, lo que en última instancia nos demuestra que los problemas de rendimiento a los que estamos acostumbrados actualmente pronto serán cosa del pasado.
Pruebe nuestros controles HTML5 de jQuery para sus aplicaciones web y aproveche de inmediato sus potentes capacidades.¡Descargue la prueba gratuita ahora!
