前言

前端性能指标****

前置知识：

白屏时间 FP****

指的是当我输入URL开始，到页面开始有变化，只要有任意像素点变化，都算是白屏时间的完结。(根据图片显示)

function getFP() {
    new PerformanceObserver((entryList, observer) => {
        let enties = entryList.getEntries();
        console.log(entries);
        for (let i = 0; i < entries.length; i++) {
            if (entries[i].name === 'first-paint') {
                console.log( 'FP', entries[i].startTime);
            }
        }
        const lastEntry = entries[entries.length - 1];
        // observer.disconnect();
    }).observe({entryTypes: [ 'paint']});
};

⾸次内容绘制FCP 1. 指的是页面上绘制了第一个元素。 FP与FCP的最大的区别就在于：FP 指的是绘制像素，比如说页面的背景色是灰色的，那么在显示灰色背景时就记录下了 FP 指标。但是此时 DOM 内容还没开始绘制，可能需要文件下载、解析等过程，只有当 DOM 内容发生变化才会触发，比如说渲染出了一段文字，此时就会记录下 FCP 指标。因此说我们可以把这两个指标认为是和白屏时间相关的指标，所以肯定是最快越好。

function getFP() {
    new PerformanceObserver((entryList, observer) => { 
        let entries = entryList.getEntries(); console.log(entries);
        for (let i = 0; i < entries.length; i++) {
            if (entries[i].name === 'first-contentful-paint'){ 
                console.log('FCP', entries[i].startTime);
            }
        }
        const lastEntry = entries[entries.length - 1];
        // observer.disconnect();
    }).observe({entryTypes: ['paint']});
};

首次有效绘制 FMP****

这个东西具有一定的争议性，他指的是页面中有效内容绘制，对于每个网站对于有效内容的定义是不同的，因此一般不做研究。

首页时间****

首页时间指的是，当onload事件触发的时候，也就是整个首页加载完成的时候

function getFirstPage() {
    console.log('FIRSTPAGE', (performance.timing.loadEventEnd - performance.timing.fetchStart));
};

最大内容绘制 LCP****

用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。

function getLCP() {
    // 增加一个性能条目的观察者
    new PerformanceObserver((entryList, observer) => { 
        let entries = entryList.getEntries();
        const lastEntry = entries[entries.length - 1];
        // observer.disconnect();
        console.log('LCP', lastEntry.renderTime || lastEntry.loadTime);
    }).observe({entryTypes: ['largest-contentful-paint']});
}

首次可交互时间 TTI****

需要满足以下条件：

1. 从 FCP 指标后开始计算

2. 持续 5 秒内无长任务（执行时间超过 50 ms）且无两个以上正在进行中的 GET 请求

3. 往前回溯至 5 秒前的最后一个长任务结束的时间

function getTTI() {
    let time = performance.timing.domInteractive - performance.timing.fetchStart;
    console.log('TTI', time);
};

1. 首次输入延迟（FID）: 记录在 FCP 和 TTI 之间用户首次与页面交互时响应的延迟。

function getFID() {
    new PerformanceObserver((entryList, observer) => { 
        let firstInput = entryList.getEntries()[0];
        if (firstInput) {
            const FID = firstInput.processingStart - firstInput.startTime; console.log('FID', FID);
        }
        // observer.disconnect();
    }).observe({type: 'first-input', buffered: true});
}

「欢迎在评论区讨论」

性能指标

前言