前端页面性能监控接入文档

一、创建项目

首先在前端性能栏位新建项目(Topic):

二、代码部署

JS-SDK 地址:https://mazey.cn/feperf/sdk/loader?topic=${topic}&rate=${rate}&action=${action}

参数 类型 说明
topic String 项目名称,例如:test
rate Number 采样率,0.01~1 => 1%~100%
action String 触发方式,manual 手动(默认) auto 自动

要使用 JS-SDK 上报性能数据,需要在 标签前添加一段代码:

<script src="https://mazey.cn/feperf/sdk/loader?topic=test&rate=0.5&action=auto" id="feperf-sdk" defer></script>

如果想更加灵活的使用上报接口,也可以使用手动上报:

<script src="https://mazey.cn/feperf/sdk/loader?topic=test&rate=0.5" id="feperf-sdk"></script>
<script>
window.Feperf.ready.then(({ reportPerf }) => {
  reportPerf();
});
</script>

或者:

import { loadScript } from 'mazey';

loadScript({
    url: 'https://mazey.cn/feperf/sdk/loader?topic=test&rate=0.77',
    id: 'feperf-sdk'
  }).then(() => {
    window.Feperf &&
      window.Feperf.ready.then(({ reportPerf }) => {
        reportPerf();
      });
  });

三、查看数据

部署完成后,第二天可查看数据监控曲线,数据每 30 分钟更新一次。

附录:性能埋点指标

指标 字段 计算⽅法
* DNS 查询时间 dns_time domainLookupEnd - domainLookupStart
* 服务器连接时间 tcp_time connectEnd - connectStart
* 服务器响应时间 response_time responseStart - requestStart
* ⽩屏时间 white_time responseStart - navigationStart
* DomReady 总时间 domready_time domContentLoadedEventStart - navigationStart
* 页面加载时间 onload_time loadEventStart - navigationStart
* EventEnd 总时间 render_time loadEventEnd -navigationStart
上个⽂档卸载时间 unload_time unloadEventEnd - unloadEventStart
重定向时间 redirect_time redirectEnd - redirectStart
客户端⽩屏时间 custom_white_time renderTiming - navigationStart
SSL连接时间 ssl_time connectEnd - secureConnectionStart
⽹⻚下载时间 download_time responseEnd - responseStart
FCP first_contentful_paint_time firstPaintTime

Performance API 字典

名称 含义(值为时间戳)
redirectStart 第⼀个HTTP重定向开始
redirectEnd 最后⼀个HTTP重定向完成
domLoading 浏览器开始解析⽹⻚DOM结构的时间
domainLookupStart 域名查询开始
domainLookupEnd 域名查询结束
domInteractive ⽹⻚dom树创建完成,开始加载内嵌资源的时间
connectStart HTTP请求开始向服务器发送
connectEnd 浏览器与服务器之间的连接建⽴
requestStart 浏览器向服务器发出HTTP或者开始读取本地缓存时
responseStart 浏览器从服务器收到(或从本地缓存读取)第⼀个字节
responseEnd 浏览器从服务器收到(或从本地缓存读取,或从本地资源读取)最后⼀个字节
domContentLoadedEventStart ⽹⻚DOMContentLoaded事件发⽣时,即当解析器发送DOMContentLoaded 事件,即所有需要被执⾏的脚本已经被解析
domContentLoadedEventEnd 当⽹⻚所有需要⽴即执⾏的脚本已经被执⾏,domReady的时间(不论执⾏顺序)
domComplete ⽹⻚dom结构⽣成时的时间戳
loadEventStart 当前⽹⻚load事件的回调函数开始执⾏
loadEventEnd 当前⽹⻚load事件的回调函数结束运⾏
navigationStart 浏览器处理当前⽹⻚的启动时间
fetchStart 浏览器发起http请求读取⽂档的毫秒时间戳
connectStart http请求开始向服务器发送的时间戳

发表评论

电子邮件地址不会被公开。 必填项已用*标注