自动Web应用程序前端性能测试的替代方案

Question

我正在寻找一种定期测试我的Web应用程序前端性能的方法。

具体来说，我对解析主机名，从服务器获取响应，下载/渲染/执行资源等所花费的时间感兴趣。我还想在交互时测量这些内容使用应用程序，而不仅仅是加载页面时。

我可以在手动与我的网络应用程序交互时使用Firebug或Chrome开发者工具，但我希望这种前端性能测试成为我持续集成过程的一部分。我希望每晚都有前端性能测试结果，这样就可以轻松捕获性能回归。这就是为什么我的一个初步结论是我想利用我现有的功能性Selenium / WebDriver测试套件（或测试套件的子集）。

因此，假设我使用Selenium与我的Web应用程序进行交互，我真正需要的是一个工具来衡量浏览器中的前端性能。

到目前为止，我已经看了三个选项：

1）browsermob-proxy

browsermob-proxy是一个开源代理，使用HAR格式捕获性能数据。除Java和NodeJS绑定外，它还提供HTTP REST API。因为它是分析HTTP流量的代理，所以它不会向我提供有关浏览器中发生的事情的任何信息（例如渲染等），这是我最感兴趣的。

2）WebPagetest

WebPagetest也是开源软件，可在webpagetest.org上以免费云服务的形式获得。设置此服务的私有实例是可能的（而不是太难）。我给它一个URL，我得到了该页面加载的性能报告。但是，当我与它进行交互时，它不允许我监视应用程序 - 这是至关重要的 - 特别是在单个页面Web应用程序中，客户端有很多东西 - 就像我的一样。

3）Compuware APM AJAX Edition（以前的DynaTrace AJAX版）

Compuware APM AJAX Edition是免费的（如免费提供的）专有软件，它使用浏览器插件在浏览时从浏览器中捕获信息，这意味着它可以在Selenium测试套件执行期间自动收集数据。

将其自动化并将其执行集成到持续集成过程中非常容易，但报告还有很多不足之处。测试结果分为“会话”，这是从浏览器窗口打开到关闭之间的时间段。没有用于比较测试结果的功能，这使得很难跟踪进度并发现回归。

Compuware APM AJAX版是迄今为止我见过的最佳选择 - 但必须有更好的选择 - 正确？

Answer 1

如何将 YSlow 和/或 Google Page Speed 与 Selenium 一起使用。

1. 创建单独的firefox个人资料 - 一个用于Google Page Speed，另一个用于YSlow。
2. 在相应的个人资料中安装扩展程序
3. 在各自的配置文件中为两个配置文件和Page Speed和YSlow安装Firebug（为每个配置文件单独安装和配置扩展）。
4. 使用Selenium加载自定义配置文件

了解更多here和here

以上链接提供了一个想法。 希望这会有所帮助。

Answer 2

Compuware AJAX版本允许进行比较，长期，分析和CI集成，以便随着时间的推移查看构建和功能。有一个与该功能相关的许可证，以及将浏览器端PurePaths一直链接回SQL ..

http://apmblog.compuware.com/2012/09/11/top-performance-mistakes-when-moving-from-test-to-production-supersized-content-2/

Answer 3

我对这个主题的感觉是最好的方法是将javascript注入页面并让该报告返回用户体验的指标。有各种各样的方法，但它们基本上解决了滚动自己的代码（更多的工作，但最终更好的结果）或使用第三方产品。 New Relic有一个非常好的解决方案。

这种方法的问题是你仍然需要一些东西来运行浏览器以便javascript被解雇 - 它很难自动化。这就是问题所在，但除此之外，您还拥有可靠，一致，免维护的方法来记录和记录用户体验。

Answer 4

我一直致力于在后台运行WebPagetest的服务，并允许您随着时间的推移跟踪前端性能。

http://speedcurve.com

您可以跟踪并深入了解每个测试的瀑布，以了解您所追求的一些内容。为了捕获交互性能，WebPagetest最近还添加了用户计时，因此您可以向页面添加简单的JS事件，并将它们显示在WebPagetest和SpeedCurve中。

http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user-experience.html

如果它是单页应用程序，那么Caliper是新的，看起来非常有希望。

