关于web前端性能监控的那些事儿
监控分为非入侵式和入侵式，非入侵式比如开发者自己的开发者工具，入侵式则需要在项目中添加监控的代码，以便监控真实用户的数据。
一、 合成监控SYN--Synthetic Monitoring（非入侵式）
以chrome devTool 为例：
（一）Network中的timing
image.png
上述涵盖：连接开始（DNS解析、SSL）及请求和响应数据，其中TTFB反应服务器的响应速度。
image.png
（二）Performance
image.png
1、FP：first paint 首次绘制
a、定义
页面在导航后首次呈现出不同于导航前内容的时间点
image.png
2、FCP：first contentful paint 首个内容绘制时间
a、定义
当页面的任一部分首次在屏幕上渲染的时间点，这个内容包含文字、图片（含背景图）、svg元素或者非白色的canvas元素。下图中FCP出现在第二帧
fcp
b、如何改善FCP？
image.png
3、DCL：DOMContentLoaded Event
这个大家看名字应该就理解，略。
4、LCP：largest contentful paint 最大内容绘制时间
a、定义
视口内最大图片(不含<svg>元素，但是如果<svg>在 <image>内则包含)或文本块的渲染时间。
image.png
image.png
image.png
b、如何改善LCP？
关于改善LCP的方法详见：https://web.dev/optimize-lcp/ 如文中提到 尽早的建立第三方连接的方式是采用preconnect及dns-prefetch：
<head>
…
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="preload" href="styles.css" as="style">
</head>
如何改进LCP？
image.png
5、FID first input delay 首次输入延迟
a、定义
衡量用户从点击链接、按钮等到浏览器实际能够访问之间的时间
image.png
image.png
b、如何改进FID？
详见： https://web.dev/optimize-fid/
image.png
6、TTI time to interactive 可交互时间
a、定义
从页面加载到页面主要子资源加载之间的时间，它能够快速可靠地响应用户输入。
b、如何改进TTI？
image.png
7、TBT total blocking time 总阻塞时间
a、定义
它度量了 首次内容绘制时间(FCP)和可交互时间（TTI）之间的总时间，在该时间中主线程被阻塞足够长的时间阻碍了输入的响应。
下图中主线程运行任务所花费的总时间为 250+90+35+30+155= 560ms，而总阻塞时间为 250-50+90-50+155-50=345ms
image.png
b、如何改进TBT？
image.png
8、CLS : cumulative layout shift 累计布局转移
a、定义
记录了页面上非预期的位移波动，其值为 位移影响的面积*位移距离。如下图，原本文字元素高度占据了视口的一半，随后文字元素向下移动了视口高度的25%，则CLS的值为 75%(位移影响的面积) * 25%(位移距离)=0.1875
image.png
image.png
b、如何改善CLS？
image.png
9、L：onload event
a、定义 load 事件
标准
以用户为中心的性能指标 https://web.dev/user-centric-performance-metrics/
（三）Lighthouse
image.png
当然这个也可以在网页上使用https://web.dev/measure/或者使用npm或插件，但是还是强烈推荐采用devTool的方式，因为它会针对不同指标给出很详细的优化建议。（网页版不稳定且无法给出详细建议，npm包不支持部分查询字符串的单页面项目）
主要有个5个指标：
1、performance 性能
如主要记录如首次内容绘制时间、可交互时间、总阻塞时间、最大内容绘制时间及累计布局转移时间等并进行打分。评分的由来 及计算器
image.png
我测试的详细分数
2、accessibilit 辅助功能
这个主要是检查 可能阻止用户访问你网站内容的常见问题。如背景和前景色的对比度是否足够、h1-h5标签的选用是否连贯合理、是否禁用了用户对网页的缩放功能
3、best practices 最佳实践
如 是否采用了https、引用的库是否有漏洞
4、seo 搜索引擎优化
如 确保 a链接可以被抓取，如下图写法就不可以被抓取
image.png
5、PWA
详见：https://web.dev/pwa-checklist/
（四）、其他第三方在线工具
1、https://gtmetrix.com/ (综合了pagespeed和ySlow)
2、https://www.webpagetest.org/
3、https://speedcurve.com/
二、真实用户监控 RUM--Real User Monitoring（入侵式）
上述是合成监控，还有真实用户监控：
1、sentry
image.png
接入步骤：
<script
src="https://browser.sentry-cdn.com/6.2.2/bundle.tracing.min.js"
integrity="sha384-6nyTKv8WQWCjiZcGvMp9ienPyVwBBfPhJk3/aiESxhtkGc0XtP6ZcB+vafBNfxTD"
crossorigin="anonymous"
></script>
<script>
Sentry.init({
dsn: 'https://xxxxx@xxxxx.ingest.sentry.io/xxxxx', // 你申请的dsn
integrations: [new Sentry.Integrations.BrowserTracing()],
tracesSampleRate: 1
});
</script>
2、oneapm
image.png
image.png
image.png
image.png
image.png
image.png
3、阿里的arms
之前在前端错误监控系统汇总中提到
应用实时监控服务ARMS
前端监控
4、国外的NewRelic
NewRelic
5、汇总
| 国外
| NewRelic | https://newrelic.com/ |
| | Appdynamics | https://www.appdynamics.com/ |
| | Compuware | |
| | sentry | https://github.com/getsentry/sentry |
| | atatus | https://www.atatus.com/browser-monitoring/features
| | | |
| | | |
| 国内
| oneapm | https://browser.oneapm.com/#/browser |
| | 听云 | https://www.tingyun.com/ |
| | 监控宝 | https://www.jiankongbao.com/pageMnt.html |
| | 透视宝 | https://www.toushibao.com/product_browser.html |
| | 压测宝 | http://www.yacebao.com/product.html |
| | 阿里的arms | https://www.aliyun.com/product/arms |
| | mmtrix | https://www.mmtrix.com/ |
| | frontjs | https://www.frontjs.com/ |
image.png
三、实现原理
关于前端性能指标，W3C 定义了强大的 Performance API，其中又包括了 High Resolution Time 、 Frame Timing 、 Navigation Timing 、 Performance Timeline 、Resource Timing 、 User Timing 等诸多具体标准。
这里主要讲解 Navigation Timing 以及 Resource Timing。
（一）监控页面加载时间
const navTimes = performance.getEntriesByType('navigation')
const [{ domComplete }] = performance.getEntriesByType('navigation')
// performance.getEntriesByType('navigation')【定义了当前文档的导航信息，比如是重载还是向前向后等】 比
// performance.timing【定义了从 navigationStart 至 loadEventEnd 的 21 个只读属性】更精准
image.png
上图摘自w3c https://w3c.github.io/navigation-timing/
（二）资源加载
const [{ startTime, responseEnd }] = performance.getEntriesByType('resource')
const loadTime = responseEnd - startTime
image.png
上图摘自 https://www.w3.org/TR/resource-timing-2/
四、其他有趣的api
performance.getEntries() //对网页发起的所有HTTP请求耗时信息统计后，以数组方式返回
performance.now(); // 不受系统时间限制
performance.navigation.type //通过整数值表示网页从何加载
//0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载
//1：网页通过“重新加载”按钮或者location.reload()方法加载
//2：网页通过“前进”或“后退”按钮加载
//255：其他来源的加载
performance.navigation.redirectCount //页面重定向次数
image.png
推荐资料：https://zhuanlan.zhihu.com/p/82981365
https://zhuanlan.zhihu.com/p/400429457
六、其他
1、benchmark.js 基准性能测试
var Benchmark = require('benchmark');
var suite = new Benchmark.Suite;
suite
.add('indexOf', function() {
var fruits = ['apple', 'orange', 'grape'];
fruits.indexOf('mango'); // -1
})
.add('filter', function() {
var fruits = ['apple', 'orange', 'grape'];
fruits.filter(function(value) {
return value === 'mango';
});
})
.on('cycle', function(event) {
console.log(String(event.target));
})
.on('complete', function() {
console.log('Fastest is ' + this.filter('fastest').map('name'));
})
.run({ 'async': true });
image.png
