Application Real-Time Monitoring Service:Rastreamento de sessão lenta

Pré-requisitos

• Integre o Browser Monitoring. Para mais informações, consulte Introdução ao Browser Monitoring.

• Modifique a configuração do SDK.

  Por padrão, o SDK do ARMS Browser Monitoring não relata informações sobre recursos estáticos. Para utilizar o rastreamento de sessão lenta, defina sendResource como true na seção config do SDK.

  <script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"atc889zkcf@8cc3f6354******",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true};
  with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
  })(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
  </script>

• Reimplante sua aplicação.

  Após reimplantar a aplicação, as informações de recursos estáticos serão relatadas quando o evento onload da página for acionado. Assim, você poderá usar o Browser Monitoring no ARMS para identificar rapidamente problemas de carregamento lento da página.

Ponto de entrada

1. Faça login no console do ARMS. No painel de navegação à esquerda, escolha Browser Monitoring > Browser Monitoring.

2. Na página Browser Monitoring, selecione uma região na barra de navegação superior e clique em nome da aplicação que deseja gerenciar.

3. No painel de navegação à esquerda, escolha Application > Session Tracing.

Caso de uso: identificar gargalos de desempenho

Esta seção demonstra como identificar um gargalo de desempenho na página.

1. No painel de navegação à esquerda, escolha Application > Access speed. O gráfico mostra um tempo total de carregamento da página de 36,7 segundos às 11:00.

   

2. Na página Access speed, role para baixo até a seção Slow Page Session Trace (TOP20). Esta seção lista as 20 sessões mais lentas da página dentro do intervalo de tempo especificado.

   Para alterar o intervalo de tempo, clique em seletor de horário no canto superior direito da página e escolha um novo intervalo na lista.

   Uma sessão registrada às 11:36:46 apresenta um tempo de carregamento de página de 36,72 segundos, identificando esse acesso como a causa do aumento repentino no tempo de carregamento.

3. Na seção Slow Page Session Trace (TOP20), clique em um nome de página na coluna Page.

   A página Slow Loading Details será aberta, exibindo um gráfico de cascata de desempenho do carregamento de recursos estáticos para ajudar a localizar rapidamente o gargalo.

4. Na seção Page Information, na parte superior da página Slow Loading Details, revise a URL da página, o horário de acesso, o tempo total de carregamento, o tempo de análise do DOM, o endereço IP do cliente, o navegador e o sistema operacional. Utilize essas informações para determinar se o problema foi causado por questões de rede ou outros fatores e otimize a aplicação conforme necessário.

Métodos alternativos para identificar problemas de desempenho

Além da página Access speed, também é possível usar a página Session Tracing para encontrar problemas de desempenho.

1. No painel de navegação à esquerda, clique em Session Tracing para abrir a página Session Tracing, que lista as sessões da aplicação. Filtre as sessões por nome de usuário, ID de usuário, ID de sessão, IP de acesso, URL da página, navegador, versão do navegador, tipo de rede e região.

2. Clique em um ID na coluna Session ID para abrir a página Session Details e visualizar um resumo e o rastreamento da sessão. Para mais informações, consulte Rastreamentos de Sessão.

Perguntas frequentes

1. Por que o Size é 0 no gráfico de cascata de carregamento de recursos?

   Os dados de Size são obtidos de PerformanceResourceTiming.transferSize. A propriedade somente leitura transferSize representa o tamanho do recurso buscado em bytes. Essa propriedade retorna 0 se o recurso for recuperado do cache local ou for um recurso de origem cruzada.

   No navegador Chrome, pressione F12 para abrir as ferramentas de desenvolvedor. Se a caixa de seleção Disable cache na aba Network não estiver marcada, o valor de transferSize será 0.

   Solução

   Marque a caixa de seleção Disable cache. O valor de transferSize será então relatado corretamente.

   ▶ 1: PerformanceResourceTiming {initiatorType: "link", nextHopProtocol: "h2", workerStart: 0, …}
   ▶ 2: PerformanceResourceTiming {initiatorType: "link", nextHopProtocol: "h2", workerStart: 0, …}
   ▶ 3: PerformanceResourceTiming {initiatorType: "link", nextHopProtocol: "h2", workerStart: 0, …}
   ▼ 4: PerformanceResourceTiming
       connectEnd: 410.7099999964703
       connectStart: 410.7099999964703
       decodedBodySize: 232002
       domainLookupEnd: 410.7099999964703
       domainLookupStart: 410.7099999964703
       duration: 195.52999999723397
       encodedBodySize: 59637
       entryType: "resource"
       fetchStart: 410.7099999964703
       initiatorType: "script"
       name: "https://g.alicdn.com/cm-design/arms/1.2.81/scripts/arms/nls/messages_zh.js"
       nextHopProtocol: "h2"
       redirectEnd: 0
       redirectStart: 0
       requestStart: 514.6799999929499
       responseEnd: 606.2399999937043
       responseStart: 562.94999999227
       secureConnectionStart: 410.7099999964703
     ▶ serverTiming: []
       startTime: 410.7099999964703
       transferSize: 60043
       workerStart: 0
     ▶ __proto__: PerformanceResourceTiming
       transferSize: 60043
       workerStart: 0
     ▶ __proto__: PerformanceResourceTiming

2. Por que o Time é 0 no gráfico de cascata de carregamento de recursos?

   Os dados de Time são obtidos de PerformanceResourceTiming.duration. Ao visualizar o carregamento de recursos estáticos no gráfico de cascata, o valor de Time é 0 em alguns casos. Isso ocorre porque a solicitação atinge o cache e é controlada por uma política de cache de longo prazo que utiliza max-age.

   Solução

   No navegador Chrome, pressione F12 para abrir as ferramentas de desenvolvedor. Marque a caixa de seleção Disable cache na aba Network e atualize a página. O tempo consumido pelas solicitações de rede será então exibido.

3. Por que muitos valores de tempo retornados são 0?

   Muitos valores de API relacionados a tempo podem ser 0. Isso acontece porque a política de mesma origem define as informações de tempo para recursos de origem cruzada como 0. Isso afeta principalmente as seguintes propriedades:

   • redirectStart

   • redirectEnd

   • domainLookupStart

   • domainLookupEnd

   • connectStart

   • connectEnd

   • secureConnectionStart

   • requestStart

   • responseStart

   Solução

   Adicione o cabeçalho Timing-Allow-Origin ao cabeçalho de resposta. Por exemplo: Timing-Allow-Origin: *.

4. Qual período de tempo o gráfico de cascata de carregamento de API representa?

   O gráfico de cascata de carregamento de API corresponde ao seguinte período:

   • Hora de início: o momento em que a página começa a carregar

   • Hora de término: 1 minuto após o tempo total de carregamento da página

   O gráfico de cascata de carregamento de API visualiza todas as solicitações de API feitas durante o processo de carregamento da página.

5. Por que a duração no gráfico de cascata de carregamento de API difere da duração no gráfico de cascata de carregamento de recursos da página?

   A duração no gráfico de cascata de carregamento de API pode ser ligeiramente maior do que no gráfico de carregamento de recursos da página. Essa diferença ocorre porque os valores são calculados de forma distinta: o gráfico de API mede do envio da solicitação ao recebimento da resposta, enquanto o gráfico de recursos da página usa a API performance.getEntriesByType('resource') do navegador.

   Essa pequena diferença de tempo não afeta a identificação de gargalos de desempenho.

6. O que representa a hora de início da linha do tempo no gráfico de cascata de carregamento de API?

   A hora de início da linha do tempo no gráfico de cascata de API é a diferença entre o momento em que uma solicitação de API é iniciada e o tempo fetchStart da página. Essa linha do tempo mostra o ponto de início e a duração da solicitação de API durante o processo de carregamento da página.

Mais informações

• Velocidade da Página

• Perguntas Frequentes sobre Browser Monitoring