江苏龙网

  1. 主页 > 生活百科 > >

2022年再不知道前端监控就out了( 二 )

前端监控


L（onLoad）
当依赖的资源全部加载完毕之后才会触发
TTI（Time to Interactive）
可交互时间，用于标记应用已进入视觉渲染并能可靠响应用户输入的时间点
FID（First Input Delay）
首次输入延迟，用户首次和页面交互（单击链接、点击按钮等）到页面响应交互的时间
 
3.1.2.2 指标求解

上述这么多指标该怎么获取呢？浏览器给我们留了相应的接口——神奇的window.performance，通过该接口可以获取一些列与性能相关的参数，下面以https://baidu.com 为例来看一下与这些指标相关的参数：

2022年再不知道前端监控就out了

文章插图
 
window.performance中的timing属性中的内容不就是为了求解上述指标所需要的值吗？看着上面的属性值再对应下面的performance访问流程图，整个过程是不是一目了然 。

2022年再不知道前端监控就out了

文章插图
 
有了上面的值我们就一起求解上述的指标：
一、网络层面
指标
计算
重定向耗时
redirectEnd - redirectStart
DNS解析耗时
domainLookupEnd - domainLookupStart
TCP连接耗时
connectEnd - connectStart
SSL连接耗时
connectEnd - secureConnectionStart
TTFB 网络请求耗时
responseStart - requestStart
数据传输耗时
responseEnd - responseStart
资源加载耗时
loadEventStart - domContentLoadedEventEnd
 
二、页面展示层面
Google工程师一直在推动以用户为中心的性能指标，所以页面展示层面的变化较大，求解方式稍有不同：
  1. FP和FCP
通过
window.performance.getEntriesByType(‘paint’)的方式获取
const paint = window.performance.getEntriesByType('paint');const FP = paint[0].startTime,const FCP = paint[1].startTime,
  1. LCP
function getLCP() {// 增加一个性能条目的观察者new PerformanceObserver((entryList, observer) => {let entries = entryList.getEntries();const lastEntry = entries[entries.length - 1];observer.disconnect();console.log('LCP', lastEntry.renderTime || lastEntry.loadTime);}).observe({entryTypes: ['largest-contentful-paint']});}
  1. FMP
function getFMP() {let FMP;new PerformanceObserver((entryList, observer) => {let entries = entryList.getEntries();observer.disconnect();console.log('FMP', entries);}).observe({entryTypes: ['element']});}
  1. DCL
domContentLoadEventEnd – fetchStart
  1. L
loadEventStart – fetchStart
  1. TTI
domInteractive – fetchStart
  1. FID
function getFID() {new PerformanceObserver((entryList, observer) => {let firstInput = entryList.getEntries()[0];if (firstInput) {const FID = firstInput.processingStart - firstInput.startTime;console.log('FID', FID);}observer.disconnect();}).observe({type: 'first-input', buffered: true});}3.1.3 异常信息
对于网站来说，异常信息是最致命、最影响用户体验的问题，需要重点监控 。对于异常信息可以分为两类：运行时错误、接口错误 。下面就分别来唠一唠这两类错误 。
一、运行时错误
当JAVAScript运行时有可能会发生错误，可归类为七种：语法错误、类型错误、范围错误、引用错误、eval错误、URL错误、资源加载错误 。为了捕获代码错误，需要考虑两类场景：非Promise场景和Promise场景，因为两种场景捕获错误的策略不同 。
1.非Promise场景
非Promise场景可通过监听error事件来捕获错误 。对于error事件捕获的错误分为两类：资源错误和代码错误 。资源错误指的就是js、css、img等未加载，该错误只能在捕获阶段获取到，且为资源错误时event.target.localName存在值（用此区分资源错误与代码错误）；代码错误指的就是语法错误、类型错误等这一类错误，可以获取代码错误的信息、堆栈等，用于排查错误 。
export function listenerError() {window.addEventListener('error', (event) => {if (event.target.localName) {console.log('这是资源错误', event);}else {console.log('这是代码错误', event);}}, true)}


推荐阅读


上一篇：武夷山红茶小种泡法,红茶要看保质期

下一篇：晚上泡红茶会失眠吗,喝乌龙茶是否会失眠