监控页面资源状态

最近碰到一个需求，优化项目的启动速度，但是在做个之前需要监控记录页面的打开时长，资源加载状况等
以下为学习小结：
总体核心是使用 performance.getEntries() 方法，此方法会返回页面中所有资源加载状况，包括css、js、image、接口等
注：performance.timing已经被废弃了，保险起见不用为妙

performance.getEntries()

或者使用此方法获取具体某一类资源加载情况

performance.getEntriesByType() 

查看所有类型
以上两个方法返回的是一个数组对象，

{
    "name": "http://192.168.1.7:8081/122.js",
    "entryType": "resource",
    "startTime": 778,
    "duration": 3.2000000029802322,
    "initiatorType": "script",
    "nextHopProtocol": "http/1.1",
    "renderBlockingStatus": "non-blocking",
    "workerStart": 0,
    "redirectStart": 0,
    "redirectEnd": 0,
    "fetchStart": 778,
    "domainLookupStart": 778,
    "domainLookupEnd": 778,
    "connectStart": 778,
    "connectEnd": 778,
    "secureConnectionStart": 0,
    "requestStart": 779.1000000014901,
    "responseStart": 780.5,
    "responseEnd": 781.2000000029802,
    "transferSize": 72365,
    "encodedBodySize": 72065,
    "decodedBodySize": 72065,
    "serverTiming": []
}

其中我主要用到的属性是以下几个

initiatorType //请求类型
name // 请求地址
duration // 所用时间
startTime // 资源初始开始加载时间 
responseEnd // 资源请求完成时间