指标数据监控

性能监控首屏加载时间卡顿率http请求的响应时间静态资源下载时间页面渲染时间页面可交互时间…

初始化

首次绘制标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点

new

{resolve(entry.startTime);po.disconnect();clearTimer();}})

})首次内容绘制时间FCP

当入口名称为first-contentful-paint时将时间返回

首次内容绘制标记浏览器渲染来自

{resolve(entry.startTime);po.disconnect();clearTimer();}})

})dom加载解析完成

timing.domContentLoadedEventEnd

loadEventEnd

timing.fetchStart;首字节响应时长反应网络请求耗时

timing.responseStart

ttiPolyfill.getFirstConsistentlyInteractive();最大内容渲染(LCP):

页面在加载过程中是线性的元素是一个一个渲染到屏幕上的而不是一瞬间全渲染到屏幕上所以“渲染面积”最大的元素随时在发生变化。

使用

PerformanceObserver

LCP会发现每当出现“渲染面积”更大的元素就会捕获出一条新的性能条目。

监听largest-content-paint来进行获取数据使用web-vitals

去计算LCP

PerformanceObserver()去监控element,

给我们要监控标签的一个elementmeaningmeaning属性,

FID

performance.timing.unloadEventEnd

performance.timing.navigationStart页面卡顿

new

PerformanceObserverentry.duration

100

requestIdleCallback上报数据响应用户交互的响应时间如果大于100ms,用户就会感觉卡顿

export

{list.getEntries().forEach((entry)

{if

getLastEvent();requestIdleCallback(()

{tracker.send({kind:

监控所有的资源加载(包括xhr和fetch请求)过滤出请求时间大于自己的设定值的资源得到一系列的指标数据开始上报

window.PerformanceObserver的实例let

listenObserverXhr

window.PerformanceObserver(cb)listenObserverXhr.observe({

entryTypes:

});listenObserverXhr.disconnect()

清空http监控

TTFB首字节时间(浏览器发出第一个请求到数据返回第一个字节所消耗的时间可以来衡量服务器的处理能力FP首次绘制(将第一个像素点绘制到屏幕的时刻)FCP首次内容绘制(浏览器将第一个dom渲染到屏幕上的时间)FMP首次有意义绘制(是页面可用性的度量标准)LCP最大内容渲染(页面渲染内容最大)FID首次输入延迟(用户首次和页面交互到页面响应交互的时间)dom解析完成资源加载完成

如何计算数值

可以根据performance.getEntriesByType获取页面绘制相关的一些数据比如FP,FCP

FMP首次有意义绘制这个计算是根据业务需求来看的比如我是一个搜索网站那么我可以认为页面中搜索框出来的时候就是有意义的时刻我是不关心其他的一些广告啊还有外链什么的这个时候我可以通过属性进行标识给输入框新增一个属性叫做elementtiming值为meaningful然后通过一个新的api

PerformanceObserver对改元素进行监控我可以可以设置监控的类型为element然后调用observe方法当页面加载完毕浏览器会把监控到的数据通过条目列表返回给我们。

使用PerformanceObserver监控LCP计算LCP通过设置监控类型为largest-content-paint来进行获取数据。

还有一个库

设置监控类型为first-input根据LightHouse中的建议来优化我们的网站