前端性能监控是通过技术手段观察、记录并分析用户使用网站或应用时的体验，核心在于提升页面加载速度与交互流畅度。1. 页面加载时间可通过performance api获取navigationstart与loadeventend差值计算，并通过fetch上报数据；2. 首次渲染（fp）和首次内容绘制（fcp）通过performanceobserver监听paint事件获取，优化关键渲染路径可改善加载感知；3. 最大内容绘制（lcp）反映最大可见元素加载时间，优化图片大小与cdn可降低lcp；4. 首次可交互时间（tti）结合长任务判断，延迟低于5秒无长任务即为tti；5. 输入延迟（fid）通过first-input事件获取，优化js执行效率可减少卡顿；6. 跨域资源监控需配置cors、timing-allow-origin及crossorigin属性；7. 性能工具选择考虑功能、易用性、成本与集成能力；8. 数据用于分析瓶颈、制定策略、验证效果并持续改进。
前端性能监控，简单来说，就是通过技术手段观察、记录并分析用户在使用你的网站或应用时的体验。重点在于“体验”，包括页面加载速度、交互流畅度等等。监控这些指标，才能知道哪里慢、哪里卡，然后才能对症下药，提升用户体验。
页面加载性能的监控，是前端性能监控的重中之重。
JS实现前端性能监控的核心在于利用浏览器提供的Performance API，配合一些自定义的监控策略和上报机制。
立即学习“前端免费学习笔记（深入）”；
解决方案
-
页面加载时间（Load Time）
这是最直观的指标。从用户输入URL到页面完全加载并呈现，总共花了多少时间？
window.addEventListener('load', () => { const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart; console.log('页面加载时间：', loadTime, 'ms'); // 上报 loadTime 到服务器 reportMetric('load_time', loadTime); }); function reportMetric(name, value) { // 这里是上报逻辑，可以用fetch或者XMLHttpRequest fetch('/api/metrics', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, value }) }).catch(err => console.error('上报失败:', err)); }performance.timing包含了页面加载过程中的各个时间节点，loadEventEnd是load事件完成的时间，navigationStart是导航开始的时间。-
挑战：
performance.timing在某些旧版本浏览器中可能存在兼容性问题，需要做兼容性处理。 -
改进： 可以使用
PerformanceObserver监听longtask事件，找出阻塞主线程的任务，进一步优化加载性能。
-
挑战：
-
首次渲染时间（First Paint, FP）和首次内容绘制时间（First Contentful Paint, FCP）
用户看到页面出现第一个像素的时间，以及看到页面上出现任何内容（例如文本、图像）的时间。这两个指标直接影响用户对页面加载速度的感知。
new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log(entry.name, entry.startTime); if (entry.name === 'first-paint') { reportMetric('first_paint', entry.startTime); } else if (entry.name === 'first-contentful-paint') { reportMetric('first_contentful_paint', entry.startTime); } } }).observe({ type: 'paint', buffered: true });PerformanceObserver可以监听paint事件，获取first-paint和first-contentful-paint的时间。buffered: true表示可以获取在监听器注册之前就已经发生的事件。- 挑战： 某些情况下，FCP 可能受到字体加载的影响，导致FCP时间较长。
- 思考： 如果FCP过长，可以考虑优化关键渲染路径，例如延迟加载非关键资源。
-
最大内容绘制时间（Largest Contentful Paint, LCP）
用户在视窗中看到的最大内容元素完成渲染的时间。LCP更能反映用户感知到的加载速度，因为它是页面上最大可见元素加载完成的时间。
new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { reportMetric('largest_contentful_paint', entry.startTime); } }).observe({ type: 'largest-contentful-paint', buffered: true });PerformanceObserver监听largest-contentful-paint事件，获取 LCP 的时间。- 挑战： LCP 的计算可能受到图片、视频等资源加载的影响。
- 优化： 优化图片大小、使用CDN加速、预加载关键资源，可以有效降低LCP。
-
首次可交互时间（Time to Interactive, TTI）
页面首次变得可以完全交互的时间。用户可以点击按钮、填写表单等。TTI 是衡量页面可用性的重要指标。
TTI的计算相对复杂，需要结合长任务（Long Task）来判断。
let tti = null; let lastLongTaskEndTime = 0; new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { if (entry.duration > 50) { // Long Task 定义为耗时超过 50ms 的任务 lastLongTaskEndTime = entry.startTime + entry.duration; } } }).observe({ type: 'longtask', buffered: true }); window.addEventListener('load', () => { // 假设 TTI 是 load 事件后 5 秒内没有长任务的时间点 setTimeout(() => { tti = lastLongTaskEndTime || performance.timing.loadEventEnd; console.log('TTI:', tti); reportMetric('time_to_interactive', tti); }, 5000); });这个例子中，我们监听
longtask事件，记录最后一个长任务的结束时间。然后在load事件后，假设 5 秒内没有长任务，就认为 TTI 是最后一个长任务的结束时间，或者loadEventEnd。- 挑战： TTI 的计算方法比较复杂，不同的计算方法可能会得到不同的结果。
- 改进： 可以使用 Lighthouse 等工具来辅助计算 TTI。
-
输入延迟（Input Delay）
用户与页面交互时，浏览器响应用户输入所花费的时间。高输入延迟会导致用户感到卡顿。
输入延迟可以通过监听
interaction事件来获取，但兼容性可能存在问题。更常用的方法是使用First Input Delay (FID)。new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { const fid = entry.processingStart - entry.startTime; reportMetric('first_input_delay', fid); } }).observe({ type: 'first-input', buffered: true });PerformanceObserver监听first-input事件，计算 FID。- 挑战： FID 只能在用户首次与页面交互时获取。
- 优化： 优化 JavaScript 执行效率，减少阻塞主线程的任务，可以有效降低输入延迟。
如何处理跨域资源性能监控问题？
如果你的网站使用了CDN或者其他域名的资源，那么直接通过Performance API获取这些资源的性能数据可能会遇到跨域问题。
-
解决方案：
- CORS配置： 确保你的资源服务器配置了正确的CORS头，允许你的域名访问这些资源。
-
Timing-Allow-Origin： 在资源服务器的响应头中添加Timing-Allow-Origin，指定允许获取性能数据的域名。例如，Timing-Allow-Origin: *允许所有域名获取性能数据。或者Timing-Allow-Origin: https://yourdomain.com允许特定域名获取。 -
crossorigin属性： 在HTML标签（如、）中添加crossorigin属性。例如，
anonymous表示不携带凭证，use-credentials表示携带凭证。
如何选择合适的性能监控工具？
市面上有很多性能监控工具，例如Google Analytics、Lighthouse、WebPageTest、New Relic、Sentry等等。选择合适的工具需要考虑以下因素：
- 功能： 工具是否提供了你需要的性能指标？是否支持自定义监控？
- 易用性： 工具是否易于安装和配置？是否提供了清晰的报表和分析？
- 成本： 工具是免费的还是收费的？收费工具的价格是否合理？
- 集成： 工具是否可以与你现有的开发流程和工具集成？
如何将性能监控数据用于优化？
仅仅监控性能数据是不够的，更重要的是如何利用这些数据来优化你的网站或应用。
- 分析瓶颈： 通过性能监控数据，找出页面加载速度慢、交互卡顿的原因。
- 制定优化策略： 针对不同的瓶颈，制定相应的优化策略。例如，优化图片大小、使用CDN加速、减少HTTP请求、优化JavaScript执行效率等等。
- 验证优化效果： 在优化之后，再次进行性能监控，验证优化策略是否有效。
- 持续改进： 性能优化是一个持续的过程，需要不断地监控、分析和优化。
