window.performance

主要利用performance.timing的各个属性评估性能:
属性比较多,可以这样归类:

网络相关

  1. fetch开头的字段(缓存检查)
  2. domain开头的字段(dns请求)
  3. conect开头的字段(TCP建立连接)
  4. request/response开头的字段(http请求和响应)

dom加载相关:dom开头的字段

onload事件相关:load开头的字段

常用性能指标计算公式

DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domloadng - fetchStart
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart


静态资源统计apiperformance.getEntries() 返回一个数组,包含所有js、css、img等静态资源加载的数据。常用的属性duration表示加载时长。

其他的不怎么常用的就看文档好了~

MDN文档
使用performance监控前端性能

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容