前端小技巧(2)-performance.timing属性介绍

1,422 阅读2分钟

performance.timing属性介绍:

  1. navigationStart 加载起始时间
  2. redirectStart 重定向开始时间(如果发生了HTTP重定向,每次重定向都和当前文档同域的话,就返回开始重定向的fetchStart的值。其他情况,则返回0)
  3. redirectEnd 重定向结束时间(如果发生了HTTP重定向,每次重定向都和当前文档同域的话,就返回最后一次重定向接受完数据的时间。其他情况则返回0)
  4. fetchStart 浏览器发起资源请求时,如果有缓存,则返回读取缓存的开始时间
  5. domainLookupStart查询DNS的开始时间。如果请求没有发起DNS请求,如keep-alive,缓存等,则返回fetchStart
  6. domainLookupEnd 查询DNS的结束时间。如果没有发起DNS请求,同上
  7. connectStart 开始建立TCP请求的时间。如果请求是keep-alive,缓存等,则返回domainLookupEnd,(secureConnectionStart) 如果在进行TLS或SSL,则返回握手时间
  8. connectEnd 完成TCP链接的时间。如果是keep-alive,缓存等,同connectStart
  9. requestStart 发起请求的时间
  10. responseStart 服务器开始响应的时间
  11. unloadEventStart unload事件触发的时间
  12. unloadEventEnd unload事件执行完的时间
  13. responseEnd 当浏览器接收到响应的最后一个字节时的时间
  14. domLoading 表示开始解析第一批收到的 HTML 文档的字节
  15. domInteractive 表示完成全部 HTML 的解析并且 DOM 构建完毕
  16. domContentLoadedEventStart 开始触发DomContentLoadedEvent事件的时间
  17. domContentLoadedEventEnd DomContentLoadedEvent事件结束的时间
  18. domComplete 表示所有的处理都已完成并且所有的附属资源都已经下载完毕
  19. loadEventStart 触发load的时间,如没有则返回0
  20. loadEventEnd load事件执行完的时间,如没有则返回0

简单用法


DNS解析时间: domainLookupEnd - domainLookupStart
TCP建立连接时间: connectEnd - connectStart
白屏时间: responseStart - navigationStart
dom渲染完成时间: domContentLoadedEventEnd - navigationStart
页面onload时间: loadEventEnd - navigationStart

参数列出来了,很明显可以根据上面的内容统计页面加载速度。