文章目录Performance属性方法性能条目 PerformanceEntry性能条目的属性性能条目的方法性能条目的子接口类型PerformanceResourceTiming性能条目的生成手动创建性能条目检测性能条目 PerformanceObserver性能条目类型子接口LargestContentfulPaint (LCP) —— 可见的图像和文本块的加载时间PerformanceElementTiming—— 观察元素的加载时间PerformanceEventTiming —— 观察事件的加载时间PerformanceResourceTiming — 应用程序资源的加载事件PerformanceNavigationTiming — 文档事件的加载事件Performance API 是一组用于衡量 web 应用性能的标准。每一个性能指标都是用一个性能条目PerformanceEntry表示。性能条目具有名称name、持续时间duration、开始时间startTime、类型type。PerformancePerformance是页面性能相关的主接口在全局作用域下可通过self.performance访问也可以通过window.performance访问。Performance 接口可以获取到当前页面中与性能相关的信息。属性Performance.navigation对象提供了在指定的时间段里发生的操作相关信息包括页面是加载还是刷新、发生了多少次重定向等等。{navigation:{redirectCount:0type:1}}redirectCount重定向次数。type决定了操作类型取值名称含义0TYPE_NAVIGATE当前页面是通过点击链接书签和表单提交或者脚本操作或者在 url 中直接输入地址1TYPE_RELOAD点击刷新页面按钮或者通过Location.reload()方法显示的页面2TYPE_BACK_FORWARD页面通过历史记录和前进后退访问时。255TYPE_RESERVED任何其他类型Performance.timing对象包含延迟相关的性能信息。timing有如下取值属性值含义navigationStart表示从同一个浏览器上下文的上一个文档卸载unload结束时的 UNIX 时间戳unloadEventStart表示了unload事件抛出时的 UNIX 时间戳unloadEventEnd表示了unload事件处理完时的 UNIX 时间戳redirectStart表示了第一个HTTP重定向开始时的UNIX时间戳redirectEnd表示了最后一个HTTP重定向完成时的UNIX时间戳fetchStart表示浏览器准备好使用 HTTP 请求来获取fetch文档的 UNIX 时间戳domainLookupStart表示域名查询开始的 UNIX 时间戳domainLookupEnd表示域名查询结束的 UNIX 时间戳connectStartHTTP 请求开始向服务器发送时的 Unix 毫秒时间戳connectEnd浏览器与服务器之间的连接建立时的Unix毫秒时间戳secureConnectionStart浏览器与服务器开始安全链接的握手时的 Unix 毫秒时间戳。requestStart浏览器向服务器发出HTTP请求时的UNIX时间戳responseStart浏览器从服务器收到第一个字节时的 Unix 毫秒时间戳responseEnd浏览器从服务器收到最后个字节时的 Unix 毫秒时间戳domLoading当前网页 DOM 结构开始解析时的 Unix 毫秒时间戳domInteractive当前网页 DOM 结构结束解析、开始加载内嵌资源时的 Unix 毫秒时间戳domContentLoadedEventStart所有需要被执行的脚本已经被解析时的 Unix 毫秒时间戳domContentLoadedEventEnd所有需要立即执行的脚本已经被执行时的 Unix 毫秒时间戳domComplete返回当前文档解析完成的 Unix 毫秒时间戳loadEventStart该文档下load 事件被发送时的 Unix 毫秒时间戳loadEventEnd该文档下load 事件结束时的Unix毫秒时间戳Performance.eventCounts提供为每种事件类型调度的事件数。方法clearMarks()将给定的 mark 类型的性能条目从浏览器的性能输入缓冲区中移除。clearMeasures()将给定的 measure 类型的性能条目 从浏览器的性能输入缓冲区中移除。clearResourceTimings()将给定的 resource 类型的性能条目 从浏览器的性能输入缓冲区中移除。getEntries() 基于给定的 filter 返回一个性能条目对象的列表。如果有filter参数可取值如下“name” 性能条目的名字“entryType” 性能条目的类型“initiatorType”初始化资源的类型可取值参见https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/initiatorTypegetEntriesByName(name, type) 基于给定的 name 和 entry type 返回一个 性能条目 对象的列表。getEntriesByType(type) type是字符串取值基于给定的 entry type 返回一个 性能条目 对象的列表。mark()根据给出 name 值在浏览器的性能输入缓冲区中创建一个mark类型的相关的性能条目参数取值;entryType 设置为 “mark”.name 设置为 mark 被创建时给出的 “name”。startTime (en-US) 设置为 mark() 方法被调用时的开始时间。duration (en-US) 设置为 “0” (标记没有持续时间).measure()在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的measure相关的性能条目参数取值name该性能条目的类型startMark代表测量的开始标志名字。endMark代表测量的结束标志名字。performance.measure(name,startMark,endMark);now()返回一个表示从性能测量时刻开始经过的毫秒数setResourceTimingBufferSize()将浏览器的资源 timing 缓冲区的大小设置为 “resource”性能条目 PerformanceEntry性能条目表示网页请求的时间列表中单个时间指标的数据。性能条目的属性name该性能条目的名字字符串。entryType该性能条目的类型entryType 返回一个代表 性能条目 的 指标类型 的字符串 。mark通过调用performance.mark()创建标记时使用的名称。对应性能条目子接口类型 PerformanceMarkmeasure通过调用performance.measure()创建度量值时使用的名称。对应 性能条目子接口类型 PerformanceMeasureresource所请求资源的解析 URL。即使重定向请求此值也不会更改。对应性能条目子接口类型 PerformanceResourceTimingframe,navigation文档的地址。对应性能条目子接口类型 PerformanceNavigationTimingpaint取值first-paint、first-contentful-paint。对应性能条目子接口类型 PerformancePaintTimingstartTime该性能条目上报的时间duration该性能条目持续的时间性能条目的方法PerformanceEntry.toJSON() 返回 PerformanceEntry 对象的 JSON 格式数据性能条目的子接口类型这些子接口类型都继承PerformanceEntry接口所以他们都具有PerformanceEntry的属性。PerformanceResourceTimingPerformanceResourceTiming 接口可以检索和分析有关加载应用程序资源的详细网络计时数据。应用程序可以使用 timing 指标来确定获取特定资源所需的时间长度。属性entryType返回“resource”name resource的urlstartTime资源提取的开始时间duration是 responseEnd 和 startTime 属性之间的差异initiatorType初始化性能条目的资源类型nextHopProtocol获取资源的网络协议requestStart浏览器开始从服务器请求资源的时间戳responseEnd浏览器收到资源的最后一个字节之后或紧接在传输连接关闭之前以先到者为准。transferSize表示获取资源大小的数字encodedBodySize性能条目的生成性能条目的生成由两种途径手动和被动可以手动指定性能条目的生成 mark 、measure性能条目的被动生成当图片、script、css等资源加载的时候会被动生成性能条目手动创建性能条目每一个性能条目都继承了PerformanceEntry接口对其进行限定。创建 PerformanceMark 类型的性能条目PerformanceMark 是 entryType ( 性能条目的类型 ) 为“mark”的性能条目 标记是PerformanceEntry的子类型 。创建方式1—— performance.mark() 推荐使用调用performance.mark()创建一个 type为mark的性能条目将命名的性能时间标记添加到浏览器的性能时间线。创建方式2构造函数创建PerformanceMark()。参数name表示性能时间标记的字符串makOptionsdetail包含在标记中的任意元数据startTime用作标记时间的时间戳默认值是performance.now返回值是一个PerformanceMark对象局限性 与performance.mark()不同构造函数创建的性能标记不会添加到浏览器的性能时间线中。这意味着对性能接口的方法getEntries*()getEntries、getEntriesByName 或 getEntriesByType的调用不会显示这些标记的条目。实例属性entryType性能条目类型name创建标记时使用的名称startTime创建标记时标记时间的时间戳duration表示该度量值的持续时间detail创建标记时标记的元数据创建 PerformanceMeasure 类型性能条目PerformanceMeasure是 entryType ( 性能条目的类型 ) 为“measure”的性能条目 标记是PerformanceEntry的子类型 。创建方式通过调用performance.measure()将命名的性能时间标记添加到浏览器的性能时间线来创建的。实例属性entryType性能条目类型name创建标记时使用的名称startTime创建标记时标记时间的时间戳detail创建标记时标记的元数据检测性能条目 PerformanceObserver大部分性能条目可以通过Performance.getEntries()结合PerformanceObserver检测。Performance.getEntries() 是主接口Performance的方法获取所有性能列表PerformanceObserver性能检测器指定并检测性能条目PerformanceObserver 用于监测性能度量事件在浏览器的性能时间轴记录新的 性能条目performance entry 的时候将会被通知。构造函数 PerformanceObserver()PerformanceObserver(callback) 构造函数使用给定的观察者 callback生成一个新的 PerformanceObserver 对象。当通过observe()方法注册的 条目类型 的性能条目事件被记录下来时调用该观察者回调。参数callback当性能事件被记录时调用该callback回调。调用回调时其第一个参数是性能观察条目列表第二个参数是观察者 对象。返回值一个在观察的性能事件发生时调用指定的 callback 的新 PerformanceObserver 对象属性supportedEntryTypes 返回用户代理支持的 entryType 值的数组。方法observe()指定要观察的条目类型的集。—— 一般情况下必须指定。observe的可选参数buffered是否应将缓冲的条目排队到观察者的缓冲区中和type一起使用durationThreshold用于定义 PerformanceEventTiming 条目的阈值。默认值为 104 毫秒四舍五入到最接近的 8 毫秒。可能的最低阈值为 16 毫秒。不能与entryTypes一起使用entryTypes指定要检测的性能条目类型字符串或数组type一个字符串仅指定要观察的一种性能条目类型。不能与entryTypes一起使用disconnect()阻止性能观察器回调接收性能条目。takeRecords()返回存储在性能观察器中的当前性能条目列表并将其清空。使用varobservernewPerformanceObserver(function(list,obj){varentrieslist.getEntries();for(vari0;ientries.length;i){// Process mark and frame events}});observer.observe({entryTypes:[mark,frame]});functionperf_observer(list,observer){// Process the measure event}varobserver2newPerformanceObserver(perf_observer);observer2.observe({entryTypes:[measure]});性能条目类型子接口LargestContentfulPaint (LCP) —— 可见的图像和文本块的加载时间测量视口范围内可见的图像和文本块的最大渲染时间从页面开始加载时开始记录。PerformanceElementTiming—— 观察元素的加载时间测量页面内所包含的单个图像和文本节点元素的呈现计时信息开发人员使用elementtiming属性进行注释以进行观察。开发人员通过在元素上添加elementtiming属性来测量页面上关键元素的渲染时间戳。添加elementtimeing属性的元素会作为一个性能条目存储在浏览器的性能时间线中这样就可以在性能条目列表中获取到该元素的性能条目就可以观察到该元素的加载时间。元素 存储为性能条目的 属性值name: “image-paint或text-paint”表示该元素是图像或文本element元素的信息id元素的ididentifierelementtiming 属性的值。intersectionRect视口中元素的矩形loadTime 开始加载时间戳renderTime开始渲染的时间戳url 图像资源的url文本请求为0startTime有render就返回renderTime的值否则返回loadTime 的值eghtmlimgsrcimage.jpgelementtimingbig-image/pelementtimingtextidtext-idtext here/p/htmlscriptconst observer new PerformanceObserver((list) { list.getEntries().forEach((entry) { console.log(entry); }); }); observer.observe({ type: element, buffered: true });/dcript输出PerformanceEventTiming —— 观察事件的加载时间测量事件的延迟和首次输入延迟:首次输入延迟从用户首次与应用交互到浏览器实际能够响应该交互的时间点。事件延迟事件处理程序运行所需的时间。未在 100 毫秒内处理的用户输入被认为是慢速输入。获取所有可以检测的事件列表performance.eventCounts.keys()。属性值duration表示从到下一个渲染绘制的时间entryType返回性能条目类型这里的取值是event 或 “first-input”name关联的事件类型startTime创建事件的时间cancelable事件可取消性interactionId 唯一标识触发关联事件的用户交互的 ID。processingStart 事件调度开始的时间。processingEnd时间调度结束的时间。target如果未删除关联事件的最后一个目标则返回该目标。eg首次输入延迟FID检测letfirstHiddenTimedocument.visibilityStatehidden?0:Infinity;document.addEventListener(visibilitychange,(event){firstHiddenTimeMath.min(firstHiddenTime,event.timeStamp);},{once:true},);// 将首次输入延迟数据发送给服务端functionsendToAnalytics(data){constbodyJSON.stringify(data);(navigator.sendBeaconnavigator.sendBeacon(/analytics,body))||fetch(/analytics,{body,method:POST,keepalive:true});}// 获取首次输入延迟数据try{functiononFirstInputEntry(entry){if(entry.startTimefirstHiddenTime){constfidentry.processingStart-entry.startTime;sendToAnalytics({fid});}}// 创建性能监听器constponewPerformanceObserver((entryList){entryList.getEntries().forEach(onFirstInputEntry);});po.observe({type:first-input,buffered:true,});}catch(e){}事件延迟检测constobservernewPerformanceObserver((list){list.getEntries().forEach((entry){// Full durationconstdurationentry.duration;// Input delay (before processing event)constdelayentry.processingStart-entry.startTime;// Synchronous event processing time// (between start and end dispatch)consteventHandlerTimeentry.processingEnd-entry.processingStart;console.log(Total duration:${duration});console.log(Event delay:${delay});console.log(Event handler duration:${eventHandlerTime});});});// Register the observer for eventsobserver.observe({type:event,buffered:true});PerformanceResourceTiming —应用程序资源的加载事件可以检索和分析有关加载应用程序资源的详细网络计时数据。它继承了PerformanceResourceTiming和PerformanceEntry的所有属性和方法。应用程序可以使用 timing 指标来确定获取特定资源所需的时间长度。PerformanceNavigationTiming —文档事件的加载事件提供了用于存储和检索有关浏览器文档事件的指标的方法和属性。此接口可用于确定加载或卸载文档需要多少时间。https://web.dev/articles/ttfb?hlzh-cn
WebAPI — Performance API （web性能检测）
发布时间：2026/7/26 22:09:37
文章目录Performance属性方法性能条目 PerformanceEntry性能条目的属性性能条目的方法性能条目的子接口类型PerformanceResourceTiming性能条目的生成手动创建性能条目检测性能条目 PerformanceObserver性能条目类型子接口LargestContentfulPaint (LCP) —— 可见的图像和文本块的加载时间PerformanceElementTiming—— 观察元素的加载时间PerformanceEventTiming —— 观察事件的加载时间PerformanceResourceTiming — 应用程序资源的加载事件PerformanceNavigationTiming — 文档事件的加载事件Performance API 是一组用于衡量 web 应用性能的标准。每一个性能指标都是用一个性能条目PerformanceEntry表示。性能条目具有名称name、持续时间duration、开始时间startTime、类型type。PerformancePerformance是页面性能相关的主接口在全局作用域下可通过self.performance访问也可以通过window.performance访问。Performance 接口可以获取到当前页面中与性能相关的信息。属性Performance.navigation对象提供了在指定的时间段里发生的操作相关信息包括页面是加载还是刷新、发生了多少次重定向等等。{navigation:{redirectCount:0type:1}}redirectCount重定向次数。type决定了操作类型取值名称含义0TYPE_NAVIGATE当前页面是通过点击链接书签和表单提交或者脚本操作或者在 url 中直接输入地址1TYPE_RELOAD点击刷新页面按钮或者通过Location.reload()方法显示的页面2TYPE_BACK_FORWARD页面通过历史记录和前进后退访问时。255TYPE_RESERVED任何其他类型Performance.timing对象包含延迟相关的性能信息。timing有如下取值属性值含义navigationStart表示从同一个浏览器上下文的上一个文档卸载unload结束时的 UNIX 时间戳unloadEventStart表示了unload事件抛出时的 UNIX 时间戳unloadEventEnd表示了unload事件处理完时的 UNIX 时间戳redirectStart表示了第一个HTTP重定向开始时的UNIX时间戳redirectEnd表示了最后一个HTTP重定向完成时的UNIX时间戳fetchStart表示浏览器准备好使用 HTTP 请求来获取fetch文档的 UNIX 时间戳domainLookupStart表示域名查询开始的 UNIX 时间戳domainLookupEnd表示域名查询结束的 UNIX 时间戳connectStartHTTP 请求开始向服务器发送时的 Unix 毫秒时间戳connectEnd浏览器与服务器之间的连接建立时的Unix毫秒时间戳secureConnectionStart浏览器与服务器开始安全链接的握手时的 Unix 毫秒时间戳。requestStart浏览器向服务器发出HTTP请求时的UNIX时间戳responseStart浏览器从服务器收到第一个字节时的 Unix 毫秒时间戳responseEnd浏览器从服务器收到最后个字节时的 Unix 毫秒时间戳domLoading当前网页 DOM 结构开始解析时的 Unix 毫秒时间戳domInteractive当前网页 DOM 结构结束解析、开始加载内嵌资源时的 Unix 毫秒时间戳domContentLoadedEventStart所有需要被执行的脚本已经被解析时的 Unix 毫秒时间戳domContentLoadedEventEnd所有需要立即执行的脚本已经被执行时的 Unix 毫秒时间戳domComplete返回当前文档解析完成的 Unix 毫秒时间戳loadEventStart该文档下load 事件被发送时的 Unix 毫秒时间戳loadEventEnd该文档下load 事件结束时的Unix毫秒时间戳Performance.eventCounts提供为每种事件类型调度的事件数。方法clearMarks()将给定的 mark 类型的性能条目从浏览器的性能输入缓冲区中移除。clearMeasures()将给定的 measure 类型的性能条目 从浏览器的性能输入缓冲区中移除。clearResourceTimings()将给定的 resource 类型的性能条目 从浏览器的性能输入缓冲区中移除。getEntries() 基于给定的 filter 返回一个性能条目对象的列表。如果有filter参数可取值如下“name” 性能条目的名字“entryType” 性能条目的类型“initiatorType”初始化资源的类型可取值参见https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/initiatorTypegetEntriesByName(name, type) 基于给定的 name 和 entry type 返回一个 性能条目 对象的列表。getEntriesByType(type) type是字符串取值基于给定的 entry type 返回一个 性能条目 对象的列表。mark()根据给出 name 值在浏览器的性能输入缓冲区中创建一个mark类型的相关的性能条目参数取值;entryType 设置为 “mark”.name 设置为 mark 被创建时给出的 “name”。startTime (en-US) 设置为 mark() 方法被调用时的开始时间。duration (en-US) 设置为 “0” (标记没有持续时间).measure()在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的measure相关的性能条目参数取值name该性能条目的类型startMark代表测量的开始标志名字。endMark代表测量的结束标志名字。performance.measure(name,startMark,endMark);now()返回一个表示从性能测量时刻开始经过的毫秒数setResourceTimingBufferSize()将浏览器的资源 timing 缓冲区的大小设置为 “resource”性能条目 PerformanceEntry性能条目表示网页请求的时间列表中单个时间指标的数据。性能条目的属性name该性能条目的名字字符串。entryType该性能条目的类型entryType 返回一个代表 性能条目 的 指标类型 的字符串 。mark通过调用performance.mark()创建标记时使用的名称。对应性能条目子接口类型 PerformanceMarkmeasure通过调用performance.measure()创建度量值时使用的名称。对应 性能条目子接口类型 PerformanceMeasureresource所请求资源的解析 URL。即使重定向请求此值也不会更改。对应性能条目子接口类型 PerformanceResourceTimingframe,navigation文档的地址。对应性能条目子接口类型 PerformanceNavigationTimingpaint取值first-paint、first-contentful-paint。对应性能条目子接口类型 PerformancePaintTimingstartTime该性能条目上报的时间duration该性能条目持续的时间性能条目的方法PerformanceEntry.toJSON() 返回 PerformanceEntry 对象的 JSON 格式数据性能条目的子接口类型这些子接口类型都继承PerformanceEntry接口所以他们都具有PerformanceEntry的属性。PerformanceResourceTimingPerformanceResourceTiming 接口可以检索和分析有关加载应用程序资源的详细网络计时数据。应用程序可以使用 timing 指标来确定获取特定资源所需的时间长度。属性entryType返回“resource”name resource的urlstartTime资源提取的开始时间duration是 responseEnd 和 startTime 属性之间的差异initiatorType初始化性能条目的资源类型nextHopProtocol获取资源的网络协议requestStart浏览器开始从服务器请求资源的时间戳responseEnd浏览器收到资源的最后一个字节之后或紧接在传输连接关闭之前以先到者为准。transferSize表示获取资源大小的数字encodedBodySize性能条目的生成性能条目的生成由两种途径手动和被动可以手动指定性能条目的生成 mark 、measure性能条目的被动生成当图片、script、css等资源加载的时候会被动生成性能条目手动创建性能条目每一个性能条目都继承了PerformanceEntry接口对其进行限定。创建 PerformanceMark 类型的性能条目PerformanceMark 是 entryType ( 性能条目的类型 ) 为“mark”的性能条目 标记是PerformanceEntry的子类型 。创建方式1—— performance.mark() 推荐使用调用performance.mark()创建一个 type为mark的性能条目将命名的性能时间标记添加到浏览器的性能时间线。创建方式2构造函数创建PerformanceMark()。参数name表示性能时间标记的字符串makOptionsdetail包含在标记中的任意元数据startTime用作标记时间的时间戳默认值是performance.now返回值是一个PerformanceMark对象局限性 与performance.mark()不同构造函数创建的性能标记不会添加到浏览器的性能时间线中。这意味着对性能接口的方法getEntries*()getEntries、getEntriesByName 或 getEntriesByType的调用不会显示这些标记的条目。实例属性entryType性能条目类型name创建标记时使用的名称startTime创建标记时标记时间的时间戳duration表示该度量值的持续时间detail创建标记时标记的元数据创建 PerformanceMeasure 类型性能条目PerformanceMeasure是 entryType ( 性能条目的类型 ) 为“measure”的性能条目 标记是PerformanceEntry的子类型 。创建方式通过调用performance.measure()将命名的性能时间标记添加到浏览器的性能时间线来创建的。实例属性entryType性能条目类型name创建标记时使用的名称startTime创建标记时标记时间的时间戳detail创建标记时标记的元数据检测性能条目 PerformanceObserver大部分性能条目可以通过Performance.getEntries()结合PerformanceObserver检测。Performance.getEntries() 是主接口Performance的方法获取所有性能列表PerformanceObserver性能检测器指定并检测性能条目PerformanceObserver 用于监测性能度量事件在浏览器的性能时间轴记录新的 性能条目performance entry 的时候将会被通知。构造函数 PerformanceObserver()PerformanceObserver(callback) 构造函数使用给定的观察者 callback生成一个新的 PerformanceObserver 对象。当通过observe()方法注册的 条目类型 的性能条目事件被记录下来时调用该观察者回调。参数callback当性能事件被记录时调用该callback回调。调用回调时其第一个参数是性能观察条目列表第二个参数是观察者 对象。返回值一个在观察的性能事件发生时调用指定的 callback 的新 PerformanceObserver 对象属性supportedEntryTypes 返回用户代理支持的 entryType 值的数组。方法observe()指定要观察的条目类型的集。—— 一般情况下必须指定。observe的可选参数buffered是否应将缓冲的条目排队到观察者的缓冲区中和type一起使用durationThreshold用于定义 PerformanceEventTiming 条目的阈值。默认值为 104 毫秒四舍五入到最接近的 8 毫秒。可能的最低阈值为 16 毫秒。不能与entryTypes一起使用entryTypes指定要检测的性能条目类型字符串或数组type一个字符串仅指定要观察的一种性能条目类型。不能与entryTypes一起使用disconnect()阻止性能观察器回调接收性能条目。takeRecords()返回存储在性能观察器中的当前性能条目列表并将其清空。使用varobservernewPerformanceObserver(function(list,obj){varentrieslist.getEntries();for(vari0;ientries.length;i){// Process mark and frame events}});observer.observe({entryTypes:[mark,frame]});functionperf_observer(list,observer){// Process the measure event}varobserver2newPerformanceObserver(perf_observer);observer2.observe({entryTypes:[measure]});性能条目类型子接口LargestContentfulPaint (LCP) —— 可见的图像和文本块的加载时间测量视口范围内可见的图像和文本块的最大渲染时间从页面开始加载时开始记录。PerformanceElementTiming—— 观察元素的加载时间测量页面内所包含的单个图像和文本节点元素的呈现计时信息开发人员使用elementtiming属性进行注释以进行观察。开发人员通过在元素上添加elementtiming属性来测量页面上关键元素的渲染时间戳。添加elementtimeing属性的元素会作为一个性能条目存储在浏览器的性能时间线中这样就可以在性能条目列表中获取到该元素的性能条目就可以观察到该元素的加载时间。元素 存储为性能条目的 属性值name: “image-paint或text-paint”表示该元素是图像或文本element元素的信息id元素的ididentifierelementtiming 属性的值。intersectionRect视口中元素的矩形loadTime 开始加载时间戳renderTime开始渲染的时间戳url 图像资源的url文本请求为0startTime有render就返回renderTime的值否则返回loadTime 的值eghtmlimgsrcimage.jpgelementtimingbig-image/pelementtimingtextidtext-idtext here/p/htmlscriptconst observer new PerformanceObserver((list) { list.getEntries().forEach((entry) { console.log(entry); }); }); observer.observe({ type: element, buffered: true });/dcript输出PerformanceEventTiming —— 观察事件的加载时间测量事件的延迟和首次输入延迟:首次输入延迟从用户首次与应用交互到浏览器实际能够响应该交互的时间点。事件延迟事件处理程序运行所需的时间。未在 100 毫秒内处理的用户输入被认为是慢速输入。获取所有可以检测的事件列表performance.eventCounts.keys()。属性值duration表示从到下一个渲染绘制的时间entryType返回性能条目类型这里的取值是event 或 “first-input”name关联的事件类型startTime创建事件的时间cancelable事件可取消性interactionId 唯一标识触发关联事件的用户交互的 ID。processingStart 事件调度开始的时间。processingEnd时间调度结束的时间。target如果未删除关联事件的最后一个目标则返回该目标。eg首次输入延迟FID检测letfirstHiddenTimedocument.visibilityStatehidden?0:Infinity;document.addEventListener(visibilitychange,(event){firstHiddenTimeMath.min(firstHiddenTime,event.timeStamp);},{once:true},);// 将首次输入延迟数据发送给服务端functionsendToAnalytics(data){constbodyJSON.stringify(data);(navigator.sendBeaconnavigator.sendBeacon(/analytics,body))||fetch(/analytics,{body,method:POST,keepalive:true});}// 获取首次输入延迟数据try{functiononFirstInputEntry(entry){if(entry.startTimefirstHiddenTime){constfidentry.processingStart-entry.startTime;sendToAnalytics({fid});}}// 创建性能监听器constponewPerformanceObserver((entryList){entryList.getEntries().forEach(onFirstInputEntry);});po.observe({type:first-input,buffered:true,});}catch(e){}事件延迟检测constobservernewPerformanceObserver((list){list.getEntries().forEach((entry){// Full durationconstdurationentry.duration;// Input delay (before processing event)constdelayentry.processingStart-entry.startTime;// Synchronous event processing time// (between start and end dispatch)consteventHandlerTimeentry.processingEnd-entry.processingStart;console.log(Total duration:${duration});console.log(Event delay:${delay});console.log(Event handler duration:${eventHandlerTime});});});// Register the observer for eventsobserver.observe({type:event,buffered:true});PerformanceResourceTiming —应用程序资源的加载事件可以检索和分析有关加载应用程序资源的详细网络计时数据。它继承了PerformanceResourceTiming和PerformanceEntry的所有属性和方法。应用程序可以使用 timing 指标来确定获取特定资源所需的时间长度。PerformanceNavigationTiming —文档事件的加载事件提供了用于存储和检索有关浏览器文档事件的指标的方法和属性。此接口可用于确定加载或卸载文档需要多少时间。https://web.dev/articles/ttfb?hlzh-cn
