指标含义与优化

减少主线程上的阻塞操作，确保浏览器能够及时响应用户的输入。

使用Web Workers等技术将计算密集型任务移至后台线程执行。

计算方式：

const observer = new PerformanceObserver((list) => {for (const entry of list.getEntries()) {console.log('fid', entry.processingStart - entry.startTime);}});observer.observe({type: 'first-input', buffer: true});

优化服务器响应速度，减少页面加载时间。

使用CDN等技术加速静态资源的加载。

减少页面中的非关键资源请求，提高首屏加载速度。

计算方式：

const fcp = performance.getEntriesByType('paint').filter(entry => entry.name == 'first-contentful-paint')[0].startTime;

避免在页面加载过程中动态改变元素的尺寸或位置。

使用CSS的width和height属性为元素设置固定的尺寸。

使用position: fixed或position: sticky来固定元素的位置。

计算方式：

import {getCLS} from 'web-vitals';getCLS(console.log);

优先加载和渲染页面的主要内容。

使用懒加载技术延迟加载非关键内容。

优化图片和视频的加载策略，如使用适当的格式、尺寸和压缩技术。

计算：

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

为了监控这些指标并进行性能优化，你可以考虑使用以下工具和方法：

在优化前端性能时，还需要注意以下几点：

其他指标

除了之前提到的FID、FCP、CLS和LCP等性能监控指标外，还有其他一些与前端性能相关的关键指标。以下是其中一些重要的指标：

为了监控和优化这些性能指标，你可以使用浏览器的开发者工具、第三方性能监控工具或前端性能监控库。这些工具可以帮助你收集和分析性能数据，识别性能瓶颈，并提供优化建议。在优化前端性能时，需要注意减少HTTP请求、压缩和优化资源、利用缓存、避免阻塞渲染、优化DOM操作等策略。