1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
---
title: Frame rate
slug: Tools/Desempenho/Frame_rate
tags:
- frame rate
translation_of: Tools/Performance/Frame_rate
---
<div>{{ToolsSidebar}}</div><div class="summary">
<p><em>Frame rate</em> é uma medida da reação de um site da Web. Uma <em>frame rate</em> baixa ou inconsistente pode fazer com que um site pareça irrespondível ou <em>janky</em>, criando uma má experiência de utilizador.</p>
<p><strong>Uma <em>frame rate</em> de 60 imagens por segundo é o ideal para um desempenho suave, proporcionando-lhe um período de tempo de 16.7ms para todas as atualizações necessária na resposta para algum evento.</strong></p>
<p>O gráfico de <em>frame rate</em> na ferramenta 'Desempenho' mostra-lhe a <em>frame rate</em> durante o curso de uma gravação. Este dá-lhe uma indicação rápida de onde o seu site poderá estar a ter problemas, permitindo-lhe utilizar as outras ferramentas para uma análise mais aprofundada.</p>
</div>
<h2 id="Frame_rate_e_resposta"><em>Frame rate</em> e resposta</h2>
<p>Frame rate is the rate at which a video device can produce images (or frames). It's most familiar from film and gaming, but is now widely used as a performance measure for websites and web apps.</p>
<p>In web performance, a frame encapsulates the work the browser needs to do in order to update and repaint the screen. Frame rate is most obviously applicable to animations: if the frame rate is too low, an animation will have a jerky appearance, while a faster frame rate will be smoother. But frame rate is also useful as a general measure of a site's responsiveness as the user interacts with it.</p>
<p>For example, if moving the mouse over some page element triggers some JavaScript that changes the element's appearance, and that triggers a reflow and a repaint, then all this work needs to be completed in that frame. If it takes too long for the browser to process the frame, then the browser will appear momentarily unresponsive (janky).</p>
<p>Similarly, if scrolling through a page involves a lot of complex page updates and the browser can't keep up an acceptable frame rate, scrolling the page will appear sluggish or will occasionally freeze.</p>
<p>In general, a high and consistent frame rate will make the user's interaction with the site more enjoyable and engaging.</p>
<div class="note">
<p>A frame rate of 60fps is reckoned to be the target for smooth performance, giving you a time budget of 16.7ms for all the updates that need to be made synchronously in response to some event.</p>
<p>However, consistency is especially important: if you can't deliver 60fps, it's better to deliver lower frame rates more consistently, and avoid sudden dips in the frame rate which cause the site to freeze.</p>
</div>
<h2 id="Gráfico_da_frame_rate">Gráfico da frame rate</h2>
<p>The frame rate graph is found in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">Recording overview</a> part of the Performance tool. It takes a timestamp when the browser finishes a frame, and uses this to keep track of the frame rate over the course of the recording.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11025/perf-frame-rate.png" style="display: block; height: 66px; margin-left: auto; margin-right: auto; width: 900px;">The x-axis is time over the profile period, and there are three annotations: the maximum frame rate, the average frame rate, and the lowest frame rate.</p>
<h2 id="Utilização_do_gráfico_de_frame_rate">Utilização do gráfico de <em>frame rate</em></h2>
<p>The great value of the frame rate graph is that, like the <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, it gives you a quick indication of where your site might be having problems, enabling you to use the other tools for more in-depth analysis. For example, here's a screenshot of a performance profile:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11023/perf-fr-waterfall.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>You can see that the average frame rate is reasonably healthy, but there are three spots where frame rate collapses for tens of milliseconds. This would certainly cause a noticeable stutter for any animations that were playing in the page.</p>
<p>The frame rate graph is correlated with the <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">waterfall summary</a> directly above it, and there we can see that the first two drops in the frame rate are correlated with orange bars, which denote time spent executing JavaScript.</p>
<p>If we select one of these slices of the recording, the main <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall view</a> underneath it is zoomed into it, and we can see the function that's causing the problem:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11027/perf-zoom.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>We have a JavaScript function from a click event that's blocking the main thread for 170 milliseconds.</p>
<p>Which function, though? Switch to the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> to see the call stack at that point:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11021/perf-fr-flame-chart.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>The offending function is called <code>doPointlessComputations()</code>, and it's defined in "main.js". To fix it, we might consider splitting it into pieces and running the pieces inside <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></code>, or even running the entire function in a <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">worker</a>. The <a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a> article shows how you can use strategies like this to fix responsiveness problems caused by long-running synchronous JavaScript.</p>
|
