selenium获取前端性能监控数据window.performance

【前言】

项目中遇到这样一个问题，利用selenium操作页面时有些页面点击后相应很久才会出现，这里可能涉及到从用户发出请求到后台程序相应后返回结果等一些流程，不知道那个环节变慢了，需要调查原因。就需要获取性能监控数据进行分析。

1 核心实现逻辑

1. 获取要监控监测的url
2. 获取前端性能监控等数据window.performance
3. 对数据根据如下图分析得到相应的数据，参考链接：https://www.w3.org/TR/navigation-timing-2/
   通过下面的可以得知，从前端点击请求，到后端返回数据渲染到前端，每个环节的耗时数据指标都很清晰，这样就可以知道慢在那里。
   Redirect -> AppCache -> DNS -> TCP -> Reuqest -> Response -> Processing -> Load
   window.performance 是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持。

1.1 如下performance对象的完整结构图

1.2 对应PerformanceNavigationTiming接口获取的字段属性参数

1.3 对应timing API的时序属性图

2 对应代码

/**   
 * @Description: 获取性能时间属性信息
 * @author: RedMaple
 * @date: 2020年12月7日 下午2:20:13 
 */
private ResourceTiming getNetDataByUrl(String url) {
		if (StringUtils.isBlank(url)) {
			return null;
		}
		ResourceTiming pt = new ResourceTiming();
		String scriptToExecute = "var performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {}; var network = performance.getEntries() || {}; return network;";
		Object executeScript = ((JavascriptExecutor) driver).executeScript(scriptToExecute);
		String jsonString = JSONArray.toJSONString(executeScript);
		List<PerformanceResourceTiming> timingList = JSONArray.parseArray(jsonString, PerformanceResourceTiming.class);
		for (PerformanceResourceTiming rm : timingList) {
			if (rm.getName().equals(url)) {
				pt.setUrl(rm.getName());
				pt.setEntryType(rm.getEntryType());
				pt.setDuration(rm.getDuration());
				pt.setUnload(rm.getUnloadEventEnd() - rm.getUnloadEventStart());
				pt.setRedirect(rm.getRedirectStart() - rm.getRedirectEnd());
				pt.setAppCache(rm.getDomainLookupStart() - rm.getFetchStart());
				pt.setDns(rm.getDomainLookupEnd() - rm.getDomainLookupStart());
				pt.setTcp(rm.getConnectEnd() - rm.getConnectStart());
				pt.setRequest(rm.getResponseStart() - rm.getRequestStart());
				pt.setResponse(rm.getResponseEnd() - rm.getResponseStart());
				// 这两个含义差不多一致，modify by 2022-09-15
				pt.setProcessing(rm.getDomComplete() - rm.getDomInteractive());
				pt.setDomReady(rm.getDomComplete() - rm.getDomInteractive());
				pt.setOnload(rm.getLoadEventEnd() - rm.getLoadEventStart());
				pt.setTtfb(rm.getResponseStart() - rm.getStartTime());
				break;
			}
		}
		return pt;
	}

/**   
 * @Description: 性能时间属性类
 * @author: RedMaple
 * @date: 2020年12月7日 下午2:20:13 
 */
@Data
public class ResourceTiming {
	// 资源url
	@TableField(exist = false)
	private String url;
	// 资源类型
	private String entryType;
	// 整个请求持续时间
	private double duration;
	// 卸载页面的时间
	private double unload;
	// 重定向时间
	private double redirect;
	// 应用程序缓存时间
	private double appCache;
	// DNS缓存时间
	private double dns;
	// TCP建立连接完成握手的时间
	private double tcp;
	// 请求完成的时间
	private double request;
	// 内容加载响应完成的时间
	private double response;
	// 处理中的时间
	private double processing;
	// 加载时间
	private double onload;
	// Time To First Byte,读取页面第一个字节的时间
	private double ttfb;
	// 解析DOM树结构时间
	private double domReady;
}

【参考链接】

https://www.w3.org/TR/navigation-timing-2/
https://www.cnblogs.com/sunshq/p/5312231.html
TTFB: https://en.wikipedia.org/wiki/Time_to_first_byte