介绍

核心性能监控指标

FCP（First Contentful Paint）

首次有内容的绘制。 指标参考数值： 1000-2500

FID（First Input Delay）

首次输入延迟

TTI（Time to Interactive）

可交互时间

TBT（Total Blocking Time）

总阻塞时间

监控哪些东西？

SYN 合成监控

通过一系列的工具、规则运行页面， 提取性能指标。

chrome 的 Performance

FCP

let perfomanceMetrics = {};
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        // `entry` is a PerformanceEntry instance.
        // `name` will be either 'first-paint' or 'first-contentful-paint'.
        const metricName = entry.name;
        const time = Math.round(entry.startTime + entry.duration);
        if (metricName === 'first-paint') {
            perfomanceMetrics.fp = time;
        }
        if (metricName === 'first-contentful-paint') {
            perfomanceMetrics.fcp = time;
        }
    }
});
// Start observing the entry types you care about.
observer.observe({entryTypes: ['paint']});

TTI
方式1:

    if (PerformanceLongTaskTiming) {
        window.__tti = {e: []};
        const observer = new PerformanceObserver((list) => {
            for (const entry of list.getEntries()) {
                // observe the longtask to get the time to interactive (TTI)
                if (entry.entryType === 'longtask') {
                    window.__tti.e.concat(entry);
                }
            }
        });
        observer.observe({entryTypes: ['longtask']});
    }

方式2:

    if (PerformanceLongTaskTiming) {
        window.__tti = {e: []};
        const observer = new PerformanceObserver((list) => {
            for (const entry of list.getEntries()) {
                // observe the longtask to get the time to interactive (TTI)
                if (entry.entryType === 'longtask') {
                    window.__tti.e.concat(entry);
                }
            }
        });
        observer.observe({entryTypes: ['longtask']});
    }

Google 的 Lighthouse

• Performance
• PWA
• Accessibility
• Best Parctices SEO

  RUM 真实用户监控

  

  使用标准的API

  

  定义合适的指标

  采集正确的数据

  上报关联的维度

  

  性能监控SDK实践

项目名称： TypeScript开发性能监控的SDK+用户错误的源代码

什么是SDK？

Software Development Kit 的缩写，翻译过来——软件开发工具包。（辅助开发某一类软件的相关文档、范例和工具的集合都可以叫做SDK）
例如：

相比API， 有区别。
API全称 Application Programming Interface，应用程序接口

错误源代码

错误记录方式？

• 编译环境 ts/js
• 打包工具 rollup/esbuild/swc(rust)
• 目标 umd, 使用microbundle （封装rollup）

参考：
教程 https://v.youku.com/v_show/id_XNTEwNjU0NTk0MA==.html
蚂蚁金服如何把前端性能监控做到极致?)
如何从 0 到 1 搭建性能检测系统)
有赞移动端性能监控平台 https://mp.weixin.qq.com/s/0Uf0G8P43XUWl7IPVtAu8g

node自带api

// node --expose-gc index.js 
global.gc();  // 垃圾回收
console.log(process.memoryUsage().heapTotal);
{
  rss: 20746240,
  heapTotal: 4468736,
  heapUsed: 1871224,
  external: 821322,
  arrayBuffers: 9898
}

http://nodejs.cn/api/process/process_memoryusage.html