blob: 5e0c776482190d22ef40afff45b254bb040ff4f2 (
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
59
60
61
62
63
64
65
66
67
68
69
70
|
---
title: 帧率
slug: Tools/Performance/Frame_rate
translation_of: Tools/Performance/Frame_rate
---
<div>{{ToolsSidebar}}</div>
<div class="summary">
<p>帧率是网站响应能力的指标。 较低或不一致的帧率可能会使网站显得响应慢或卡死，从而带来不良的用户体验。</p>
<p>60 fps 的帧率是站点流畅展示的目标，因此，为响应某些事件所需的所有更新，您需要 16.7 ms 的时间预算。</p>
<p>“性能”工具中的帧率图显示了录制过程中的帧率。 它可以快速指出您的站点可能出现问题的位置，使您可以使用其他工具进行更深入的分析。</p>
</div>
<h2 id="帧率和响应">帧率和响应</h2>
<p>帧率是视频设备可以产生图像（或帧）的速率。 电影和游戏最熟悉它，但现在已广泛用作网站和 Web 应用程序的性能指标。</p>
<p>在网络性能中，帧封装了浏览器为了更新和重绘屏幕而需要做的工作。 帧率最明显地适用于动画：如果帧率太低，则动画将看起来有抖动，而更快的帧率将使得动画更流畅。 但是，当用户与网站交互时，帧率也可以作为衡量网站响应能力的常用指标。</p>
<p>例如，如果将鼠标移到某个页面元素上触发了一些 JavaScript，这些 JavaScript 改变了元素的外观，并触发了重排和重绘，那么所有这些工作都需要在该帧中完成。 如果浏览器处理该帧花费的时间太长，那么浏览器将显示暂时无响应（卡顿）。</p>
<p>同样的，如果页面滚动涉及很多复杂的页面更新，并且浏览器无法保持可接受的帧率，则滚动页面将显得缓慢或卡死。</p>
<p>通常，较高且一致的帧率将使用户与站点的交互更加舒服。</p>
<div class="note">
<p>60 fps 的帧率被认为是实现流畅显示的目标，因此，为响应某些事件而需要同步进行的所有更新，需要在 16.7 ms 内完成。</p>
<p>但是，一致性尤为重要：如果您无法提供 60 fps，则最好以更低的速率连续提供更好的帧率，并避免帧速率突然下降而导致站点假死。</p>
</div>
<h2 id="帧率图">帧率图</h2>
<p>可以在“性能”工具的“<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#Recording_overview">录制概览</a>”中找到帧率图。 当浏览器完成一帧时需要花费一个时间戳，并使用它来跟踪记录过程中的帧率。</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;">x 轴是全部周期内的时间，共有三个注解：最大帧率，平均帧率和最低帧率。</p>
<h2 id="使用帧率图">使用帧率图</h2>
<p>帧率图的最大的价值在于，它和 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Web_Console">Web 控制台</a>一样，可以快速指出您的站点可能出现问题的位置，从而使您可以使用其他工具进行更深入的分析。 例如，这是性能文件的屏幕截图：</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>您可以看到平均帧率在一定程度上是正常的，但是有三个点，帧率会崩溃数 10 毫秒。 对于页面中正在播放的任何动画，这无疑会引起明显的停顿。</p>
<p>帧率图与位于其直接上方的<a href="/zh-CN/docs/Tools/Performance/UI_Tour#Waterfall_overview">瀑布摘要</a>相关，并且可以看到帧率的前两个下降与橙色条形相关，这是花费在执行JavaScript上的时间。</p>
<p>如果我们从记录的这些片段中选择一个，则其下方的主<a href="/zh-CN/docs/Tools/Performance/Waterfall">瀑布视图</a>将会把它放大，然后我们可以看到导致问题的函数：</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>我们有一个来自 click 事件的 JavaScript 函数，该函数会将主线程阻塞了 170 毫秒。</p>
<p>但是，是哪个功能呢？ 切换到<a href="/zh-CN/docs/Tools/Performance/Flame_Chart">火焰图</a>查看当时的调用堆栈：<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>出问题的函数称是 <code>doPointlessComputations()</code>，它在 “ main.js” 中定义。 要解决此问题，我们可以考虑将其拆分为多个部分，然后在 <code><a href="/zh-CN/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></code> 中运行这些部分，甚至在 <a href="/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers">worker</a> 中运行整个函数。 <a href="/zh-CN/docs/Tools/Performance/Scenarios/Intensive_JavaScript">密集型 JavaScript</a> 文章展示了哪些策略可以来解决由长时间运行的同步 JavaScript 引起的响应性问题。</p>
|
