使用Firefox开发工具做性能审计

在本文中，我们将介绍Firefox Web开发工具(“DevTools”)——一组工具，旨在帮助开发人员检查、调试、配置和优化网站和Web应用程序的性能。我们将特别关注与性能相关的工具，但是我们还将了解如何开始使用DevTools，并了解一些有用的配置。

您可以以不同的方式访问DevTools:

单击导航工具栏右边的菜单，单击Web Developer，然后选择要使用的子工具

使用键盘组合，比如Shift+F5 (Windows和macOS)作为性能工具，Ctrl+Shift+E (Windows)或者Cmd+Option+E (macOS)作为网络工具

右键单击页面中的任意位置，选择检查元素。

DevTools 配置

Firefox DevTools具有许多选项，这些选项有助于开发人员定制其体验，例如在Web控制台启用时间戳选项，或禁用HTTP缓存，该HTTP缓存用于模拟在具有dev工具打开的所有页面中的第一负载性能。

您可以以不同的方式访问DevTools设置面板:

首先打开DevTools，然后:

单击工具栏中的设置按钮

按F1显示设置面板上的任何当前工具

按Ctrl+Shift+O (Windows和Linux)， Cmd+Shift+O (macOS)显示设置面板。

在这里你可以选择你的默认工具按钮你想显示在工具箱,主题(dark-light-Firebug)和其他高级设置。

Performance-Focused Tools（性能工具）

在分析web应用程序的性能时，需要区分加载时性能和运行时性能。

加载时间性能回答了诸如“什么资源需要花费太多时间来加载?”“在处理运行时性能时，我们需要关注JavaScript和CSS(特别是CSS动画)，这样我们就能够看到代码在哪里花费了大部分时间，以及什么导致了瓶颈。”

让我们看看网络监视器和性能工具。

The Network Monitor（网络监视器）

网络监视器向您显示了一个列表视图，其中包含了Firefox发出的所有网络请求(例如，当它加载页面时，或者发送xmlhttprequest，获取API请求等等)。

它还可以显示与请求相关的HTTP头、HTTP响应和cookie，并允许您搜索它们。您还可以使用它来执行、显示和保存当前页面负载的性能分析。

简单地说，这个工具可以用来确定浏览器下载web页面的不同资产需要多长时间。

您还可以使用此工具监视和挑选那些正在减慢或阻塞web页面快速加载的请求。当主事件被触发时，网络面板显示(DOMContentLoaded和load)。

Request Timeline

网络列表中的每个请求都有一个时间轴列，该列显示与请求相关的时间信息，比如加载资源所需的总时间。

DevTools标记报表中的主要生命周期事件，如DOMContentLoaded和page load。蓝色表示事件DOMContentLoaded被触发的时间;紫色线表示启动页面加载事件的时间。

DOMContentLoaded Vs Load Events

当完全加载和解析HTML文档(不包括CSS样式表、图像和frame)时，DOMContentLoaded事件会被触发。

当HTML文档和所有相关样式表、图像和frames被完全加载时，事件负载就会触发。

Request Details Panel

一旦单击请求列表中的请求，就可以看到右停靠的details窗格，其中有许多不同的选项卡，如header、params、response、timings和security。

对于性能，我们将特别关注时间信息。

Network Timings

在这个面板中,有许多与每个请求相关的时间指标：

Blocked是在队列中等待网络连接的时间。

Sending是向服务器发送请求所需的时间。

Receiving是从服务器接收响应所花费的时间，或者(如果是缓存的)从缓存读取响应所花费的时间。

Waiting是在接收到第一个字节之前，客户机等待的总时间。在其他性能分析工具如WebPageTest.org或Chrome的DevTools中，这被称为TTFB或时间到第一个字节。

这里还有一个DNS resolution, 这是解析服务器的主机名和连接所需的时间，也是打开TCP连接所需的时间。

How To Analyze The Load Time Performance（如何分析Load时性能）

网络监视器集成了一个性能分析工具，可以用来分析web页面的加载时间性能。

要开始分析加载时间性能，您可以:

单击底部状态栏中的Analyze图标

当您的网络监视器打开时，重新加载您的页面或发出网络请求(实际上，这只是为了显示关于请求的表格信息，而不是做加载时性能分析)。

最后的报告显示了一个饼状图和相应的表格，用于接收到的资源的类型:JavaScript、CSS、图像和字体等。

number of cached responses

total requests

size

transferred size

loading time

First Load Performance

Firefox的DevTools允许您在两种不同的情况下分析web应用程序的性能:

没有缓存，当资源仍然没有缓存时，它会模拟第一次访问。

使用缓存，它模拟了第二次访问。浏览器已经缓存了应用程序的资源，从而避免了许多往返服务器的过程。

您还可以使用Disable Cache设置来模拟在任何选项卡上打开DevTools时首次加载web页面的情况。

JavaScript Performance And Responsiveness（性能和响应性）

JavaScript是单线程的，这意味着浏览器可以同步运行代码，但是多亏了HTML5 Web Workers(用于多线程JavaScript的标准API)，您也可以在其他线程中运行代码。

