HTML5 的 performance timing API 统计了一个浏览器窗口从卸载当前页面开始到加载完毕目标页面的整个流程中,每个节点的时间戳 通过这些节点的时间戳,我们可以计算出很多有用的信息 例如 DNS 查询耗时 TCP连接耗时 request请求耗时 解析dom树耗时 …… 在GitHub上找到一个很实用的JS代码,统计出了各项耗时数据 地址是:https://github.com/CraryPrimitiveMan/performance-tool 下面列出其中的各项数据计算方式 准备新页面时间耗时 timing.fetchStart - timing.navigationStart redirect 重定向耗时 timing.redirectEnd - timing.redirectStart Appcache 耗时 timing.domainLookupStart - timing.fetchStart unload 卸载之前网页耗时 timing.unloadEventEnd - timing.unloadEventStart DNS 查询耗时 timing.domainLookupEnd - timing.domainLookupStart TCP连接耗时 timing.connectEnd - timing.connectStart request请求耗时 timing.responseEnd - timing.requestStart 请求完毕至DOM加载 timing.domInteractive - timing.responseEnd 解析dom树耗时 timing.domComplete - timing.domInteractive load事件耗时 timing.loadEventEnd - timing.loadEventStart; 从开始至load总耗时
timing.loadEventEnd - timing.navigationStart