从历史上看，我们监控客户端性能的方法非常有限，而且还遇到了API浏览器的限制，这些限制使我们无法准确测量客户端性能。幸运的是，由于新的面向性能的API，这种情况开始发生变化。现在，浏览器的PerformanceAPI为我们提供了准确衡量网页性能的工具。看得不耐烦的同学可以直接看使用方法列表的最后。使用性能API的好处。这些API增加了在开发工具中使用性能分析的体验；Chrome开发工具和其他工具，例如Lighthouse，仅在开发阶段有帮助。但是使用PerformanceAPI，我们可以在生产中得到真实的用户测量数据（RUM——realusermeasurement）；我们可以获得非常准确的时间戳数据，这使得对这些性能指标的分析非常准确。Performance接口可以获取当前页面的性能相关信息。它是高分辨率时间API的一部分，后者还包含性能时间线API、导航计时API、用户计时API和资源计时API。——MDN高分辨率时间高分辨率时间的精度可以达到零点几毫秒。相比之下，基于日期的时间仅精确到毫秒。这种精度使其成为精确时间测量的理想工具。用户代理(UA)测量的高分辨率时间不会随着系统时间的任何变化而变化，因为它取自UA创建的全局时钟。PerformanceAPI中测量的每个测量值都是高分辨率时间。这就是为什么您总是听说性能API是高分辨率时间API的一部分。性能时间线API性能时间线API是性能API的扩展。此扩展提供了一个接口来根据特定的过滤条件检索性能指标。PerformanceTimelineAPI提供以下三种方法，包括在性能接口中：getEntries()getEntriesByName()getEntriesByType()每个方法返回从PerformanceAPI的所有其他扩展收集的条目列表。PerformanceObserver是API中包含的另一个接口。主要用于观察性能时间线（PerformanceTimeline），并在浏览器记录时通知新的性能条目。它可用于测量浏览器和Node.js应用程序中的某些性能指标。性能条目我们使用性能API测量的东西称为条目。以下是我们可用的性能项目：markmeasurenavigationresourcepaintframe使用这些条目及其各自的API来衡量性能。使用导航计时API和资源计时API进行测量导航计时API和资源计时API有很多重叠，您可以阅读本文以了解更多关于它们的区别。获取方法：//NavigationTimingentries:constnavigationEntries=performance.getEntriesByType("navigation")[0];//内容{"name":"https://awebsite.com","entryType":"navigation",“startTime”：0，“持续时间”：7816.495000151917，“initiatorType”：“navigation”，“nextHopProtocol”：“”，“workerStart”：9.504999965429306，“redirectStart”：0，“redirectEnd”：0，“fetchStart”：39.72000000067055,"domainLookupStart":39.72000000067055,"domainLookupEnd":39.72000000067055,"connectStart":39.72000000067055,"connectEnd":39.72000000067055,"secureConnectionStart":0,"requestStart":39.72000000067055,"responseStart":6608.200000133365,"responseEnd":6640.834999969229,"transferSize":0,"encodedBodySize"：0，“decodedBodySize”：0，“serverTiming”：[]，“unloadEventStart”：0，“unloadEventEnd”：0，“domInteractive”：6812.060000142083，“domContentLoadedEventStart”：6812.115000095218，“domContentLoadedEventEnd8，16”：6812.115000095218，“domContentLoaded3dom30308，16”":7727.995000081137,"loadEventStart":7760.385000146925,"loadEventEnd":7816.495000151917,"type":"navigate","redirectCount":0}//资源计时条目constresourceListEntries=performance.get("这将返回一个资源计时数组对象单个对象如下所示，可用于获取有关Web资源的上下文信息：{"name":"https://awebsite.com/images/image.png","entryType":"resource","startTime”：237.85999999381602，“duration”：11.274999938905239，“initiatorType”：“img”，“nextHopProtocol”：“h2”，“workerStart”：0，“redirectStart”：0，“redirectEnd”：0，“fetchStart”：2397.9239,"domainLookupStart":237.85999999381602,"domainLookupEnd":237.85999999381602,"connectStart":237.85999999381602,"connectEnd":237.85999999381602,"secureConnectionStart":0,"requestStart":243.38999995961785,"responseStart":244.40500000491738,"responseEnd":249.13499993272126,"transferSize":0,"encodedBodySize":29009,"decodedBodySize":29009,"serverTiming":[]}使用场景列表//DNS解析constdnsTime=navigationEntries.domainLookupEnd-navigationEntries.domainLookupStart;//response+responsetimeconsttotalTime=navigationEntries.responseEnd-navigationEntries.requestStart;//缓存查找响应时间constfetchTime=navigationEntries.responseEnd-navigationEntries.fetchStart;//使用Serviceworker响应时间letworkerTime=0;if(navigationEntries.workerStart>0){workerTime=navigationEntries.responseEnd-navigationEntries.workerStart;}//接收第一个字节constttfb=navigationEntries.responseStart-navigationEntries.requestStart;//重定向时间constredirectTime=navigationEntries.redirectEnd-navigationEntries.redirectStart;//测量HTTP头大小constheaderSize=navigationEntries.transferSize-navigationEntries.encodedBodySize;//列出测量资源.forEach(resource=>{if(resource.initiatorType=='img'){console.info(`加载${resource.name}所花费的时间：`,资源e.responseEnd-resource.startTime);}});//获取单个资源指标constimpResourceTime=performance.getEntriesByName("https://awebsite.com/imp-resource.png");补充：直接使用performance.timing来计算警告：该属性在NavigationTimingLevel2规范中已经弃用，请改用PerformanceNavigationTiming虽然有些浏览器仍然支持它，但也许只是为了兼容性而被移除或保留。consttimingInfo=window.performance.timing;//DNS解析，DNS查询耗时timingInfo.domainLookupEnd-timingInfo.domainLookupStart;//TCP连接耗时timingInfo.connectEnd-timingInfo.connectStart;//获取第一个字节需要时间，也叫TTFBtimingInfo.responseStart-timingInfo.navigationStart;//domReady时间（对应DomContentLoad事件）准备新页面fetchStart-timingInfo.navigationStart;//重定向耗时timingInfo.redirectEnd-timingInfo.redirectStart;//耗时AppcachetimingInfo.domainLookupStart-timingInfo.fetchStart;//卸载文件前耗时timingInfo.unloadEventEnd-timingInfo.unload/EventStart请求耗时timingInfo.responseEnd-timingInfo.requestStart;//从请求结束到DOM加载timingInfo.domInteractive-timingInfo.responseEnd;//耗时解释dom树timingInfo.domComplete-timingInfo.domInteractive;//从开始到加载总耗时时间timingInfo.loadEventEnd-timingInfo.navigationStart;//白屏时间timingInfo.responseStart-timingInfo.fetchStart;//首屏时间timingInfo.domComplete-timingInfo.fetchStart;参考：UsingthePerformanceAPIHowtopracticallyusePerformanceAPItomeasureperformancePerformance.timing
