Performance

A ferramenta de desempenho é o substituto para o perfil de amostragem JavaScript. Ele inclui uma versão atualizada do perfil de amostragem, mas acrescenta um cronograma taxa de quadros para ajudar a avaliar a capacidade de resposta. Temos a intenção de adicionar mais recursos em versões futuras.

Abrindo a ferramenta de desempenho

Você pode iniciar a ferramenta de desempenho, selecionando "Performance", no menu "Web Developer". Você encontrará o menu "Web Developer" sob o menu "Ferramentas" no Linux e OS X, e diretamente sob o menu "Firefox" no Windows. Alternativamente, Shift + F5 irá abrir a ferramenta.

Para começar a gravar um novo perfil, clique no ícone do cronômetro. Clique novamente para terminar a gravação. O perfil será imediatamente aberto. Você pode salvar o perfil como um arquivo JSON e importação salva perfis. A barra lateral à esquerda permite que você alterne entre vários perfis abertos.

Ele consiste em quatro seções principais camadas horizontalmente:

1. um conjunto de migalhas de pão que você pode usar para zoom in e out
   
    

   um cronograma taxa de quadros
   
2. um cronograma para a execução de código plataforma
   a saída detalhada do perfil de amostragem JavaScript
3. 

Um quadro encapsula o trabalho do navegador precisa fazer a fim de pintar em resposta a algum evento. Por exemplo, se movendo o mouse sobre algum elemento página desencadeia alguns JavaScript que muda a aparência do elemento, e que desencadeia um refluxo e um repaint, depois de todo esse trabalho precisa ser concluída nesse quadro. Se demorar muito tempo para o navegador para processar o quadro, em seguida, o navegador irá aparecer sem resposta (janky).

A altura de cada barra representa a profundidade da pilha de chamadas neste ponto.

A ferramenta de desempenho examina a pilha de chamadas e descobre os tipos de coisas o código JavaScript está fazendo, e divide o bar em cores de acordo:

Passando o cursor sobre a chave de cor de uma dada categoria desvanece as outras categorias:

Essa é a visão de linhas alinhadas com a taxa de quadros em um determinado tempo, assim você poderá correlacionar a lentidão da taxa de quadros com operações Javascript particulares.

Perfil de amostragem JavaScript

O profiller periodicamento gera amostras do estado do motor Javascript e registra a pilha para o código em execução no momento em que a amostra foi colhida. Estatiscamente, o número de amostras colhidas que executavam uma determinada função corresponde à quantidade de tempo que o navegador está gastando para executá-la, assim é possível identificar gargalos em seu código.

Por exemplo, considere um programa como este:

function doSomething() {
  var x = getTheValue();
  x = x + 1;                // -> A (from the top level)
  logTheValue(x);
}

function getTheValue() {
  return 5;                 // -> B (from doSomething())
}

function logTheValue(x) {
                            // -> C (from doSomething())
                            // -> D (from doSomething())
                            // -> E (from the top level)
 console.log(x);
}

doSomething();

logTheValue(6);

Suponha que nós executamos o programa com o profile ativado, e no tempo que leva para executar, o profile registrou 5 amostras, como indicado nos comentários do código acima.

Four are taken from inside doSomething(). Of those, A is directly inside doSomething(). B is inside getTheValue(), and C and D are inside logTheValue(). Finally, the program makes a call to logTheValue() from the top level, and we get a sample there, too. So the profile would consist of five stack traces, like this:

Sample A: doSomething()
Sample B: doSomething() > getTheValue()
Sample C: doSomething() > logTheValue()
Sample D: doSomething() > logTheValue()
Sample E: logTheValue()

This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that logTheValue() is the bottleneck in our code.

Profile structure

The sampling profiler's details pane looks something like this:It presents the samples collected as a table.

4  doSomething()
2  > logTheValue()
1  > getTheValue()
1  logTheValue()

For a deeper look into the way the sampling profiler presents data, see this walkthrough of a profile.

Inverting the call tree

By default, the profiler shows you the call tree from the root to the leaves, like a normal call stack. That is, from each top-level function to the functions it calls, then to the functions they call, and so on:

4  doSomething()
2  > logTheValue()
1  > getTheValue()
1  logTheValue()

This seems logical as it's the temporal order in which the stack is built up, and it's also conventional to represent a call stack in that way. However, often the places where you're spending time are deep in the call tree. So when you look at a profile you'll often click through many higher-level functions with a low "Self Cost", and it can be hard to see the places you're actually spending most of the time.

From Firefox 36 there's a new checkbox in the profiler labeled "Invert Call Tree". If you select this option, the profiler:

• makes a list of all functions with a Self Cost greater than zero: that is, functions which were actually executing when the sample was taken
• orders the list by the number of samples taken while in that function
• for each entry in the list, shows the call stack backwards to the top-level function.

This is usually a more effective way to highlight where your code is spending its time.

Zooming in

Clicking on a row highlights all the samples in the timeline view in which this function appears:If you hover over a row you'll see a magnifying glass at the right-hand end of it. Clicking the magnifying glass makes that row the root: that is, it presents the entire profile as if only that row and the rows underneath it exist:

Note that this also zooms in on the section of the profile in which these samples were taken.

Zooming in

If you click and drag in either the frame rate timeline or the sampling profiler timeline, then:

• a section of the timeline is highlighted
• the sampling profiler details view now shows only samples that were recorded in that section
• you'll see a "+" appear in the toolbar at the top:

Click the "+", and the highlighted section is expanded to fill the timeline. The toolbar at the top now shows the section as a separate breadcrumb:

You can switch between the complete profile and the section using the breadcrumbs. You can also zoom in on a subsection within the section, and that will then appear as a third breadcrumb in the toolbar: