Skip to content
On this page

加载速度

根据W3C规范 Navigation Timing Level 2 可以测量出一些关于首次访问速度相关的数据。 timestamp-diagram

手动获取

这些数据都会在页面隐藏时上报且只上报一次,同样可以手动获取

typescript
const eagle = new EagleTracker({
  isTest: true,
  appId: 'XXXXXXXX',
  dsn: 'http://test.com/log'
})
const perf = eagle.performance
console.log(perf.getNavigationTiming())

数据示例:

json
{
  "TTI": 78.90000003576279,
  "Ready": 160.10000002384186,
  "Load": 349.30000001192093,
  "DNS": 0,
  "TCP": 0,
  "SSL": 0,
  "TTFB": 1.5999999642372131,
  "Trans": 1.199999988079071,
  "DOM": 69.40000003576279,
  "Res": 189.19999998807907,
  "FirstByte": 8.300000011920929
}

具体类型可查看 MPerformanceNavigationTiming

数据说明

针对数据示例中的每个字段作出解释。

上报字段描述计算公式备注
TTI首次可交互时间domInteractive - fetchStart浏览器完成所有HTML解析并且完成DOM构建,此时浏览器开始加载资源。
ReadyHTML加载完成时间, 即DOM Ready时间。domContentLoadEventEnd - fetchStart如果页面有同步执行的JS,则同步JS执行时间=Ready-TTI。
Load页面完全加载时间loadEventStart - fetchStartLoad=首次渲染时间+DOM解析耗时+同步JS执行+资源加载耗时。
DNSDNS查询耗时domainLookupEnd - domainLookupStart
TCPTCP连接耗时connectEnd - connectStart
SSLSSL安全连接耗时connectEnd - secureConnectionStart只在HTTPS下有效。
TTFB请求响应耗时responseStart - requestStart
Trans内容传输耗时responseEnd - responseStart
DOMDOM解析耗时domInteractive - responseEnd
Res资源加载耗时loadEventStart - domContentLoadedEventEnd表示页面中的同步加载资源。
FirstByte首包时间responseStart - domainLookupStart第一包接收的时间。