Aproveitando o HTTP/2 com ASP.NET 4.6 e IIS10
Na última década, a Web deu vários passos longos. A partir do HTML básico, as páginas da web desenvolveram uma aparência mais rica e estão ficando mais intuitivas, fáceis de usar e mais brilhantes a cada dia.
Katie Mikova
6min read
Na última década, a Web deu vários passos longos. A partir do HTML básico, as páginas da web desenvolveram uma aparência mais rica e estão ficando mais intuitivas, fáceis de usar e mais brilhantes a cada dia.
Os principais contribuintes para essas mudanças são tecnologias novas e renovadas suportadas pelo hardware mais recente e melhor conectividade com a Internet. No entanto, o desempenho tem sido uma preocupação com as aplicações web desde o início.
Nos últimos anos, a erupção de bibliotecas JavaScript, bibliotecas CSS e plug-ins possibilitou que cada página acessasse muitos arquivos JavaScript, CSS, imagens e outros recursos. Há muitos cenários em que uma página inicia mais de 50 solicitações HTTP para o servidor. Cada solicitação cria uma nova conexão TCP com o servidor, recupera o arquivo e fecha a conexão. Isso significa que mais de 50 conexões TCP são feitas com o servidor. Criar e descartar cada conexão é um processo pesado e, além disso, muitos navegadores também limitam o número de conexões simultâneas, geralmente de quatro a oito.
O protocolo HTTP também não mudou muito nos últimos 15 anos. O HTTP1.1, que é usado hoje em dia, foi definido em 1997 e, desde então, a Web mudou muito. A IETF (Internet Engineering Task Force) entendeu os novos desafios e trabalhou nisso por um tempo com POCs. Agora, eles criaram outra nova versão do protocolo HTTP, chamada HTTP / 2, que está atualmente em processo de padronização.
O que é HTTP/2?
O HTTP/2 é a segunda versão principal do protocolo HTTP, que se concentra principalmente na diminuição da latência para melhorar a velocidade de carregamento da página. Ele é baseado no protocolo SPDY do Google e abrange os seguintes itens principais:
- Carregando várias solicitações em conexões TCP únicas em paralelo
- Habilitando a compactação em cabeçalhos HTTP
- Permitindo que o servidor envie conteúdo para o cliente
Como ele difere das versões anteriores?
A versão inicial do design HTTP usava uma nova conexão TCP para cada solicitação, o que envolvia a configuração da conexão e outros pacotes, o que consumia muito tempo. Muitas mudanças foram feitas no HTTP 1.1, onde o pipelining foi introduzido, o que teoricamente permite enviar várias solicitações em uma única conexão. Ainda assim, a solicitação e a resposta foram processadas de forma síncrona. O HTTP/2 é baseado no protocolo SPDY, que abre uma conexão TCP e usa multiplexação, o que permite que muitas solicitações sejam enviadas simultaneamente sem esperar por uma resposta. Vamos ver pictoricamente:
Além disso, ele também compacta os cabeçalhos HTTP e permite o push do servidor, conforme mencionado anteriormente. Veremos como isso afeta o carregamento da página em nosso exemplo abaixo.
HTTP/2 em ação usando o ASP.NET 4.6
Uma página da web típica faz referência a muitos recursos diferentes, como arquivos JavaScript, arquivos CSS, imagens, etc. No exemplo abaixo, criei um exemplo ASP.NET aplicativo de formulários da Web vazio do 4.6 usando o Visual Studio 2015 e adicionei diferentes recursos na solução que fazem referência ao mesmo em nossa página da Web. Em seguida, adicionei um formulário da Web ao aplicativo e vários recursos também – veja abaixo:
<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>
A página acima faz referência a 19 recursos diferentes (3 CSS, 8 imagens, 8 arquivos JS) para simular uma página em tempo real. Depois disso, implantei o aplicativo no IIS10 no Win Server 2016 (o Windows 10 também pode ser usado). Agora é hora de testar o aplicativo.
Resultados do teste
Primeiro, executarei este aplicativo usando HTTP 1.1 e analisarei o tempo de carregamento dele. Em seguida, passaremos para HTTP2 para ver as diferenças. Vamos executar o aplicativo e ver a guia de rede da Barra de Ferramentas do Desenvolvedor (a maioria dos navegadores modernos fornece uma Barra de Ferramentas do Desenvolvedor que pode ser aberta pressionando F12). Isso mostrará o número de solicitações disparadas para a página da web, seu tempo de espera, hora de início, tempo de carregamento e outros detalhes relevantes.
Observando atentamente os detalhes na imagem acima, vemos que ele está usando o protocolo HTTP1.1, referenciado na terceira coluna (Protocolo). Além disso, carregou todos os arquivos JavaScript, CSS e de imagem conforme o esperado, mas seus horários de início variam. É bastante óbvio que várias solicitações puderam ser iniciadas assim que as solicitações anteriores foram concluídas. A última solicitação teve que esperar cerca de 4,5 segundos devido à limitação do número de conexões paralelas do navegador. O tempo de carregamento final desta página é de cerca de 9,59 segundos.
Agora vamos abrir a mesma página mudando o protocolo para HTTP2 e ver as diferenças. Para fazer isso, precisamos alterar a URL na barra de endereços de HTTP para HTTPS e recarregar a página e ver a guia de rede na barra de ferramentas do desenvolvedor novamente:
Aqui, a linha do tempo parece completamente diferente e todas as solicitações começaram simultaneamente. Além disso, o tempo de carregamento da página foi reduzido em 80%, que agora é de cerca de 2 segundos. Ele mostra claramente que todas as solicitações foram enviadas no servidor paralelo, que era síncrono em http1.1. A última solicitação tem um tempo de espera de apenas 70 ms.
Recentemente, usamos várias técnicas como agrupamento e minificação, que melhoram o desempenho, mas isso também tem várias limitações (por exemplo, é aplicável apenas a arquivos JavaScript e CSS). Cada tipo de arquivo deve ser adicionado em pacotes diferentes; mesmo incluir os arquivos duplicados em um pacote não é recomendado. Vários pacotes devem ser criados com base em seu uso em várias páginas do aplicativo. O HTTP2 alivia o desenvolvedor de ter que usar esses recursos. Ele resolve esses problemas, pois faz apenas uma conexão TCP e começa a baixar todos os diferentes recursos simultaneamente, economizando muito tempo e removendo a carga do desenvolvedor.
Observação – Atualmente, o HTTP2 funciona apenas em SSL. Então eu abri a mesma página primeiro usando HTTP que usava HTTP1.1 e depois usei https: que usava o protocolo HTTP2 (que é mostrado aqui como h2)
Conclusão
Neste post, discutimos as práticas atuais de desenvolvimento web e os problemas de desempenho que enfrentamos. Continuamos nossa discussão sobre o HTTP2 e vimos que ele pode ser usado com o IIS10 (Windows 10 e Windows Server 2016) e o ASP.NET 4.6 usando o Visual Studio 2015. Em seguida, criamos uma página de amostra que incluía vários recursos, incluindo JS, CSS e imagens. Vimos que o uso de HTTP2 nos economizou mais de 75% do tempo de carregamento – o que, em última análise, nos mostra que os problemas de desempenho aos quais estamos acostumados em breve serão coisa do passado!
Experimente nossos controles jQuery HTML5 para seus aplicativos da web e aproveite imediatamente seus recursos poderosos.Baixe o teste gratuito agora!
