blob: 3c2c61467a974b4f798b2fb591709f31170db6c2 (
plain)
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
|
---
title: Frame rate
slug: Tools/Performance/Frame_rate
translation_of: Tools/Performance/Frame_rate
---
<div class="summary">
<p><font><font>幀速率是一個網站的響應的量度。</font><font>低或不一致的幀速率可以使一個網站出現反應遲鈍或janky，鬧了不好的用戶體驗。</font></font></p>
<p><strong><font><font>60fps的幀頻是平穩的性能目標，給你所有需要響應某些事件更新的16.7毫秒時間預算。</font></font></strong></p>
<p><font><font>在性能工具的幀速率圖表顯示你的幀速率在錄音的過程中。</font><font>它給你，你的網站可能是有問題，使您能夠使用其他工具進行更深入的分析的快速指示。</font></font></p>
</div>
<h2 id="幀速率和響應"><font><font>幀速率和響應</font></font></h2>
<p><font><font>幀速率是指視頻設備可產生圖像（或幀）的速率。</font><font>這是從電影和遊戲最熟悉的，但現在被廣泛用作網站和Web應用程序性能的措施。</font></font></p>
<p><font><font>在Web性能，幀封裝瀏覽器需要做的，以更新和重繪屏幕的工作。</font><font>幀速率是最明顯適用於動畫：如果幀速率太低，動畫將具有生澀外觀，而更快的幀速率會更順暢。</font><font>但幀速率也可用作站點的響應作為用戶的一般衡量與其交互。</font></font></p>
<p><font><font>例如，如果移動鼠標在某個頁面元素觸發一些JavaScript改變元素的外觀，並觸發回流和重繪，那麼所有這些工作需要在該框架完成。</font><font>如果時間過長的瀏覽器來處理框架，那麼瀏覽器就會瞬間出現反應遲鈍（janky）。</font></font></p>
<p><font><font>同樣，如果通過網頁滾動涉及到很多複雜的頁面更新和瀏覽器無法跟上一個可接受的幀速率，滾動頁面會出現遲緩或偶爾會凍結。</font></font></p>
<p><font><font>在一般情況下，高和一致的幀速率將使用戶與網站的互動更愉快和吸引力。</font></font></p>
<div class="note">
<p><font><font>60fps的幀頻被算為是平穩的性能目標，給你所有的需要在應對某些事件做出同步更新16.7毫秒的時間預算。</font></font></p>
<p><font><font>然而，一致性就顯得尤為重要：如果你不能提供60fps的，它是更好地實現較低的幀速率更穩定，並避免幀速率造成該網站凍結突然驟降。</font></font></p>
</div>
<h2 id="幀速率圖"><font><font>幀速率圖</font></font></h2>
<p><font><font>幀速率曲線圖中找到</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview"><font><font>記錄概述</font></font></a><font><font>性能工具的一部分。</font><font>這需要當瀏覽器完成一幀的時間戳，並使用該跟踪幀速率的在記錄的過程中。</font></font></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;"><font><font>x軸是時間上的信息期間，和有三個註釋：最大幀速率，平均幀速率和最低幀速率。</font></font></p>
<h2 id="使用幀速率圖"><font><font>使用幀速率圖</font></font></h2>
<p><font><font>幀速率曲線的巨大價值在於，像</font></font><a href="/en-US/docs/Tools/Web_Console"><font><font>Web控制台</font></font></a><font><font>，它給你，你的網站可能是有問題，使您能夠使用其他工具進行更深入的分析的快速指示。</font><font>例如，這裡有一個性能配置截圖：</font></font></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><font><font>你可以看到，平均幀速率是相當健康的，但有三個點，其中幀頻為倒塌數十毫秒。</font><font>這肯定會導致明顯的口吃的，在網頁中播放任何動畫。</font></font></p>
<p><font><font>幀速率圖表相關聯的</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Timeline_summary"><font><font>瀑布摘要</font></font></a><font><font>直接上面，並且有我們可以看到，在第一兩滴在幀速率是相關的橙色酒吧，其中表示時間花費在執行的JavaScript。</font></font></p>
<p><font><font>如果我們選擇了記錄這些片段之一，主</font></font><a href="/en-US/docs/Tools/Performance/Waterfall"><font><font>瀑布視圖</font></font></a><font><font>下它被放大到它，我們可以看到這是造成問題的功能：</font></font></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><font><font>我們從一個點擊事件的阻止主線程170毫秒的JavaScript函數。</font></font></p>
<p><font><font>它的功能有關係嗎？</font><font>切換到</font></font><a href="/en-US/docs/Tools/Performance/Flame_Chart"><font><font>火焰圖表</font></font></a><font><font>看到在那個點調用堆棧：</font></font></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><font><font>有問題的函數被調用</font></font><code><font><font>doPointlessComputationsInMainThread（） </font></font></code><font><font>，</font><font>並且它在“main.js”定義。</font><font>為了解決這個問題，我們可能會考慮將其分割成塊，並運行裡面件</font></font><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame"><font><font>requestAnimationFrame</font></font></a></code><font><font>，甚至運行在一個全功能</font></font><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers"><font><font>的工人</font></font></a><font><font>。</font><font>在</font></font><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript"><font><font>密集的JavaScript</font></font></a><font><font>本文介紹如何使用這樣的策略，以修復因長期運行的JavaScript同步響應的問題。</font></font></p>
|
