你以为什么是perfomance之基础属性

perfomance是浏览器提供给开发者用作监前端基础性能的标准api,通过该api的中提供的各项数据指标,前端开发者可以多快好省的定位性能损耗的各个环节。

performance对象

performance对象是挂载在window上的属性,通过使用window.performance或直接使用performance获得:

基础属性介绍

1.navigation

  • type,返回一个值,表示加载来源。 0,即 perfortance.navigation.TYPE_NAVIGATE ,点击链接、地址栏输入、表单提交、脚本操作等。 1,即 perfortance.navigation.TYPE_RELOAD ,点击重新加载按钮、location.reload。 2,即 perfortance.navigation.TYPE_BACK_FORWARD,点击前进或后退按钮。 255,即perfortance.navigation.TYPE_RESERVED,任何其他来源。
  • redirect,表示网页经过重定向的次数。

2.memory(目前只有谷歌支持)

  • usedJSHeapSize:js对象占用的内存(含v8引擎的内部对象),若该值大于了 totalJSHeapSize ,可能出现了内存显露。
  • totalJSHeapSize:可使用的内存。
  • jsHeapSizeLimit:内存大小限制。

3.timeOrigin

performance.timeOrigin返回的值表示性能测试开始时的时间戳。
复制代码

4.timing(共21个时间,属旧版的时间模型,将被“废弃”/替代!!!)

DNS查询耗时:domainLookupEnd - domainLookupStart。若使用缓存或本地资源,该结果为0。
复制代码
  • domainLookupStart:表示域名查询开始的时间戳。若使用持续连接(persistent connection)、缓存或本地资源,该值等fetchStart。

  • domainLookupEnd:表示域名查询结束的时间戳。若使用持续连接(persistent connection)、缓存或本地资源,该值等于 fetchStart一致。

  • fetchStart:表示浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。

    TCP链接耗时 :connectEnd - connectStart。若使用缓存或本地资源,该结果为0。
    复制代码
  • connectStart:返回请求开始向服务器发送信息时的时间戳。若使用持久连接(persistent connection),则该值等于fetchStart。

  • connectEnd:返回浏览器与服务器之间的连接建立时的时间戳。若使用持久连接,则该值等于fetchStart。连接建立指的是所有握手和认证过程全部结束。

  • fetchStart:表示浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。

    request请求耗时 :responseEnd - responseStart。
    复制代码
  • responseStart:返回浏览器从服务器收到(或从本地缓存读取)第一个字节时的时间戳。

  • responseEnd:返回用户代理接收到最后一个字符的时间戳,和当前连接被关闭的时间中,更早的那个。同样,文档可能来自服务器、缓存、或本地资源。

    解析dom树耗时 : domComplete - domInteractive。
    复制代码
  • domComplete:返回当前网页DOM结构生成时的时间戳。(即Document.readyState属性变为“complete”,以及相应的readystatechange事件发生时)。

  • domInteractive:返回当前网页DOM结构结束解析、开始加载内嵌资源时的时间戳。(即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时)。

    白屏时间 :responseStart - navigationStart。
    复制代码
  • responseStart:返回浏览器从服务器收到(或从本地缓存读取)第一个字节时的时间戳。

  • navigationStart:表示从同一个浏览器上下文的上一个文档卸载(unload)结束时的时间戳。如果没有上一个文档,该值等于fetchStart。

  • fetchStart:表示浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。

    domReady时间 :domContentLoadedEventEnd - navigationStart。
    复制代码
  • domContentLoadedEventEnd:返回当前网页所有需要执行的脚本执行完成时的时间戳。

  • navigationStart:表示从同一个浏览器上下文的上一个文档卸载(unload)结束时的时间戳。如果没有上一个文档,该值等于fetchStart。

  • fetchStart:表示浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。

    onload时间 :loadEventEnd - navigationStart。
    复制代码
  • loadEventEnd:返回当前网页load事件的回调函数运行结束时的时间戳。如果该事件还没有发生,返回0。

  • navigationStart:表示从同一个浏览器上下文的上一个文档卸载(unload)结束时的时间戳。如果没有上一个文档,该值等于fetchStart。

  • fetchStart:表示浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。

    其他时间
    复制代码
  • unloadEventStart:表示unload事件抛出时的时间戳。若无前一个网页,或之前网页跳转重定向非同一个域名内, 该值返回0。

  • unloadEventEnd:表示unload事件处理完成时的时间戳。若无前一个网页,或之前网页跳转非同一个域名内, 该值会返回0。

  • redirectStart:表示第一个请求重定向开始时的时间戳。若无重定向,或者重定向中的一个不同源,这个值会返回0。

  • redirectEnd:表示最后一个请求重定向完成时的时间戳。(也就是说请求响应的最后一个byte被收到的时间)。若无重定向,或重定向中的一个不同源,这个值会返回0。

  • secureConnectionStart:返回浏览器与服务器开始安全链接的握手时的时间戳。(用户代理若无对应属性,将设置该属性为undefined。并且若当前域名不是https,则返回0)。

  • requestStart:返回浏览器向服务器发出请求时(或开始读取本地缓存时)的时间戳。

  • domLoading:返回当前网页DOM结构开始解析时的时间戳。(即Document.readyState属性变为“loading”、相应的readystatechange事件触发时)。

  • domContentLoadedEventStart:返回当前网页DOMContentLoaded事件发生时的时间戳(即DOM结构解析完毕、所有脚本开始运行时)。

  • loadEventStart:返回当前网页load事件的回调函数开始时的时间戳。若该事件还未发生,返回0。

其中,startTime可以理解为timeOrigin。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章