http://caliper.io/

Answer 5

我最近正在寻找如何实施前端性能测试。我还没有实现它，但我打算使用yslow和phantomjs http://yslow.org/phantomjs/#screenshots

Answer 6

首先 - 我使用browsermob代理来响应时间和代码，但实际上它并没有给你任何像JS执行时间的东西。 你已经提到了DynaTrace所以我不会讨论这个。还有什么 - 我没有用过自己，但我听过有人使用httpWatch。它与C＃非常集成，据说能够分析ajax调用的性能。

此外，不要忘记，您可以使用webdriver注入javascript，因此您可以尝试使用boomerang或类似的东西。

Answer 7

http://html5testing.co一起使用phantom.js和casper.js。他们使用webkit自定义构建一个跨任何浏览器与您的应用交互的测试。您可以获得带有屏幕截图的报告，可以随时运行测试，进行延迟监控，还可以查看之前运行的所有测试。

它不是免费的，但它肯定比你用拼凑的东西进行测试的所有时间便宜得多。

Answer 8

您是否看过服务器将根据您的请求捕获的内容？每个Web服务器都能够为前端的每个请求捕获并记录以秒为单位的时间（以微秒为单位）。您可以在后端提取数据并使用任意数量的工具进行可视化。将它与免费的GEoIP数据库相结合，您甚至可以按国家和城市查看数据。为GEoIP数据支付更多费用，您可以查看移动网络上的移动设备与家庭或公司网络上的移动设备，以观察网络连接（您无法控制）的行为差异。

至于对前端性能的痴迷，请将其留给功能测试人员。优化可以在一台PC上处理，浏览器中的工具与Charles代理相结合，可以改变缓存选项和速度。一旦你的应用程序进入疯狂状态，你无论如何都无法控制前端性能。根据浏览器类型和单个PC上的负载，渲染时间因PC而异。你有没有看到只需加载几个工具栏并跟踪所有用户操作的浏览器会发生什么？即使是拥有最优化页面的最快网站也会慢慢爬行。

完成工作并优化页面设计，组件数量，缓存模型等......然后，为了提高性能和可扩展性，请将注意力转移到服务器上，远离客户端。

Answer 9

由于您已标记ASP.Net，您可能需要查看ANTS性能分析器 - http://www.red-gate.com/products/dotnet-development/

Answer 10

使用AgileLoad

进行前端性能测试

AgileLoad脚本编辑器捕获并分析用户与应用程序之间的所有请求，以构建测试场景。

重播 功能可验证通过重播和比较每个请求与初始方案生成的脚本。

重播标签 包含测试方案的每个页面的图形条形图，其中显示主要请求所用的时间（蓝色）和总体响应时间（橙色）它还为您提供所有已加载资源的详细信息，每个资源所花费的时间，与每个HTTP请求关联的详细HTTP响应（正文，客户端HTTP标头，服务器HTTP标头）。

Agileload前端性能

对于每个页面，您还可以检索HTML视图，源视图，结构视图，HTML树视图，HTML服务器标题视图

Http数据窗格

网页性能摘要为您提供有关DNS时间，tcp连接时间，SSL握手时间，发送时间，服务器时间，接收时间，响应http状态，响应大小（以字节为单位）的详细信息。

网络效果详情

此页面速度瀑布突出显示了针对测试方案的每个页面优化的有问题的资源。

Web应用程序在设计和内容方面变得更加丰富和丰富，同时良好的用户体验已成为最理想的属性。有一种误解是应用程序所需的响应时间只能通过优化服务器端来实现。研究表明，80％-90％的页面加载时间用于客户端，40-50％的页面加载时间可以通过仅关注应用程序的前端来优化，而服务器端优化的比例为20％。

前端性能优化与后端优化不同。一个是从单个用户的角度改进性能，另一个是在同时使用资源时从多用户角度提高性能。

这两项任务都是互补的，可以使用 Agileload进行测试。

参考文献：Agile Load

Answer 11

值得一看Chrome Telemetry（http://www.chromium.org/developers/telemetry）

显然只有Chrome，但它是Adobe用来测试TopCoat

的性能的