Entendendo o desempenho de mundo real para seu aplicativo da Web no IE11 e em outros navegadores
Junto com Google, Mozilla e outros líderes da comunidade, o grupo de trabalho Desempenho na Web do W3C padronizou as interfaces de Tempo de navegação, Tempo de recursos, Tempo do usuário e Linha do tempo do desempenho para ajudá-lo a compreender o desempenho de mundo real da navegação, busca de recursos e execução de scripts em seu aplicativo da Web. Você pode usar essas interfaces para capturar e analisar as opiniões de clientes do mundo real sobre o seu aplicativo da Web em vez de confiar em testes sintéticos, que testam o desempenho do aplicativo em um ambiente artificial. Com esses dados de tempo, você pode identificar oportunidades de aumentar o desempenho de mundo real do seus aplicativos na Web. Todas essas interfaces são compatíveis com o IE11. Confira o Test Drive de tempo de desempenho para visualizar as interfaces em ação.
O Test Drive de tempo de desempenho permite que você experimente as APIs de tempo.
Linha do tempo do desempenho
A especificação da Linha do tempo de desempenho foi publicada como uma Recomendação do W3C e é totalmente compatível com o IE11 e o Chrome 30. Use essa interface, para obter uma visualização completa do tempo gasto durante a navegação, a busca de recursos e a execução de scripts executados no aplicativo. Essa especificação define os atributos mínimos de todas as métricas de desempenho necessárias para implementação e as interfaces que os desenvolvedores podem usar para recuperar qualquer tipo de métrica de desempenho.
Todas as métricas de desempenho são compatíveis com estes quatro atributos:
- name. Este atributo armazena um identificador exclusivo para a métrica de desempenho. Por exemplo, no caso de um recurso, ele será sua URL resolvida.
- entryType. Este atributo armazena o tipo de métrica de desempenho. Por exemplo, uma métrica de um recurso seria armazenada como “recurso”.
- startTime. Este atributo armazena o primeiro carimbo de data/hora registrado da métrica de desempenho.
- duration. Este atributo armazena a duração completa do evento registrado pela métrica.
Todos os dados de tempo são registrados em tempo de alta resolução com o tipo DOMHighResTimeStamps, definido na especificação Tempo de alta resolução. Diferentemente dos DOMTimeStamps que medem os valores de tempo em milissegundos desde 1º de janeiro de 1970 UTC, o valor do tempo de alta resolução é medido em resolução de microssegundos desde o início da navegação do documento. Por exemplo, se eu verificasse o tempo atual usando performance.now(), o tempo de alta resolução analógico para Date.now(), obteria a seguinte interpretação do tempo atual:
> performance.now();
4038.2319370044793
> Date.now()
1386797626201
Esse valor de tempo também tem o benefício de não ser impactado por ajustes ou defasagem do relógio. Você pode explorar o Test Drive What Time Is It para entender o uso do tempo de alta resolução.
Você pode usar as seguintes interfaces para recuperar uma lista de métricas de desempenho registradas no momento da chamada. Com uso dos atributos startTime e duration, além de quaisquer outros fornecidos pela métrica, você pode obter uma visualização de linha do tempo completa do desempenho da página conforme experimentado pelos clientes.
PerformanceEntryList getEntries();
PerformanceEntryList getEntriesByType(DOMString entryType);
PerformanceEntryList getEntriesByName(DOMString name, optional DOMString entryType);
O método getEntriesretorna uma lista de todas as métricas de desempenho na página, enquanto outros métodos retornam itens específicos baseados em nome ou tipo. Esperamos que a maioria dos desenvolvedores use o JSON stringify em toda a lista de métricas e envie os resultados para seu servidor em vez de enviar para o cliente.
Vamos observar com mais detalhes cada uma das diferentes métricas de desempenho: navegação, recurso, marcas e medidas.
Tempo de navegação
As interfaces de Tempo de navegação fornecem medidas de tempo precisas para cada uma das fases de navegação para seu aplicativo na Web. A especificação Tempo de navegação L1 foi publicada como uma Recomendação do W3C, com suporte total desde o IE9, Chrome 28 e Firefox 23. A especificação Tempo de navegação L2 é o Primeiro rascunho de trabalho público e compatível com IE11.
Com o Tempo de navegação, os desenvolvedores podem obter não só o tempo de carregamento completo da página, incluindo o tempo levado para obter a página do servidor, como também os detalhes de como esse tempo foi gasto em cada uma das fases de rede e de processamento de DOM: descarregar, redirecionar, cache do aplicativo, DNS, TCP, solicitação, resposta, processamento DOM e o evento carregar. O script abaixo usa o Tempo de navegação L2 para obter essas informações detalhadas. O tipo de entrada dessa métrica é “navegação” e o nome é “documento”. Confira uma demonstração do Tempo de navegação no site de Test Drive do IE.
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
function sendNavigationTiming() {
var nt = performance.getEntriesByType('navigation')[0];
var navigation = ' Start Time: ' + nt.startTime + 'ms';
navigation += ' Duration: ' + nt.duration + 'ms';
navigation += ' Unload: ' + (nt.unloadEventEnd - nt.unloadEventStart) + 'ms';
navigation += ' Redirect: ' + (nt.redirectEnd - nt.redirectStart) + 'ms';
navigation += ' App Cache: ' + (nt. domainLookupStart - nt.fetchStart) + 'ms';
navigation += ' DNS: ' + (nt.domainLookupEnd - nt.domainLookupStart) + 'ms';
navigation += ' TCP: ' + (nt.connectEnd - nt.connectStart) + 'ms';
navigation += ' Request: ' + (nt.responseStart - nt.requestStart) + 'ms';
navigation += ' Response: ' + (nt.responseEnd - nt.responseStart) + 'ms';
navigation += ' Processing: ' + (nt.domComplete - nt.domLoading) + 'ms';
navigation += ' Load Event: ' + (nt.loadEventEnd - nt.loadEventStart) + 'ms';
sendAnalytics(navigation);
}
</script>
</body>
</html>
Observando o tempo gasto com detalhes em cada uma das fases de rede, você pode diagnosticar melhor e corrigir seus problemas de desempenho. Por exemplo, você pode considerar não usar um redirecionamento se achar que o tempo de redirecionamento está alto, usar um serviço de cache de DNS se o tempo de DNS estiver alto, usar um CDN mais próximos de seus usuários se o tempo de solicitação estiver alto ou fazer um GZip do conteúdo se o tempo de resposta estiver alto. Confira este vídeo para obter dicas e truques para aumentar o desempenho de rede.
A principal diferença entre as duas versões da especificação Tempo de navegação é como os dados de tempo são acessados e como o tempo é medido. A interface L1 define esses atributos no objeto performance.timing e em milissegundos desde 1º de janeiro de 1970. A interface L2 permite que os mesmos atributos sejam recuperados com uso dos métodos da Linha do tempo de desempenho, possibilita que eles sejam posicionados mais facilmente em uma visualização de linha do tempo e os registra com temporizadores de alta resolução.
Antes do Tempo de navegação, os desenvolvedores normalmente tentariam medir o desempenho de carregamento de página escrevendo o JavaScript no cabeçalho do documento, como na amostra de código abaixo. Confira uma demonstração dessa técnica no site de Test Drive do IE.
<!DOCTYPE html>
<html>
<head>
<script>
var start = Date.now();
function sendPageLoad() {
var now = Date.now();
var latency = now - start;
sendAnalytics('Page Load Time: ' + latency);
}
</script>
</head>
<body onload='sendPageLoad()'>
</body>
</html>
No entanto, essa técnica não mede precisamente o desempenho do carregamento da página porque não inclui o tempo necessário para obter a página do servidor. Além disso, a execução do JavaScript no cabeçalho do documento normalmente é um padrão de desempenho ruim.
Tempo de recurso
O Tempo de recurso fornece informações de tempo precisas sobre a busca de recursos na página. Da mesma forma como no Tempo de navegação, o Tempo de recurso fornece informações de tempo detalhadas nas fases de redirecionamento, DNS, TCP, solicitação e resposta dos recursos buscados. A especificação Tempo de recurso foi publicada como uma Recomendação candidata do W3C com suporte desde o IE10 e o Chrome 30.
O código de amostra a seguir usa o getEntriesByType método para obter todos os recursos iniciados pelo elemento <img>. O tipo de entrada do recurso é “recurso”, e o nome será a URL resolvida do recurso. Confira uma demonstração do Tempo de recurso no site de Test Drive do IE.
<!DOCTYPE html>
<html>
<head>
</head>
<body onload='sendResourceTiming()'>
<img src='http://some-server/image1.png'>
<img src='http://some-server/image2.png'>
<script>
function sendResourceTiming()
{
var resourceList = window.performance.getEntriesByType('resource');
for (i = 0; i < resourceList.length; i++)
{
if (resourceList[i].initiatorType == 'img')
{
sendAnalytics('Image Fetch Time: ' + resourceList[i].duration);
}
}
}
</script>
</body>
</html>
Por motivos de segurança, recursos de origem cruzada mostram apenas seu tempo de início e duração. Os atributos de tempo detalhados são definidos para zero. Isso ajuda a evitar problemas de impressão digital estatística, onde uma pessoa pode tentar determinar sua associação em uma organização confirmando se um recurso está no seu cache com a observação do tempo de rede detalhado. O servidor de origem cruzada pode enviar o timing-allow-origin cabeçalho HTTP se quiser compartilhar os dados de tempo com você.
Tempo do usuário
O Tempo do usuário fornece informações de tempo detalhadas da execução de scripts no aplicativo, complementando o Tempo de navegação e de recurso, que fornecem informações de tempo de rede detalhadas. O Tempo do usuário permite que você exiba suas informações de tempo do script na mesma visualização de linha do tempo que os dados de tempo da rede para obter entendimento completo do desempenho do seu aplicativo. A especificação Tempo do usuário foi publicada como uma Recomendação candidata do W3C, com suporte desde o IE10 e o Chrome 30.
A interface do Tempo do usuário define duas métricas usadas para medir o tempo de script: marcas e medidas. Uma marca representa um carimbo de hora de alta resolução em um determinado momento durante a execução do script. Uma medida representa as diferenças entre duas marcas.
Os métodos a seguir podem ser usados para criar marcas e medidas:
void mark(DOMString markName);
void measure(DOMString measureName, optional DOMString startMark, optional DOMString endMark);
Depois de adicionar marcas e medidas ao script, você pode recuperar os dados de tempo com uso dos métodos getEntry, getEntryByType ou getEntryByName. O tipo de entrada da marca é “marca”, e o tipo de entrada da medida é “medida”.
O código de amostra a seguir usa os métodos de marca e medida para medir a quantidade de tempo necessária para executar os métodos doTask1() e doTask2(). Confira uma demonstração do Tempo de usuário no site de Test Drive do IE.
<!DOCTYPE html>
<html>
<head>
</head>
<body onload='doWork()'>
<script>
function doWork()
{
performance.mark('markStartTask1');
doTask1();
performance.mark('markEndTask1');
performance.mark('markStartTask2');
doTask2();
performance.mark('markEndTask2');
performance.measure('measureTask1', 'markStartTask1', 'markEndTask1');
performance.measure('measureTask2', 'markStartTask2', 'markEndTask2');
sendUserTiming(performance.getEntries());
}
</script>
</body>
</html>
Queremos agradecer a todos do Grupo de Trabalho de desempenho da Web do W3C por ajudarem a desenvolver essas interfaces e aos fornecedores de navegador por trabalharem na implementação dessa interface, buscando a interoperabilidade. Com essas interfaces, os desenvolvedores na Web podem realmente começar a medir e entender o que podem fazer para melhorar o desempenho dos aplicativos.
Experimente as interfaces de medições de desempenho com seus aplicativos na Web no IE11 e, como sempre, aguardamos os seus comentários pelo Connect.
Obrigada,
Jatinder Mann, Internet Explorer, gerente de programa