衡量UI性能的工具

Question

谁能推荐一种工具来衡量Web App的UI级别的性能？

我并不是在专门进行负载测试，我们的应用一次最多只能容纳5个用户，我希望能够自动执行并重新运行的指标是诸如页面加载时间，从单击按钮到事件发生，滑出疼痛的反应时间等。我们正在分别衡量API性能，希望能够确定速度下降是API问题还是可以在UI中解决的问题。

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

Answer 1

您可以通过 Selenium* 通过注入 JavaScript 来访问 Google Chrome开发者工具 上的 网络面板数据
，从而提取Web应用程序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}]