性能监控

一、官方指标标准

二、网页请求示意图

• 页面请求
• 单页面请求

网页加载时长时关注的是以下5个过程 ：

1. 重定向时间 ：获取此网页前重定向所花费的时间
2. DNS域名查找时间：查找此网页的 DNS 所花费的时间
3. TCP服务器链接时间：用户连接到您的服务器所需的时间
4. 服务器响应时间：您的服务器响应用户请求所需时间，其中包括从用户所在位置连接到您的服务器所需的网络时间
5. 网页下载时间：下载网页所需的时间

三、指标的采集

• fcp

export default function observerFCP() {

    const entryHandler = (list) => {

        for (const entry of list.getEntries()) {

            if (entry.name === 'first-contentful-paint') {

                observer.disconnect();
                console.log(entry.toJSON())
            }
        }
    }

    // 统计和计算fcp的时间

    const observer = new PerformanceObserver(entryHandler);

    // buffered: true 确保观察到所有paint事件

    observer.observe({type: 'paint', buffered: true});

}

• LCP

export default function observerLCP() {

    const entryHandler = (list) => {
        if (observer) {
            observer.disconnect();
        } 
        for (const entry of list.getEntries()) {
            const json = entry.toJSON();
            console.log(json);
        }
    }
    const observer = new PerformanceObserver(entryHandler);
    // buffered: true 确保观察到所有paint事件
    observer.observe({type: 'largest-contentful-paint', buffered: true});
}
observerLCP()