测量 UI 性能的工具

Question

任何人都可以建议一种工具来衡量 Web 应用程序的 UI 级别的性能吗？

我不是专门看负载测试，我们的应用程序在任何时候最多只有 5 个用户，我希望能够自动化和重新运行的指标是页面加载时间，从单击按钮到事件发生、滑出疼痛的反应时间等。我们正在单独测量 API 性能，并希望能够确定速度下降是 API 问题还是可以在 UI 中整理的东西。

理想情况下，我可以将某些东西与 Selenium 结合使用，单击一个按钮，然后计算预期操作发生所需的时间。我们的自动化框架是用 Ruby 编写的。我们的测试全部在 Chrome 上完成，因为它是唯一使用的浏览器，我们还没有迁移到 Headless Chrome，理想情况下不想迁移到 Phantom JS。

Answer 1

您可以通过注入JavaScript来通过Selenium访问Google Chrome Developer Tools上的网络面板数据来提取 Web App 的 UI 级别的性能数据，如下所示：

• Selenium-Java 代码段

  driver.get("http://www.google.com");
  System.out.println(driver.getTitle());
  String scriptToExecute = "var performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {}; var network = performance.getEntries() || {}; return network;";
  String netData = ((JavascriptExecutor)driver).executeScript(scriptToExecute).toString();
  System.out.println(netData);
  

• 提取的参数如下：

  connectEnd                 Time when server connection is finished.
  connectStart               Time just before server connection begins.
  domComplete                Time just before document readiness completes.
  domContentLoadedEventEnd   Time after DOMContentLoaded event completes.
  domContentLoadedEventStart Time just before DOMContentLoaded starts.
  domInteractive             Time just before readiness set to interactive.
  domLoading                 Time just before readiness set to loading.
  domainLookupEnd            Time after domain name lookup.
  domainLookupStart          Time just before domain name lookup.
  fetchStart                 Time when the resource starts being fetched.
  loadEventEnd               Time when the load event is complete.
  loadEventStart             Time just before the load event is fired.
  navigationStart            Time after the previous document begins unload.
  redirectCount              Number of redirects since the last non-redirect.
  redirectEnd                Time after last redirect response ends.
  redirectStart              Time of fetch that initiated a redirect.
  requestStart               Time just before a server request.
  responseEnd                Time after the end of a response or connection.
  responseStart              Time just before the start of a response.
  timing                     Reference to a performance timing object.
  navigation                 Reference to performance navigation object.
  performance                Reference to performance object for a window.
  type                       Type of the last non-redirect navigation event.
  unloadEventEnd             Time after the previous document is unloaded.
  unloadEventStart           Time just before the unload event is fired.
  

控制台输出：

