Flush no ASP.NET MVC 6

Fazer o flush parcial do HTML gerado no servidor já é uma técnica bem conhecida, divulgada e recomendada no desenvolvimento de aplicações web de alta performance. Desde o ASP clássico até as versões mais recentes do .Net Framework, o recurso já estava presente, através do método Flush da classe Response.

Para facilitar o uso de flush em uma aplicação ASP.NET MVC de versão anterior à 6, podemos utilizar um pacote NuGet chamado Courtesy Flush. Para saber mais, recomendo a leitura do post do Scott Hanselman:

http://www.hanselman.com/blog/NuGetPackageOfTheWeekCourtesyFlushToFlushBuffersEarlierAndOptimizeTimeToFirstByte.aspx

Com a nova versão do Razor, que acompanha o ASP.NET MVC 6, fazer o flush parcial do conteúdo de uma view ficou ainda mais fácil.

Para exemplificar esse recurso na prática, vou utilizar a aplicação construída no post anterior, que é uma página estilo dashboard, com elementos que possuem um delay total de 3 segundos para processar.

Onde colocar o flush?

Para fazer uso efetivo do flush, é muito importante definir o local correto da chamada do método na aplicação. Segundo Steve Souders, autor dos clássicos livros sobre performance de aplicações web: High Performance Web Sites e Even Faster Web Sites, o flush deve ser colocado logo antes da execução de algum método de servidor que demore mais para responder, mas também deve trazer estrutura e recursos mínimos para que, pelo menos uma parte da página, possa ser renderizada e exibida para o usuário.

Seguindo essa diretiva, alterar a aplicação de exemplo utilizada no post passado, adicionando o novo recurso de flush parcial do Razor.

O primeiro passo é criar uma section chamada “corpoDaPagina”  no layout geral da aplicação:

Na página index, a chamada ao método FlushAsync fica logo antes da renderização das views parciais que possuem delay, dessa forma, todo o cabeçalho e os recursos referenciados no header da página são enviados para o navegador do usuário antes do processamento ser completado:

Notem a diferença no gráfico waterfall de renderização de cada uma das páginas:

Sem flush
Sem flush
Com flush
Com flush

Quando não utilizamos flush, a aplicação espera todo o processamento no servidor para carregar o css da página e do bootstrap. Quando usamos, esses recursos são carregados durante o processamento do lado do servidor, dando ao usuário uma sensação de que a página respondeu mais rápido à sua requisição, já que o cabeçalho é exibido rapidamente, antes do processamento pesado do lado do servidor ocorrer.

Esse é mais um recurso interessante para a melhoria do desempenho de uma aplicação ASP.NET MVC 6.

Aplicação de exemplo: http://razorasyncmvc6.azurewebsites.net

SHOW ME THE CODE!!

https://github.com/marcellalves/asp-net-mvc-6-razor-async

Para ampliar o conhecimento sobre esse assunto, leia também:

http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/

http://nikcodes.com/2014/03/04/flushing-in-asp-net-mvc/

http://nikcodes.com/2014/03/17/more-http-flushing-in-asp-net-mvc/