网站做一个多少钱,做网站需要租服务器,网上做家教的网站,装饰工程经营范围有哪些前端监控之页面性能监控
为什么要做前端监控#xff1f;
更快发现问题和解决问题做产品的决策依据为业务扩展提供了更多可能性
指标数据监控
性能监控#xff1a;首屏加载时间#xff0c;卡顿率#xff0c;http请求的响应时间#xff0c;静态资源下载时间#xff0c;…前端监控之页面性能监控
为什么要做前端监控
更快发现问题和解决问题做产品的决策依据为业务扩展提供了更多可能性
指标数据监控
性能监控首屏加载时间卡顿率http请求的响应时间静态资源下载时间页面渲染时间页面可交互时间…
初始化
初始化参数参数校验
性能监控
首次绘制时间FP 监听类型为paint封装成一个promise 当入口名称为first-paint时将时间返回
// 首次绘制标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点
new Promise((resolve, reject) {const po observe(paint, (entry) {if (entry.name first-paint) {resolve(entry.startTime);po.disconnect();clearTimer();}})
})首次内容绘制时间FCP 为首次有内容渲染的时间点封装成一个promise 当入口名称为first-contentful-paint时将时间返回
// 首次内容绘制标记浏览器渲染来自 DOM 第一位内容的时间点该内容可能是文本、图像、SVG 甚至 元素
new Promise((resolve, reject) {const po observe(paint, (entry) {if (entry.name first-contentful-paint) {resolve(entry.startTime);po.disconnect();clearTimer();}})
})dom加载解析完成
// 当 HTML 文档被完全加载和解析完成之后DOMContentLoaded 事件被触发无需等待样式表、图像和子框架的完成加载
// 借住performance 性能优化API取值
timing.domContentLoadedEventEnd - timing.fetchStart;资源加载解析完成 loadEventEnd - fetchStart
// 当 HTML 文档被完全加载和解析完成之后load 事件被触发 样式表、图像和子框架的完成加载
// 借住performance 性能优化API取值
timing.loadEventEnd - timing.fetchStart;首字节响应时长反应网络请求耗时
timing.responseStart - timing.fetchStart;可交互时间(TTI) 通过PerformanceObserver 监听资源的加载 domContentLoadedEventEnd - navigationStart 粗略计算 使用谷歌提供更加精确的api tti-polyfill获取
import ttiPolyfill from tti-polyfill;
export default ttiPolyfill.getFirstConsistentlyInteractive();最大内容渲染(LCP): 页面在加载过程中是线性的元素是一个一个渲染到屏幕上的而不是一瞬间全渲染到屏幕上所以“渲染面积”最大的元素随时在发生变化。使用 PerformanceObserver 去捕获 LCP会发现每当出现“渲染面积”更大的元素就会捕获出一条新的性能条目。监听largest-content-paint来进行获取数据使用web-vitals 去计算LCP
import {getLCP} from web-vitals;
// Measure and log the current LCP value,
// any time its ready to be reported.
getLCP(console.log);FMP 首次有意义渲染 通过new PerformanceObserver()去监控element, 给我们要监控标签的一个elementmeaningmeaning属性, 我们就可以得到一个有意义内容渲染的时间 FID 首次输入延迟 使用PerformanceObserver监控FID 设置监控类型为first-input
performance.now() 比 Date.now()
精确度更高恒定的速率慢慢增加的,不受系统的影响
首屏加载时长
首屏时间 首屏内容渲染结束时间点 - 开始请求的时间点
performance.timing.unloadEventEnd - performance.timing.navigationStart页面卡顿
new PerformanceObserverentry.duration 100 判断大于100ms即可认定为长任务使用 requestIdleCallback上报数据响应用户交互的响应时间如果大于100ms,用户就会感觉卡顿
export function longTask() {new PerformanceObserver((list) {list.getEntries().forEach((entry) {if (entry.duration 100) {let lastEvent getLastEvent();requestIdleCallback(() {tracker.send({kind: experience,type: longTask,eventType: lastEvent.type,startTime: formatTime(entry.startTime), // 开始时间duration: formatTime(entry.duration), // 持续时间selector: lastEvent? getSelector(lastEvent.path || lastEvent.target): ,});});}});}).observe({ entryTypes: [longtask] });
}接口慢请求
慢请求监控原理 监控所有的资源加载(包括xhr和fetch请求)过滤出请求时间大于自己的设定值的资源得到一系列的指标数据开始上报 实践 window.PerformanceObserver的实例let listenObserverXhr new window.PerformanceObserver(cb)listenObserverXhr.observe({ entryTypes: [‘resource’] });listenObserverXhr.disconnect() // 清空http监控
总结 性能监控页面性能数据
用户体验 TTFB首字节时间(浏览器发出第一个请求到数据返回第一个字节所消耗的时间可以来衡量服务器的处理能力FP首次绘制(将第一个像素点绘制到屏幕的时刻)FCP首次内容绘制(浏览器将第一个dom渲染到屏幕上的时间)FMP首次有意义绘制(是页面可用性的度量标准)LCP最大内容渲染(页面渲染内容最大)FID首次输入延迟(用户首次和页面交互到页面响应交互的时间)dom解析完成资源加载完成 如何计算数值 可以根据performance.timing API手动计算一些值 可以根据performance.getEntriesByType获取页面绘制相关的一些数据比如FP,FCP FMP首次有意义绘制这个计算是根据业务需求来看的比如我是一个搜索网站那么我可以认为页面中搜索框出来的时候就是有意义的时刻我是不关心其他的一些广告啊还有外链什么的这个时候我可以通过属性进行标识给输入框新增一个属性叫做elementtiming值为meaningful然后通过一个新的api PerformanceObserver对改元素进行监控我可以可以设置监控的类型为element然后调用observe方法当页面加载完毕浏览器会把监控到的数据通过条目列表返回给我们。 另外我们也可以将LCP看成是有意义的绘制 使用PerformanceObserver监控LCP计算LCP通过设置监控类型为largest-content-paint来进行获取数据。还有一个库 web-vitals可以用来获取LCP 使用PerformanceObserver监控FID 设置监控类型为first-input根据LightHouse中的建议来优化我们的网站
