用于衡量 UI 性能的工具 [英] Tools for measuring UI Performance

问题描述

谁能推荐一种工具来衡量 Web 应用的 UI 级别的性能?

Can anyone suggest a tool to measure the performance of the UI level of a Web App?

我并没有特别关注负载测试，我们的应用在任何时候最多只能有 5 个用户，我希望能够自动化和重新运行的指标是页面加载时间，点击事件发生的按钮，滑出疼痛的反应时间等.我们正在单独测量 API 性能，并希望能够确定减速是 API 问题还是可以在 UI 中整理的问题.

I am not looking at Load testing specifically our app only has a max of 5 users at any one time, the metrics I want to be able to automate and rerun are things like Page Load times, the time it takes from clicking a button to an event happening, reaction times for slide out pains etc. We are measuring API performance seperatly and want to be able to determine if slowdown is an API issue or something that can be tidied up in the UI.

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

Ideally is there something I can combine with Selenium, click a button and then time how long it takes for the expected action to occur. Our Automation Framework is written in Ruby. Our testing is all done on Chrome as it is the only browser used, we have not yet moved to Headless Chrome and ideally don't want to move to Phantom JS.

推荐答案

您可以通过访问 Google Chrome Developer 上的 Network Panel Data 来提取 Web App 的 UI 级别的性能数据工具通过Selenium注入一个JavaScript如下:

You can extract the performance data of the UI level of a Web App by accessing Network Panel Data on Google Chrome Developer Tools through Selenium by injecting a JavaScript as follows :

• 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);

提取的参数如下:

The parameters extracted are as follows :

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}]

这篇关于用于衡量 UI 性能的工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！