[{redirectCount=0, encodedBodySize=221323, unloadEventEnd=0, responseEnd=2862.8000000000006, domainLookupEnd=1504.42, unloadEventStart=0, domContentLoadedEventStart=4210.570000000001, type=navigate, decodedBodySize=221323, duration=8536.735, redirectStart=0, connectEnd=1894.2450000000001, toJSON={}, requestStart=1901.1250000000002, startTime=0, fetchStart=2863.1150000000002, domContentLoadedEventEnd=4217.22, entryType=navigation, workerStart=0, responseStart=2043.73, domInteractive=4210.525000000001, domComplete=8508.945000000002, domainLookupStart=1504.42, redirectEnd=0, transferSize=221894, connectStart=1504.42, loadEventStart=8510.7, secureConnectionStart=1549.4750000000001, name=http://www.google.com/, nextHopProtocol=h2, initiatorType=navigation, loadEventEnd=8536.735}, {encodedBodySize=2623, entryType=resource, responseEnd=3084.8050000000003, workerStart=0, responseStart=2949.635, domainLookupEnd=2896.7950000000005, domainLookupStart=2896.7950000000005, redirectEnd=0, decodedBodySize=2623, duration=188.00999999999976, transferSize=2795, redirectStart=0, connectEnd=2896.7950000000005, toJSON={}, connectStart=2896.7950000000005, requestStart=2898.8500000000004, secureConnectionStart=0, name=https://www.google.co.in/logos/doodles/2018/doodle-snow-games-day-7-5009413877268480.2-s.png, startTime=2896.7950000000005, fetchStart=2896.7950000000005, nextHopProtocol=h2, initiatorType=img}, {encodedBodySize=0, entryType=resource, responseEnd=3686.665, workerStart=0, responseStart=0, domainLookupEnd=0, domainLookupStart=0, redirectEnd=0, decodedBodySize=0, duration=789.3299999999995, transferSize=0, redirectStart=0, connectEnd=0, toJSON={}, connectStart=0, requestStart=0, secureConnectionStart=0, name=https://www.gstatic.com/external_hosted/createjs/createjs-2015.11.26.min.js, startTime=2897.3350000000005, fetchStart=2897.3350000000005, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=0, entryType=resource, responseEnd=3129.655, workerStart=0, responseStart=0, domainLookupEnd=0, domainLookupStart=0, redirectEnd=0, decodedBodySize=0, duration=209.14999999999964, transferSize=0, redirectStart=0, connectEnd=0, toJSON={}, connectStart=0, requestStart=0, secureConnectionStart=0, name=https://ssl.gstatic.com/gb/images/i1_1967ca6a.png, startTime=2920.5050000000006, fetchStart=2920.5050000000006, nextHopProtocol=h2, initiatorType=css}, {duration=0, entryType=paint, toJSON={}, name=first-paint, startTime=3089.57}, {duration=0, entryType=paint, toJSON={}, name=first-contentful-paint, startTime=3089.5750000000003}, {encodedBodySize=11842, entryType=resource, responseEnd=3260.3000000000006, workerStart=0, responseStart=3163.4650000000006, domainLookupEnd=3094.1400000000003, domainLookupStart=3094.1400000000003, redirectEnd=0, decodedBodySize=11842, duration=166.1600000000003, transferSize=11956, redirectStart=0, connectEnd=3094.1400000000003, toJSON={}, connectStart=3094.1400000000003, requestStart=3095.53, secureConnectionStart=0, name=https://www.google.co.in/logos/2018/snowgames_luge/cta.png, startTime=3094.1400000000003, fetchStart=3094.1400000000003, nextHopProtocol=h2, initiatorType=css}, {encodedBodySize=232500, entryType=resource, responseEnd=6086.695000000001, workerStart=0, responseStart=3776.0950000000003, domainLookupEnd=3728.21, domainLookupStart=3728.21, redirectEnd=0, decodedBodySize=740604, duration=2358.4850000000006, transferSize=232769, redirectStart=0, connectEnd=3728.21, toJSON={}, connectStart=3728.21, requestStart=3729.3250000000003, secureConnectionStart=0, name=https://www.google.co.in/logos/2018/snowgames_luge/snowgames_luge18.2.js, startTime=3728.21, fetchStart=3728.21, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=0, entryType=resource, responseEnd=7080.765, workerStart=0, responseStart=7079.8150000000005, domainLookupEnd=4210.260000000001, domainLookupStart=4210.260000000001, redirectEnd=0, decodedBodySize=0, duration=2870.504999999999, transferSize=46, redirectStart=0, connectEnd=4210.260000000001, toJSON={}, connectStart=4210.260000000001, requestStart=4211.54, secureConnectionStart=0, name=https://www.google.co.in/gen_204?s=webaft&atyp=csi&ei=_q6CWojELMLuvASp6ZEY&rt=wsrt.2885,aft.1324,prt.1324, startTime=4210.260000000001, fetchStart=4210.260000000001, nextHopProtocol=h2, initiatorType=beacon}, {encodedBodySize=146393, entryType=resource, responseEnd=7750.4400000000005, workerStart=0, responseStart=6089.950000000001, domainLookupEnd=4218.745, domainLookupStart=4218.745, redirectEnd=0, decodedBodySize=421665, duration=3531.6950000000006, transferSize=146605, redirectStart=0, connectEnd=4218.745, toJSON={}, connectStart=4218.745, requestStart=4219.87, secureConnectionStart=0, name=https://www.google.co.in/xjs/_/js/k=xjs.s.en.ce3a-RKhSpw.O/m=sx,sb,cdos,cr,elog,hsm,jsa,r,d,csi/am=wCL0eMEBiP8PAUWiFQQWIE0wDA0/rt=j/d=1/t=zcms/rs=ACT90oGXoKgamzhHqIk5RIw3HVermJmYow, startTime=4218.745, fetchStart=4218.745, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=0, entryType=resource, responseEnd=5235.985000000001, workerStart=0, responseStart=0, domainLookupEnd=0, domainLookupStart=0, redirectEnd=0, decodedBodySize=0, duration=816.4299999999994, transferSize=0, redirectStart=0, connectEnd=0, toJSON={}, connectStart=0, requestStart=0, secureConnectionStart=0, name=https://www.gstatic.com/og/_/js/k=og.og2.en_US.oN1DeTh5DCc.O/rt=j/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTtvVAie43QBzx5aLGc9xwmpprbMfQ, startTime=4419.555000000001, fetchStart=4419.555000000001, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=0, entryType=resource, responseEnd=7618.695000000001, workerStart=0, responseStart=0, domainLookupEnd=0, domainLookupStart=0, redirectEnd=0, decodedBodySize=0, duration=2331.785, transferSize=0, redirectStart=0, connectEnd=0, toJSON={}, connectStart=0, requestStart=0, secureConnectionStart=0, name=https://apis.google.com/_/scs/abc-static/_/js/k=gapi.gapi.en.41Z8rKx1XQQ.O/m=gapi_iframes,googleapis_client,plusone/rt=j/sv=1/d=1/ed=1/am=AAE/rs=AHpOoo-9aMm3x1MgiL0Q16Hn9-7ySAbiAQ/cb=gapi.loaded_0, startTime=5286.910000000001, fetchStart=5286.910000000001, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=33155, entryType=resource, responseEnd=8232.415, workerStart=0, responseStart=7961.63, domainLookupEnd=7909.375000000001, domainLookupStart=7909.375000000001, redirectEnd=0, decodedBodySize=101433, duration=323.03999999999996, transferSize=33289, redirectStart=0, connectEnd=7909.375000000001, toJSON={}, connectStart=7909.375000000001, requestStart=7911.31, secureConnectionStart=0, name=https://www.google.co.in/xjs/_/js/k=xjs.s.en.byi87tp8hFQ.O/m=aa,abd,async,dvl,foot,fpe,ipv6,lu,m,mu,sf,sonic,spch,d3l,udlg/am=wCL0eMEBiP8PAUWiFQQWIE0wDA0/exm=sx,sb,cdos,cr,elog,hsm,jsa,r,d,csi/rt=j/d=1/ed=1/t=zcms/rs=ACT90oHN7XGqdfNtn5tbonkyQwGSzrxogw?xjs=s1, startTime=7909.375000000001, fetchStart=7909.375000000001, nextHopProtocol=h2, initiatorType=script}, {encodedBodySize=0, entryType=resource, responseEnd=8265.45, workerStart=0, responseStart=0, domainLookupEnd=0, domainLookupStart=0, redirectEnd=0, decodedBodySize=0, duration=355.22500000000036, transferSize=0, redirectStart=0, connectEnd=0, toJSON={}, connectStart=0, requestStart=0, secureConnectionStart=0, name=https://www.google.com/textinputassistant/tia.png, startTime=7910.225, fetchStart=7910.225, nextHopProtocol=h2, initiatorType=img}, {encodedBodySize=469, entryType=resource, responseEnd=8264.44, workerStart=0, responseStart=8234.305, domainLookupEnd=7910.400000000001, domainLookupStart=7910.400000000001, redirectEnd=0, decodedBodySize=469, duration=354.03999999999996, transferSize=559, redirectStart=0, connectEnd=7910.400000000001, toJSON={}, connectStart=7910.400000000001, requestStart=7912.325000000001, secureConnectionStart=0, name=https://www.google.co.in/logos/2018/snowgames_luge/main-sprite.png, startTime=7910.400000000001, fetchStart=7910.400000000001, nextHopProtocol=h2, initiatorType=img}]