在前端性能优化中，准确采集性能数据是第一步。然而，在复杂的网页环境中，获取性能数据可能会出现一些问题，例如某些页面的性能数据无法正确获取。本文将分享如何通过优化采集逻辑，以及引入错误处理和重试机制，来提升性能数据采集的稳定性。 本人的浏览器扩展插件github.com/yangyuan-zh…
已上架edge浏览器，搜索网页缓存清理。 已上架谷歌浏览器，搜索网页数据清理工具。
问题描述
在项目开发过程中，我们发现部分页面的性能数据无法正常获取。这些问题主要表现为：
- 某些页面
window.performance数据为空。 - 部分性能指标采集延迟，导致数据不准确。
- 浏览器兼容性问题引发的采集错误。
解决方案
针对上述问题，我们从以下几个方面优化了性能数据的采集逻辑：
- 错误处理机制
为性能数据采集逻辑添加了统一的错误处理机制，确保即使部分页面采集失败，也不会影响整体功能。 - 重试机制
引入重试机制，在性能数据采集失败时自动重试，最大限度提升数据获取的成功率。 - 优化采集逻辑
重新梳理性能数据的获取流程，确保逻辑清晰、兼容性强。
实现步骤
1. 错误处理机制
通过 try-catch 捕获性能数据采集过程中可能的错误：
function getPerformanceData() {
try {
const performanceData = window.performance.getEntriesByType('navigation')[0];
if (!performanceData) throw new Error('Performance data is unavailable');
return performanceData;
} catch (error) {
console.error('Error fetching performance data:', error.message);
return null;
}
}
2. 引入重试机制
当性能数据采集失败时，利用重试机制再次尝试获取数据：
async function fetchPerformanceDataWithRetry(retries = 3, delay = 1000) {
for (let i = 0; i < retries; i++) {
const data = getPerformanceData();
if (data) return data;
console.warn(`Retrying to fetch performance data... (${i + 1}/${retries})`);
await new Promise((resolve) => setTimeout(resolve, delay));
}
console.error('Failed to fetch performance data after retries.');
return null;
}
3. 兼容性优化
针对不同浏览器的支持情况，增加兼容性处理：
function getCompatiblePerformanceData() {
if (typeof window.performance.getEntriesByType === 'function') {
return window.performance.getEntriesByType('navigation')[0];
}
// 退回到更基础的性能数据获取方式
return window.performance.timing;
}
优化效果
通过以上优化，我们实现了以下目标：
- 稳定性提升：性能数据采集的成功率大幅提升，适配了更多复杂页面。
- 兼容性增强：优化后的逻辑在主流浏览器中均可正常运行。
- 容错性改进：即使采集失败，也能通过日志快速定位问题。
总结
性能数据的准确采集对前端优化至关重要。通过错误处理、重试机制和逻辑优化，可以有效提升性能数据采集的成功率和可靠性，为后续的性能分析和优化奠定基础。如果你在项目中也遇到了类似问题，不妨尝试以上方法。