这个单线程负责运行浏览器正在执行的所有工作，如布局呈现、计算样式和收集垃圾。

还有一些方法，如setTimeout、诸如单击、加载和资源获取等事件，都是由单个线程执行的。(这些任务确实是异步执行的，但是JavaScript中的a- synchronity是不同的:它是通过使用事件驱动的方法、事件循环和队列来模拟的。)

良好的性能和响应能力是因为JavaScript的异步模型机制，但是长时间运行的函数会导致性能差和UI响应能力差。

The Performance Tool（性能工具）

性能工具可以让您了解web页面的UI响应(响应用户交互)和JavaScript代码性能，从而发现web页面的瓶颈和性能问题。

使用性能工具，您可以在一段时间内启动当前打开的web页面的性能分析，您可以使用start和stop记录按钮进行控制。然后，该工具将向您显示浏览器呈现页面的操作的摘要、表格和图表视图。

您可以查找并检测使用性能工具阻塞单个线程的长时间运行的代码片段。

怎么使用性能工具

使用性能工具的步骤非常简单:

打开您的web页面，打开性能面板，然后开始记录性能。

等几秒钟，还要确保在分析期间与页面进行交互，然后停止记录

查找任何长时间运行的函数或事件，并关注FPS低的时间部分(放大)。

当您发现可以针对进一步优化的任何活动时，您可以使用其他子工具来获取关于在何处采取行动的详细信息。

确保遵循一些用户交互场景，并在分析过程中与应用程序UI的不同部分进行交互，特别是要优化的部分。

还要避免不必要的额外操作:例如，不要与您不想分析的部分交互，因为它们只会给报表的结果添加更多的噪声。

Selecting The Time Range（选择时间范围）

Firefox的DevTools支持选择或缩小概要文件的时间范围。您可以单击时间轴或FPS图表部分，然后拖动鼠标选择一段时间。一旦停止拖拽，DevTools就会更新其他视图和图表，只显示在此期间发生的事件的信息。

The FPS Chart

帧速率图显示记录期间每秒帧数。当录音在运行时，这张表就像一个带有活值的FPS表。

FPS图显示了在分析期间FPS的最大值、最小值和平均FPS值。所有这些值都可以快速地告诉您是否存在性能瓶颈。

如果你在运行动画，FPS应该是60 FPS。

您可以使用这个图表来快速地发现视觉差异(崩溃)和不一致性，它们表示帧率的严重下降(这意味着浏览器存在性能瓶颈)。

你可以从这个屏幕截图中看到一个折叠的FPS图表:

The Waterfall Chart

维基百科将瀑布图解释为:

数据可视化的一种形式，有助于理解顺序引入正值或负值的累积效应。瀑布图也被称为飞砖图或马里奥图，因为明显的柱(砖)悬浮在半空中。

对于性能工具，瀑布图显示浏览器正在执行的活动和特定于浏览器的事件的分解，例如:

布局渲染或布局元素(也称为反射)

样式

动画帧请求

重绘或像素画

垃圾收集等。

布局操作或反射和样式计算都很昂贵，因此这些可能是优化的潜在领域。有关更多细节，请搜索参阅百度/谷歌文章。

下面是一个示例应用程序的瀑布图的屏幕截图：

调用树视图

调用树视图显示浏览器花费大部分时间使用的JavaScript函数，以及重要的度量，如活动的总时间、自我时间及其相对于分析时间的百分比。

Self time指操作单独花费的时间，而不考虑它调用的函数。

Total time指操作所花费的时间及其调用的函数。

The JS Flame Chart

Flame图显示了在分析期间JavaScript调用堆栈的Flame图。Flame图是由布伦丹·格雷格创建的一种性能可视化图。

Flame图可以快速、准确地识别大部分的hot code-paths（热代码路径）。

栈条意味着直接存在于CPU中的顶部操作调用了底部操作。

您可以使用帧速率和JavaScriptFlame图、瀑布和调用树视图来确定您的性能问题，并找出需要优化的特定函数。

Flame图向您显示在记录的特定时刻特定函数的调用堆栈的状态。

Flame图有大量的数据，因此要获得有意义的读数，需要放大，直到选择几毫秒。

Color Codes

不同的图表和部分用相同的颜色编码，用于相同类型的操作和资产——JavaScript、CSS、渲染、绘制等等。

您可以使用颜色来区分不同视图中的操作，快速识别导致问题的操作类型，并在切换不同透视图时保持操作的类型。

您可以通过这个菜单过滤掉您希望在图表和视图中看到的单个活动，您还可以看到与不同操作相关的不同颜色。

例如，如果使用CSS动画，您需要关注的是诸如重新计算样式、应用样式更改、布局和绘制等活动。你可以过滤掉其他活动以减少噪音。

对于JavaScript，您需要关注函数调用、解析HTML和解析XML。

结论

在本文中，我们已经了解了如何开始使用Firefox的DevTools，以及如何使用不同的性能相关子工具。Firefox的DevTools是非常全面的，而且随着Firefox最近的性能升级，它更能准确地识别出网站渲染过程中真正有问题的地方。

请关注公众号:程序你好