指标含义与优化
- FID（First Input Delay）：首次输入延迟时间，用于衡量网站互动顺畅程度。它记录了用户首次与页面交互（如点击按钮、输入文本等）到浏览器实际处理该交互之间的时间差。属于可交互时间指标。
- 监控方法：可以通过在前端代码中设置事件监听器来记录用户的首次输入时间，并与浏览器实际处理该输入的时间进行比较。
- 优化建议：
减少主线程上的阻塞操作，确保浏览器能够及时响应用户的输入。
使用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});- FCP（First Contentful Paint）：首次内容绘制，记录页面首次绘制文本、图片、非空白Canvas或SVG的时间。属于加载性能指标。
- 监控方法：可以使用浏览器的Performance API或第三方性能监控工具来记录FCP时间。
- 优化建议：
优化服务器响应速度，减少页面加载时间。
使用CDN等技术加速静态资源的加载。
减少页面中的非关键资源请求，提高首屏加载速度。
计算方式：
const fcp = performance.getEntriesByType('paint').filter(entry => entry.name == 'first-contentful-paint')[0].startTime;- CLS（Cumulative Layout Shift）：累积布局偏移，衡量网页内容在加载过程中发生的意外布局偏移的频率和程度。属于稳定性指标。
- 监控方法：可以使用浏览器的Performance API或第三方性能监控工具来记录CLS分数。
- 优化建议：
避免在页面加载过程中动态改变元素的尺寸或位置。
使用CSS的width和height属性为元素设置固定的尺寸。
使用position: fixed或position: sticky来固定元素的位置。
计算方式：
import {getCLS} from 'web-vitals';
getCLS(console.log);- LCP（Largest Contentful Paint）：最大内容绘制，用于测量页面主要内容加载完成的时间。
- 监控方法：可以使用浏览器的Performance API或第三方性能监控工具来记录LCP时间。
- 优化建议：
- 优先加载和渲染页面的主要内容。
- 使用懒加载技术延迟加载非关键内容。
- 优化图片和视频的加载策略，如使用适当的格式、尺寸和压缩技术。
计算：
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});为了监控这些指标并进行性能优化，你可以考虑使用以下工具和方法：
- 浏览器开发者工具：大多数现代浏览器都内置了开发者工具，你可以使用其中的Performance面板来监控和分析页面的性能。
- 第三方性能监控工具：有许多第三方工具可以帮助你监控和优化前端性能，如Google Analytics、New Relic、DataDog等。这些工具通常提供了丰富的功能和报告，可以帮助你快速发现和解决问题。
- 前端性能监控库：如Lighthouse、PerformanceObserver等库可以帮助你收集和分析前端性能数据。这些库通常与浏览器API紧密结合，提供了更深入的性能分析功能。
在优化前端性能时，还需要注意以下几点：
- 减少HTTP请求：通过合并文件、使用雪碧图等技术减少HTTP请求的数量。
- 压缩和优化资源：对CSS、JavaScript和图片等资源进行压缩和优化，减少文件大小并加速加载速度。
- 利用缓存：合理使用浏览器缓存和CDN等技术减少不必要的网络请求和数据传输。
- 避免阻塞渲染：将非关键脚本设置为异步加载或延迟加载以避免阻塞页面渲染。
- 优化DOM操作：减少不必要的DOM操作并避免在循环中进行DOM操作以提高页面性能。
其他指标
除了之前提到的FID、FCP、CLS和LCP等性能监控指标外，还有其他一些与前端性能相关的关键指标。以下是其中一些重要的指标：
- Time to First Byte (TTFB)：首字节时间，它表示浏览器从发起请求到接收到服务器响应的第一个字节所花费的时间。这个指标主要反映了服务器的响应速度和网络延迟。
- Time to Interactive (TTI)：可交互时间，指页面完全加载并且用户可以进行交互的时间点。这个时间点通常是在所有关键资源和脚本都加载并执行完毕后。
- Total Blocking Time (TBT)：总阻塞时间，这是FID的一个补充指标，用于测量用户在一段时间内经历的连续阻塞的总时间。这可以帮助识别可能导致页面响应性差的长时间阻塞。
- DOMContentLoaded Event：当HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，无需等待样式表、图像和子框架的完成加载。
- Load Event：当整个页面及所有依赖资源如样式表和图片都已完成加载时，load事件才会被触发。
- Page Size：页面大小，这是组成页面的所有资源（HTML、CSS、JavaScript、图片等）的总大小。较大的页面大小可能导致加载时间延长。
- Requests：请求数量，指从网站下载资源时所有网络请求的总数。过多的请求可能会增加页面加载时间。
- Resource Loading Times：资源加载时间，指页面中各种资源（如CSS、JavaScript、图像等）的加载时间。
- JavaScript Execution Time：JavaScript执行时间，指页面中JavaScript代码执行所需的时间。
- Page Availability：页面可用性，指页面在各种设备和网络环境下的可用性。
- Error Monitoring：错误监控，指监控页面中的JavaScript错误、资源加载错误等。这有助于及时发现和修复潜在的性能问题。
为了监控和优化这些性能指标，你可以使用浏览器的开发者工具、第三方性能监控工具或前端性能监控库。这些工具可以帮助你收集和分析性能数据，识别性能瓶颈，并提供优化建议。在优化前端性能时，需要注意减少HTTP请求、压缩和优化资源、利用缓存、避免阻塞渲染、优化DOM操作等策略。
