你还在凭感觉来优化性能？

目录

前言

指标收集

1. Navigation Timing API - 页面加载时间

2. Resource Timing API - 资源加载性能

3. User Timing API - 自定义时间点

4. Long Tasks API - 长任务性能

5. Navigation Observer API - 导航事件监测

6. LCP的采集

7. FID的收集

8. CLS的收集

小结

---

前言

        众所周知，感觉是最不靠谱的东西，这完全取决于主观意识。我们做性能优化一定要取决于一些指标，而 Performance API 向我们提供了访问和测量浏览器性能相关信息的方式。通过它，我们可以获取有关页面加载时间、资源加载性能、用户交互延迟等详细信息，用于性能分析和优化，而不是完全靠自己的感官意识，感觉更快了或者更慢了。

        performance 给我们提供了许多好用的api接口，我们可以通过它来获得一些指标。

指标收集

1. Navigation Timing API - 页面加载时间

// 获取页面加载时间相关的性能指标 
const navigationTiming = performance.timing; 
console.log('页面开始加载时间: ', navigationTiming.navigationStart); 
console.log('DOMContentLoaded 事件发生时间: ', navigationTiming.domContentLoadedEventEnd); 
console.log('页面加载完成时间: ', navigationTiming.loadEventEnd); 
console.log('页面从加载到结束所需时间',navigationTiming.loadEventEnd - navigationTiming.navigationStart)

2. Resource Timing API - 资源加载性能

// 获取资源加载性能数据 
const resources = performance.getEntriesByType('resource'); 
resources.forEach(resource => { 
    console.log('资源 URL: ', resource.name); 
    console.log('资源开始加载时间: ', resource.startTime); 
    console.log('资源加载结束时间: ', resource.responseEnd); 
    console.log('资源加载持续时间: ', resource.duration); 
});

3. User Timing API - 自定义时间点

// 标记自定义时间点 
performance.mark('startOperation'); 
 
// 执行需要测量的操作 
for(let i = 0;i < 10000;i++) {
} 
performance.mark('endOperation'); 
 
// 测量时间差 
performance.measure('operationDuration', 'startOperation', 'endOperation'); 
const measurement = performance.getEntriesByName('operationDuration')[0]; 
console.log('操作执行时间: ', measurement.duration); 
// 和console.time, console.timeEnd比较相似

4. Long Tasks API - 长任务性能

// 获取长任务性能数据 
const longTasks = performance.getEntriesByType('longtask'); 
longTasks.forEach(task => { 
    console.log('任务开始时间: ', task.startTime); 
    console.log('任务持续时间: ', task.duration); 
});

5. Navigation Observer API - 导航事件监测

// 创建 PerformanceObserver 对象并监听导航事件 
const observer = new PerformanceObserver(list => { 
    const entries = list.getEntries(); 
    entries.forEach(entry => { 
        console.log('导航类型: ', entry.type); 
        // navigate 表示页面的初始导航，即浏览器打开新的网页或重新加载当前网页。 
        // reload 表示页面的重新加载，即浏览器刷新当前网页。 
        // back_forward 表示通过浏览器的前进或后退按钮导航到页面。 
        console.log('导航开始时间: ', entry.startTime); 
        console.log('导航持续时间: ', entry.duration); 
    }); 
}); 
// 监听 navigation 类型的事件 
observer.observe({ type: 'navigation', buffered: true });

6. LCP的采集

        LCP（Largest Contentful Paint）表示最大内容绘制，指的是页面上最大的可见内容元素（例如图片、视频等）绘制完成的时间点。LCP反映了用户感知到的页面加载速度，因为它代表了用户最关注的内容何时变得可见。LCP 应在页面首次开始加载后的2.5 秒内发生。

new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {     
        console.log('Largest Contentful Paint:', entry.startTime);   
    } 
}).observe({type: 'largest-contentful-paint', buffered: true});

浏览器会多次报告 LCP ，而真正的 LCP 是用户交互前最近一次报告的 LCP。

7. FID的收集

        FID（First Input Delay）表示首次输入延迟，衡量了用户首次与页面进行交互（例如点击按钮、链接等）时，响应所需的时间。较低的FID值表示页面对用户输入更敏感，用户可以更快地与页面进行交互，页面的 FID 应为100 毫秒或更短。

new PerformanceObserver( function(list, obs) {
    const firstInput = list.getEntries()[0];
    const firstInputDelay = firstInput.processingStart - firstInput.startTime;
    const firstInputDuration = firstInput.duration;   
    console.log('First Input Delay', firstInputDuration);   
    obs.disconnect(); 
}).observe({type: 'first-input', buffered: true});

8. CLS的收集

        CLS（Cumulative Layout Shift）表示累积布局偏移，衡量了页面在加载过程中发生的意外布局变化程度。当页面上的元素在加载过程中发生位置偏移，导致用户正在交互时意外点击链接或按钮，就会产生布局偏移。页面的 CLS 应保持在 0.1  或更少，这里的0.1表示10%。请注意，CLS 的计算可能涉及复杂的算法和权重计算，下列代码示例仅演示了基本的计算过程。

const observer = new PerformanceObserver((entryList) => { 
    const entries = entryList.getEntries(); 
    let clsScore = 0; 
    entries.forEach(entry => { 
        // 计算每个布局变化的分数 
        clsScore += entry.value; 
    }); 
    console.log('CLS 值: ', clsScore); 
}); 
// 监听 Layout Shift 类型的条目 
observer.observe({ type: 'layout-shift', buffered: true });

小结

• 测量页面加载时间：性能 API 允许我们测量和分析网页加载所需的时间。通过使用性能计时指标，如 navigationStart、domContentLoadedEventEnd 和 loadEventEnd，我们可以准确测量页面加载过程中各个阶段的持续时间。
• 分析资源加载性能：利用性能 API，我们可以检查网页上正在加载的各个资源（如图像、脚本、样式表）的性能。这包括跟踪资源加载时间、大小和状态码，有助于识别影响整体性能的瓶颈或问题。
• 监测用户交互延迟：性能 API 使我们能够测量用户交互和浏览器响应之间的延迟。通过跟踪类似于 firstInputDelay（FID）和 firstInputTime 的指标，我们可以评估网页对用户操作（如点击或触摸）的响应速度，并确定改进的方向。
• 基准测试和比较分析：性能 API 允许我们对网页的不同版本或不同网页的性能进行基准测试和比较分析。通过收集性能数据和指标，我们可以评估代码更改、优化或第三方资源对页面性能的影响，并做出明智的决策。
• 性能优化和报告：利用性能 API 获得的洞察力，我们可以确定性能瓶颈和改进的方向。然后，可以使用这些信息来实施优化，例如减小文件大小、降低服务器响应时间、优化缓存策略和提高渲染效率。