diff options
Diffstat (limited to 'files/pt-pt/tools/performance')
| -rw-r--r-- | files/pt-pt/tools/performance/call_tree/index.html | 194 | ||||
| -rw-r--r-- | files/pt-pt/tools/performance/frame_rate/index.html | 61 | ||||
| -rw-r--r-- | files/pt-pt/tools/performance/how_to/index.html | 65 | ||||
| -rw-r--r-- | files/pt-pt/tools/performance/index.html | 186 | ||||
| -rw-r--r-- | files/pt-pt/tools/performance/ui_tour/index.html (renamed from files/pt-pt/tools/performance/guia_da_iu/index.html) | 3 | ||||
| -rw-r--r-- | files/pt-pt/tools/performance/waterfall/index.html | 564 |
6 files changed, 1072 insertions, 1 deletions
diff --git a/files/pt-pt/tools/performance/call_tree/index.html b/files/pt-pt/tools/performance/call_tree/index.html new file mode 100644 index 0000000000..517e5ccdcf --- /dev/null +++ b/files/pt-pt/tools/performance/call_tree/index.html @@ -0,0 +1,194 @@ +--- +title: Arvóre de Chamada +slug: Tools/Performance/Call_Tree +tags: + - Desempenho + - JavaScript + - memoria +translation_of: Tools/Performance/Call_Tree +original_slug: Tools/Desempenho/Arvore_de_Chamada +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>A '<strong>Árvore de Chamada</strong>' (Call Tree) diz-lhe quais as funções de JavaScript que o navegador gastou mais tempo. Ao analisar os resultados, pode encontrar estrangulamentos no seu código - locais onde o navegador está a gastar uma quantidade desproporcionalmente grande de tempo.</p> + +<p>Estes estrangulamentos são locais onde quaisquer otimizações que pode fazer irão ter um grande impacto.</p> +</div> + +<p>The Call Tree is a sampling profiler. It periodically samples the state of the JavaScript engine and records the stack for the code executing at the time. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser spent executing it.</p> + +<div class="note"> +<p>In this article, we'll use the output of a simple program as an example. If you want to get the program to experiment with your profile, you can find it <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/">here</a>. You can find the specific profile we discuss <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/profile/call-tree.json">here</a> - just import it to the performance tool to follow along.</p> + +<p>There's a short page describing the structure of this program <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Examples/Sorting_algorithms_comparison">here</a>.</p> + +<p>Note that we use the same program - the same profile, in fact - in the documentation page for the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a>.</p> +</div> + +<p>The screenshot below shows the output of a program that compares three sorting algorithms - bubble sort, selection sort, and quicksort. To do this, it generates some arrays filled with random integers and sorts them using each algorithm in turn.</p> + +<p>We've <a href="/en-US/docs/Tools/Performance/UI_Tour#Zooming_in">zoomed</a> into the part of the recording that shows a long JavaScript marker:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10981/perf-call-tree.png" style="display: block; height: 574px; margin-left: auto; margin-right: auto; width: 1052px;"></p> + +<p>The Call Tree presents the results in a table. Each row represents a function in which at least one sample was taken, and the rows are ordered by the number of samples taken while in that function, highest to lowest.</p> + +<p><em>Samples</em> is the number of samples that were taken when we were executing this particular function.</p> + +<p><em>Self Cost</em> is that number as a percentage of the total number of samples in the selected portion of the recording.</p> + +<p><em>Self Time</em> is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording.</p> + +<p>In the current version of the Call Tree, these are the most important columns. Functions with a relatively high <em>Self Cost</em> are good candidates for optimization, either because they take a long time to run, or because they are called very often.</p> + +<p>This screenshot tells us something we probably already knew: Bubble sort is a very inefficient algorithm. We have about six times as many samples in bubble sort as in selection sort, and 13 times as many as in quicksort.</p> + +<h2 id="Mover-se_na_árvore_de_chamada">Mover-se na árvore de chamada</h2> + +<p>Next to each function name is a disclosure arrow: Click that, and you can see the path back up the call tree, from the function in which the sample was taken, to the root. For example, we can expand the entry for <code>bubbleSort()</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10983/perf-call-tree-expanded-bubblesort.png" style="display: block; height: 512px; margin-left: auto; margin-right: auto; width: 1054px;"></p> + +<p>So we can see the call graph is like this:</p> + +<pre>sortAll() + + -> sort() + + -> bubbleSort()</pre> + +<p>Note also that <em>Self Cost</em> for <code>sort()</code> here is 1.45%, and note that this is the same as for the separate entry for <code>sort()</code> later in the list. This is telling us that some samples were taken in <code>sort()</code> itself, rather than in the functions it calls.</p> + +<p>Sometimes there's more than one path back from an entry to the top level. Let's expand the entry for <code>swap()</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10985/perf-call-tree-expanded-sawp.png" style="display: block; height: 636px; margin-left: auto; margin-right: auto; width: 1052px;"></p> + +<p>There were 253 samples taken inside <code>swap()</code>. But <code>swap()</code> was reached by two different paths: both <code>bubbleSort()</code> and <code>selectionSort()</code> use it. We can also see that 252 of the 253 samples in <code>swap() </code>were taken in the <code>bubbleSort()</code> branch, and only one in the <code>selectionSort()</code> branch.</p> + +<p>This result means that bubble sort is even less efficient than we had thought! It can shoulder the blame for another 252 samples, or almost another 10% of the total cost.</p> + +<p>With this kind of digging, we can figure out the whole call graph, with associated sample count:</p> + +<pre>sortAll() // 8 + + -> sort() // 37 + + -> bubbleSort() // 1345 + + -> swap() // 252 + + -> selectionSort() // 190 + + -> swap() // 1 + + -> quickSort() // 103 + + -> partition() // 12</pre> + +<h2 id="Dados_da_plataforma">Dados da plataforma</h2> + +<p>You'll also see some rows labeled <em>Gecko</em>, <em>Input & Events</em>, and so on. These represent internal browser calls.</p> + +<p>This can be useful information too. If your site is making the browser work hard, this might not show up as samples recorded in your code, but it is still your problem.</p> + +<p>In our example, there are 679 samples assigned to <em>Gecko </em>- the second-largest group after <code>bubbleSort()</code>. Let's expand that:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10987/perf-call-tree-expanded-gecko.png" style="display: block; height: 478px; margin-left: auto; margin-right: auto; width: 1050px;"></p> + +<p>This result is telling us that 614 of those samples, or about 20% of the total cost, are coming from our <code>sort()</code> call. If we look at the code for <code>sort()</code>, it should be fairly obvious that the high platform data cost is coming from repeated calls to <code>console.log()</code>:</p> + +<pre class="brush: js">function sort(unsorted) { + console.log(bubbleSort(unsorted)); + console.log(selectionSort(unsorted)); + console.log(quickSort(unsorted)); +}</pre> + +<p>It would certainly be worthwhile considering more efficient ways of implementing this.</p> + +<p>One thing to be aware of here is that idle time is classified as <em>Gecko</em>, so parts of your profile where your JavaScript isn't running will contribute <em>Gecko</em> samples. These aren't relevant to the performance of your site.</p> + +<div class="note"> +<p>By default, the Call Tree doesn't split platform data out into separate functions, because they add a great deal of noise, and the details are not likely to be useful to people not working on Firefox. If you want to see the details, check "Show Gecko Platform Data" in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Settings</a>.</p> +</div> + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator" style="display: none;"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl" style="display: none;"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_alert_cont"> </div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody> + <tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> + </td> + </tr> + </tbody> +</table> +</div> +</div> + +<div id="SL_shadow_translation_result" style=""> </div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody> + <tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> diff --git a/files/pt-pt/tools/performance/frame_rate/index.html b/files/pt-pt/tools/performance/frame_rate/index.html new file mode 100644 index 0000000000..2bcac50ba4 --- /dev/null +++ b/files/pt-pt/tools/performance/frame_rate/index.html @@ -0,0 +1,61 @@ +--- +title: Frame rate +slug: Tools/Performance/Frame_rate +tags: + - frame rate +translation_of: Tools/Performance/Frame_rate +original_slug: Tools/Desempenho/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> diff --git a/files/pt-pt/tools/performance/how_to/index.html b/files/pt-pt/tools/performance/how_to/index.html new file mode 100644 index 0000000000..3e3f37f752 --- /dev/null +++ b/files/pt-pt/tools/performance/how_to/index.html @@ -0,0 +1,65 @@ +--- +title: Como fazer! +slug: Tools/Performance/How_to +translation_of: Tools/Performance/How_to +original_slug: Tools/Desempenho/Como_fazer +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Abrir_as_ferramentas_de_«Desempenho»">Abrir as ferramentas de «Desempenho»</h2> + +<p>Para abrir as ferramentas de <strong>Desempenho</strong>:</p> + +<ul> + <li>pressione Shift + F5</li> + <li>selecione "Desempenho" no submenu das "Ferramentas de Programação" no Menu do Firefox (ou no menu das <strong>Ferramenats</strong> se exibir a barra do menu ou está num OS X)</li> + <li>selecione "Desempenho" no botão <strong>Ferramentas</strong>, na «Barra de Ferramentas», se tiver uma:<img alt="" src="https://mdn.mozillademos.org/files/10997/devtools-button.png" style="height: 76px; width: 728px;"></li> +</ul> + +<h2 id="Gravar_um_perfil">Gravar um perfil</h2> + +<p>To start a new recording, press the stopwatch icon in the Recordings pane. To stop, press it again:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13230/perf-record.png" style="display: block; height: 346px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<p>You can also start and stop recording from the Web Console, using <code><a href="/en-US/docs/Web/API/Console/profile">console.profile()</a></code> and <code><a href="/en-US/docs/Web/API/Console/profileEnd">console.profileEnd()</a></code>.</p> + +<h2 id="Guardar_um_perfil">Guardar um perfil</h2> + +<p>To save a profile, click the link labeled "Save" in the Recordings pane:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13232/perf-save.png" style="display: block; height: 333px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Carregar_um_perfil">Carregar um perfil</h2> + +<p>To load a profile, click "Import..." and choose the file:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13226/perf-load.png" style="display: block; height: 694px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Limpar_todos_os_perfis_carregados">Limpar todos os perfis carregados</h2> + +<p>To clear all loaded profiles, click "Clear".</p> + +<div class="note"> +<p>If you do this, you'll lose any loaded profiles that you have not saved.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13224/perf-clear.png" style="display: block; height: 353px; margin-left: auto; margin-right: auto; width: 818px;"></p> + +<h2 id="Selecionar_uma_ferramenta">Selecionar uma ferramenta</h2> + +<p>To switch between the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a>, and <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> tools, use the buttons in the toolbar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13234/perf-select.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Configurar_marcadores_exibidos">Configurar marcadores exibidos</h2> + +<p>To control which markers are shown in the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, use the button in the toolbar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13228/perf-markers.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Zoom">Zoom +</h2> + +<p>To zoom into a slice of the recording, select that slice in the recording overview:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13236/perf-zoom.png" style="display: block; height: 333px; margin-left: auto; margin-right: auto; width: 799px;"></p> diff --git a/files/pt-pt/tools/performance/index.html b/files/pt-pt/tools/performance/index.html new file mode 100644 index 0000000000..2b6d828b1d --- /dev/null +++ b/files/pt-pt/tools/performance/index.html @@ -0,0 +1,186 @@ +--- +title: Desempenho +slug: Tools/Performance +tags: + - Aprender + - Desempenho + - Desempenho da Web + - Ferramentas de Desenvolvimento + - Ferramentas de Programação +translation_of: Tools/Performance +original_slug: Tools/Desempenho +--- +<div>{{ToolsSidebar}}</div> + +<p>A ferramenta de <strong>Desempenho</strong> mostra-lhe a resposta geral do seu site, o desempenho da disposição e JavaScript. Com esta ferramenta pode criar um registo, ou perfil, do seu site durante um período do tempo. A ferramenta depois mostra-lhe uma <a href="/pt-PT/docs/Tools/Performance/Guia_da_IU#Resumo_de_Waterfall">sinopse </a>das coisas que o navegador esteve a fazer ao renderizar o seu site sob o perfil, e um gráfico da <em><a href="/pt-PT/docs/Tools/Desempenho/Frame_rate">frame rate</a></em> sob o perfil.</p> + +<p>Tem quatro subferramentas para examinar os aspetos do perfil em mais detalhe:</p> + +<ul> + <li>a <a href="/pt-PT/docs/Tools/Desempenho/Cascata">Waterfall</a> mostra-lhe diferentes operações que o navegador estava a realizar, tais como disposição, JavaScript, <em>repaints</em>, e coleção de lixo</li> + <li>a <a href="/pt-PT/docs/Tools/Desempenho/Arvore_de_Chamada">Árvore de Chamada </a>mostra as funções de JavaScript nas quais o navegador gasta a mior parte do seu tempo</li> + <li>the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> shows the JavaScript call stack over the course of the recording</li> + <li>the <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> view shows the heap allocations made by your code over the course of the recording. This view only appears if you checked "Record Allocations" in the Performance tool settings.</li> +</ul> + +<p>{{EmbedYouTube("WBmttwfA_k8")}}</p> + +<hr> +<h2 id="Iniciação">Iniciação</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/pt-PT/docs/Tools/Performance/Guia_da_IU">Guia da IU</a></dt> + <dd> + <p>To find your way around the Performance tool, here's a quick tour of the UI.</p> + </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/pt-PT/docs/Tools/Desempenho/Como_fazer">Como fazer!</a></dt> + <dd>Basic tasks: open the tool, create, save, load, and configure recordings</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Componentes_da_ferramenta_«Desemepenho»">Componentes da ferramenta «Desemepenho»</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><em><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></em></dt> + <dd>Understand your site's overall responsiveness.</dd> + <dt><a href="/pt-PT/docs/Tools/Desempenho/Arvore_de_Chamada">Árvore de Chamada</a></dt> + <dd>Find bottlenecks in your site's JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a></dt> + <dd>See the allocations made by your code over the course of the recording.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/pt-PT/docs/Tools/Desempenho/Cascata">Cascata</a></dt> + <dd>Understand the work the browser's doing as the user interacts with your site.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt> + <dd>See which JavaScript functions are executing, and when, over the course of the recording.</dd> + <dd></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Cenários">Cenários</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a></dt> + <dd>Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.</dd> + <dd></dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a></dt> + <dd>Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.</dd> +</dl> +</div> +</div> + + + +<div class="column-half"> +<dl> + <dd></dd> +</dl> +</div> + + + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style=""></div> + +<div id="SL_shadow_translation_result2" style="display: none;"></div> + +<div id="SL_shadow_translator" style="display: none;"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl" style="display: none;"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> + +<div id="SL_alert_cont"></div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody> + <tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"></div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"></div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"></div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"></div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"></div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"></div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"></div> + </td> + </tr> + </tbody> +</table> +</div> +</div> + +<div id="SL_shadow_translation_result"></div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> + +<div id="SL_player2"></div> + +<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody> + <tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"></div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> diff --git a/files/pt-pt/tools/performance/guia_da_iu/index.html b/files/pt-pt/tools/performance/ui_tour/index.html index e1b561a017..3ceafcf3d5 100644 --- a/files/pt-pt/tools/performance/guia_da_iu/index.html +++ b/files/pt-pt/tools/performance/ui_tour/index.html @@ -1,7 +1,8 @@ --- title: Guia da IU (Interface do Utilizador) -slug: Tools/Performance/Guia_da_IU +slug: Tools/Performance/UI_Tour translation_of: Tools/Performance/UI_Tour +original_slug: Tools/Performance/Guia_da_IU --- <div>{{ToolsSidebar}}</div><p>A 'IU - Interface do Utilizador' da ferramenta desempenho consiste em 4 partes principais:</p> diff --git a/files/pt-pt/tools/performance/waterfall/index.html b/files/pt-pt/tools/performance/waterfall/index.html new file mode 100644 index 0000000000..dd58c2d7d5 --- /dev/null +++ b/files/pt-pt/tools/performance/waterfall/index.html @@ -0,0 +1,564 @@ +--- +title: Cascata +slug: Tools/Performance/Waterfall +translation_of: Tools/Performance/Waterfall +original_slug: Tools/Desempenho/Cascata +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>A '<strong>Cascata</strong>' (Waterfall) mostra-lhe várias coisas que o navegador está a fazer na medida em que este excecuta o seu site ou aplicação. É baseado na ideia de que as coisas que o navegador faz quando executa um site pode ser dividido em vários tipos - executar JavaScript, atualizar a disposição, etc... - e que em qualquer ponto no tempo, o navegador está a fazer essas coisas.</p> + +<p>Assim, se vir um sinal de um problema de desempenho - uma quebra na <em>frame rate</em>, por exemplo - pode ir para a 'Cascata' para ver o que o navegador estava a fazer nesse ponto da gravação.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10951/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Along the X-axis is time. Recorded operations, called markers, are shown as horizontal bars, laid out in a waterfall to reflect the serial nature of the browser's execution.</p> + +<p>When a marker is selected you'll see more information about it in a sidebar on the right. This includes the marker's duration and some more information that's specific to the <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">marker type</a>.</p> + +<h2 id="Marcadores"><a id="timeline-color-coding" name="timeline-color-coding"></a>Marcadores</h2> + +<p>The markers for operations are color-coded and labeled. The following operations are recorded:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col" style="width: 20%;">Nome e descrição</th> + <th scope="col">Cor</th> + <th scope="col">Informação detalhada</th> + </tr> + </thead> + <tbody> + <tr> + <td style="width: 40%;"> + <p><a id="DOM_Event_Marker" name="DOM_Event_Marker"><strong>DOM Event</strong></a></p> + + <p>JavaScript code that's executed in response to a DOM event.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td style="width: 45%;"> + <dl> + <dt>Event Type</dt> + <dd>For example, "click" or "message".</dd> + </dl> + + <dl> + <dt>Event Phase</dt> + <dd>For example, "Target" or "Capture".</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p>JavaScript functions executed in the page are labeled with the reason the function was called:</p> + + <p><strong>Script Tag<br> + setInterval<br> + setTimeout<br> + requestAnimationFrame<br> + Promise Callback<br> + Promise Init<br> + Worker<br> + JavaScript URI<br> + Event Handler</strong></p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Stack</dt> + <dd>Call stack, with links to functions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Analisar HTML</strong></p> + + <p>Time spent parsing the page's HTML.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Stack</dt> + <dd>Call stack, with links to functions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Analisar XML</strong></p> + + <p>Time spent parsing the page's XML.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Stack</dt> + <dd>Call stack, with links to functions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Recalcular Estilo</strong></p> + + <p>Calculating the computed styles that apply to page elements.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Restyle Hint</dt> + <dd>A string indicating what kind of restyling is needed. The hint may be any of:<br> + Self<br> + Subtree<br> + LaterSiblings<br> + CSSTransitions<br> + CSSAnimations<br> + SVGAttrAnimations<br> + StyleAttribute<br> + StyleAttribute_Animations<br> + Force<br> + ForceDescendants</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Disposição (Layout)</strong></p> + + <p>Calculating the position and size of page elements. This operation is sometimes called "reflow".</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Pintura</strong></p> + + <p>Desenhar píxeis para o ecrã.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10705/green.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Coleção de Lixo</strong></p> + + <p><a href="/en-US/docs/Tools/Performance/Waterfall#Garbage_collection">Garbage collection event</a>. Non-incremental GC events are labeled "(Non-incremental)".</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Motivo</dt> + <dd>A string the indicating the reason GC was performed.</dd> + <dt>Motivo Não Incremental</dt> + <dd>If the GC event was non-incremental, the string indicates the reason non-incremental GC was performed.</dd> + </dl> + + <div class="geckoVersionNote"> + <p>New in Firefox 46: if the GC event was caused by allocation pressure, a link appears, labeled "Show Allocation Triggers". Click the link to see the allocation profile leading up to this GC event.</p> + + <p>See <a href="/en-US/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">Allocations and Garbage Collection</a> for more details.</p> + </div> + </td> + </tr> + <tr> + <td> + <p><strong>Ciclo da Coleção</strong></p> + + <p>Reclaiming C++ reference-counted data structures.</p> + + <p>Like garbage collection, but for C++ objects. See <a href="http://blog.kylehuey.com/post/27564411715/cycle-collection">Kyle Huey's blog post about cycle collection</a>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Tipo</dt> + <dd>Always "Collect".</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>CC - Reduçãod e Gráfico</strong></p> + + <p>Preparation/pre-optimization for Cycle Collection.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Tipo</dt> + <dd>Always "ForgetSkippable".</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Consola</strong></p> + + <p>The period between matching calls to <code>console.time()</code> and <code>console.timeEnd()</code>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10955/gray.png" style="height: 54px; width: 60px;"></td> + <td> + <dl> + <dt>Nome do temporizador</dt> + <dd>The argument passed to the <code>console</code> functions.</dd> + <dt>Stack at start</dt> + <dd>Call stack <code>console.time()</code>, with links to functions.</dd> + <dt>Stack at End</dt> + <dd>(New in Firefox 41). Call stack at <code>console.timeEnd()</code>. If this is inside a callback from a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, this will also show the <a href="/en-US/docs/Tools/Performance/Waterfall#Async_stack">"Async stack"</a>.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Data/Hora</strong></p> + + <p>A single call to <code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10953/blue.png" style="height: 54px; width: 60px;"></td> + <td> + <dl> + <dt>Etiqueta</dt> + <dd>The argument passed to <code>timeStamp()</code>.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>DOM - Conteúdo Carregado</strong></p> + + <p>The document's <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> event.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12191/red.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Carregamento</strong></p> + + <p>The document's <code><a href="/en-US/docs/Web/Events/load">load</a></code> event.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12193/blue.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Worker event in main thread</strong></p> + + <p>Shown when the main thread sends a message to a worker, or receives a message from a worker.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12195/orange2.png" style="height: 21px; width: 60px;"></td> + <td> + <p>One of:</p> + + <dl> + <dt>Serialize data on the main thread</dt> + <dd>The main thread is serializing a message to be sent to the worker.</dd> + <dt>Deserialize data on the main thread</dt> + <dd>The main thread is deserializing a message received from the worker.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Worker event in worker thread</strong></p> + + <p>Shown when a worker receives a message from the main thread, or sends a message to the main thread.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/12197/orange2-hollow.png" style="height: 21px; width: 60px;"></td> + <td> + <p>One of:</p> + + <dl> + <dt>Serialize data in Worker</dt> + <dd>The worker is serializing a message to be sent to the main thread.</dd> + <dt>Deserialize data in Worker</dt> + <dd>The worker is deserializing a message received from the main thread.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p>The markers, and their colors, are the same in the Waterfall tool as in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">Waterfall overview</a>, making is easy to correlate from one to the other.</p> + +<h3 id="Filtrar_marcadores">Filtrar marcadores</h3> + +<p>You can control which markers are displayed using a button in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13238/perf-markers.png" style="display: block; height: 694px; margin-left: auto; margin-right: auto; width: 799px;"></p> + +<h2 id="Padrões_de_cascata">Padrões de cascata</h2> + +<p>Exactly what you'll see in the Waterfall is very dependent on the kind of thing your site is doing: JavaScript-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green. But there are common patterns which can alert you to possible performance problems.</p> + +<h3 id="Renderizar_cascata">Renderizar cascata</h3> + +<p>One pattern that you'll often see in the Waterfall view is something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10711/perf-timeline-waterfall.png" style="display: block; height: 286px; margin-left: auto; margin-right: auto; width: 727px;"></p> + +<p>This is a visualization of the basic algorithm the browser uses to update the page in response to some event:</p> + +<ol> + <li><strong>JavaScript Function Call</strong>: some event - for example, a DOM event - causes some JavaScript in the page to run. The JavaScript changes some of the page's DOM or CSSOM.</li> + <li><strong>Recalculate Style</strong>: if the browser thinks the computed styles for page elements have changed, it must then recalculate them.</li> + <li><strong>Layout</strong>: next, the browser uses the computed styles to figure out the position and geometry for the elements. This operation is labeled "layout" but is also sometimes called "reflow".</li> + <li><strong>Paint</strong>: finally, the browser needs to repaint the elements to the screen. One last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "Composition".</li> +</ol> + +<p>This sequence needs to fit into a single frame, since the screen isn't updated until it is complete. It's commonly accepted that 60 frames per second is the rate at which animations will appear smooth. For a rate of 60 frames per second, that gives the browser 16.7 milliseconds to execute the complete flow.</p> + +<p>Importantly for responsiveness, the browser doesn't always have to go through every step:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS animations</a> update the page without having to run any JavaScript.</li> + <li>Not all CSS property changes cause a reflow. Changing properties that can alter an object's geometry and position, such as <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/display">display</a></code>, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, or <code><a href="/en-US/docs/Web/CSS/top">top</a></code>, will cause a reflow. However, changing properties that don't alter geometry or position, such as <code><a href="/en-US/docs/Web/CSS/color">color</a></code> or <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code>, will not.</li> + <li>Not all CSS property changes cause a repaint. In particular, if you animate an element using the <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> property, the browser will use a separate layer for the transformed element, and doesn't even have to repaint when the element is moved: the new position of the element is handled in composition.</li> +</ul> + +<p>The <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a> article shows how animating different CSS properties can give different performance outcomes, and how the Waterfall can help signal that.</p> + +<h3 id="Bloquear_JavaScript">Bloquear JavaScript</h3> + +<p>By default, a site's JavaScript is executed in the same thread that the browser uses for layout updates, repaints, DOM events, and so on. This means that long-running JavaScript functions can cause unresponsiveness (jank): animations may not be smooth, or the site might even freeze.</p> + +<p>Using the frame rate tool and the Waterfall together, it's easy to see when long-running JavaScript is causing responsiveness problems. In the screenshot below, we've zoomed in on a JS function that's caused a drop in the frame rate:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10973/perf-js-blocking-waterfall.png" style="display: block; height: 432px; margin-left: auto; margin-right: auto; width: 1128px;"></p> + +<p>The <a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a> article shows how the Waterfall can highlight responsiveness problems caused by long JavaScript functions, and how you can use asynchronous methods to keep the main thread responsive.</p> + +<h3 id="Pinturas_dispendiosas">Pinturas dispendiosas</h3> + +<p>Some paint effects, such as <code><a href="/en-US/docs/Web/CSS/box-shadow">box-shadow</a></code>, can be expensive, especially if you are applying them in a transition where the browser has to calculate them in every frame. If you're seeing drops in the frame rate, especially during graphically-intensive operations and transitions, check the Waterfall for long green markers.</p> + +<h3 id="Coleção_de_lixo">Coleção de lixo</h3> + +<p>Red markers in the Waterfall represent garbage collection (GC) events, in which <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (the JavaScript engine in Firefox) walks the heap looking for memory that's no longer reachable and subsequently releasing it. GC is relevant to performance because while it's running the JavaScript engine must be paused, so your program is suspended and will be completely unresponsive.</p> + +<p>To help reduce the length of pauses, SpiderMonkey implements <em>incremental GC</em>: this means that it can perform garbage collection in fairly small increments, letting the program run in between. Sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish.</p> + +<ul> +</ul> + +<p>In trying to avoid GC events, and especially non-incremental GC events, it's wise not to try to optimize for the specific implementation of the JavaScript engine. SpiderMonkey uses a complex set of heuristics to determine when GC is needed, and when non-incremental GC in particular is needed. In general, though:</p> + +<ul> + <li>GC is needed when a lot of memory is being allocated</li> + <li>non-incremental GC is usually needed when the memory allocation rate is high enough that SpiderMonkey may run out of memory during incremental GC</li> +</ul> + +<p>When the Waterfall records a GC marker it indicates:</p> + +<ul> + <li>whether the GC was incremental or not</li> + <li>the reason the GC was performed</li> + <li>if the GC was non-incremental, the reason it was non-incremental</li> + <li>starting in Firefox 46, if the GC event was caused by allocation pressure, a link appears, labeled "Show Allocation Triggers". Click the link to see the allocation profile leading up to this GC event. See <a href="/en-US/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">Allocations and Garbage Collection</a> for more details.</li> +</ul> + +<h2 id="Adicionar_marcadores_com_a_API_da_consola">Adicionar marcadores com a API da consola</h2> + +<p>Two markers are directly controlled by <a href="/en-US/docs/Web/API/Console">console API</a> calls: "Console" and "Timestamp".</p> + +<h3 id="Marcadores_da_consola">Marcadores da consola</h3> + +<p>These enable you to mark a specific section of the recording.</p> + +<p>To make a console marker, call <code>console.time()</code> at the start of the section, and <code>console.timeEnd()</code> at the end. These functions take an argument which is used to name the section.</p> + +<p>For example, suppose we have code like this:</p> + +<pre class="brush: js">var iterations = 70; +var multiplier = 1000000000; + +function calculatePrimes() { + + console.time("calculating..."); + + var primes = []; + for (var i = 0; i < iterations; i++) { + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + + console.timeEnd("calculating..."); + + return primes; +}</pre> + +<p>The Waterfall's output will look something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10967/perf-console-time.png" style="display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1192px;"></p> + +<p>The marker is labeled with the argument you passed to <code>console.time()</code>, and when you select the marker, you can see the program stack in the right-hand sidebar.</p> + +<h4 id="Async_stack">Async stack</h4> + +<p class="geckoVersionNote">New in Firefox 41.</p> + +<p>Starting in Firefox 41, the right-hand sidebar will also show the stack at the end of the period: that is, at the point <code>console.timeEnd()</code> was called. If <code>console.timeEnd()</code> was called from the resolution of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, it will also display "(Async: Promise)", under which it will show the "async stack": that is, the call stack at the point the promise was made.</p> + +<p>For example, consider code like this:</p> + +<pre class="brush: js">var timerButton = document.getElementById("timer"); +timerButton.addEventListener("click", handleClick, false); + +function handleClick() { + console.time("timer"); + runTimer(1000).then(timerFinished); +} + +function timerFinished() { + console.timeEnd("timer"); + console.log("ready!"); +} + +function runTimer(t) { + return new Promise(function(resolve) { + setTimeout(resolve, t); + }); +}</pre> + +<p>The Waterfall will display a marker for the period between <code>time()</code> and <code>timeEnd()</code>, and if you select it, you'll see the async stack in the sidebar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11179/async-stack.png" style="display: block; height: 378px; margin-left: auto; margin-right: auto; width: 352px;"></p> + +<h3 id="Marcadores_de_datahora">Marcadores de data/hora</h3> + +<p>Timestamps enable you to mark an instant in the recording.</p> + +<p>To make a timestamp marker, call <code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>. You can pass an argument to label the timestamp.</p> + +<p>For example, suppose we adapt the code above to make a timestamp every 10 iterations of the loop, labeled with the iteration number:</p> + +<pre class="brush: js">var iterations = 70; +var multiplier = 1000000000; + +function calculatePrimes() { + console.time("calculating..."); + + var primes = []; + for (var i = 0; i < iterations; i++) { + + if (i % 10 == 0) { + console.timeStamp(i.toString()); + } + + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + console.timeEnd("calculating..."); + return primes; +}</pre> + +<p>In the Waterfall you'll now see something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10971/perf-timestamp.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 1192px;"></p> + +<p> </p> + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator" style="display: none;"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl" style="display: none;"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_alert_cont"> </div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody> + <tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> + </td> + </tr> + </tbody> +</table> +</div> +</div> + +<div id="SL_shadow_translation_result" style=""> </div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody> + <tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> |