前端性能监控

封面: %E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E7%9B%91%E6%8E%A7%2085db83fd863b462d9386a935991bd7d5/Untitled%207.png
简介: 前端性能监控原理、落地方案

性能监控

**性能采集SDK ⇒ 大数据处理 ⇒ 数据可视化 ⇒ 性能数据预警**

**性能采集SDK ⇒ 大数据处理 ⇒ 数据可视化 ⇒ 性能数据预警**

核心API

核心API navigation_timing，Navigation Timing API
提供了可用于衡量一个网站性能的数据。与用于相同目的的其他基于JavaScript的机制不同，该API可以提供可以更有用和更准确的端到端延迟数据。

**核心原理：根据Navigation Timing API，可以获取到任意过程的耗时**

**核心原理：根据Navigation Timing API，可以获取到任意过程的耗时**

代码实例

**域名解析耗时**

**域名解析耗时**

精度更高的API

Navigation Timing API只能精确到毫秒级，通过 **window.performance.getEntries()**🔥 获取纳秒级的结果。

FP（First Paint）首次绘制

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

Untitled

FCP（First Contentful Paint）首次内容绘制

标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至元素。

Untitled

LCP（Largest Contentful Paint）最大内容渲染

衡量viewport内可见的最大内容元素的渲染时间。元素包括img、video、div及其他块级元素。

LCP的数据会通过PerformanceEntry对象记录, 每次出现更大的内容渲染, 则会产生一个新的PerformanceEntry对象.(2019年11月新增)。

Untitled

DCL（DomContentloaded）

当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载。

L（onLoad）

页面的onLoad时的时间点。当依赖的资源, 全部加载完毕之后才会触发。

以上的API只能在 onload 中使用，onload之后无法监控，可以通过 PerformanceObserver 监控性能变化指标

Untitled