优化：提升性能
This commit is contained in:
396
src/config/performance.ts
Normal file
396
src/config/performance.ts
Normal file
@@ -0,0 +1,396 @@
|
||||
/**
|
||||
* 性能优化配置
|
||||
*/
|
||||
|
||||
// 性能配置接口
|
||||
export interface PerformanceConfig {
|
||||
// 缓存配置
|
||||
cache: {
|
||||
memory: {
|
||||
maxSize: number;
|
||||
defaultExpiry: number;
|
||||
};
|
||||
persistent: {
|
||||
maxSize: number;
|
||||
defaultExpiry: number;
|
||||
};
|
||||
};
|
||||
|
||||
// 懒加载配置
|
||||
lazyLoad: {
|
||||
delay: number;
|
||||
timeout: number;
|
||||
retries: number;
|
||||
retryDelay: number;
|
||||
};
|
||||
|
||||
// 虚拟滚动配置
|
||||
virtualScroll: {
|
||||
itemHeight: number;
|
||||
buffer: number;
|
||||
threshold: number;
|
||||
};
|
||||
|
||||
// API 请求配置
|
||||
api: {
|
||||
timeout: number;
|
||||
retries: number;
|
||||
retryDelay: number;
|
||||
concurrency: number;
|
||||
};
|
||||
|
||||
// 路由配置
|
||||
router: {
|
||||
preloadDelay: number;
|
||||
cacheSize: number;
|
||||
performanceThreshold: number;
|
||||
};
|
||||
|
||||
// 监控配置
|
||||
monitoring: {
|
||||
enabled: boolean;
|
||||
sampleRate: number;
|
||||
reportInterval: number;
|
||||
};
|
||||
}
|
||||
|
||||
// 默认性能配置
|
||||
export const defaultPerformanceConfig: PerformanceConfig = {
|
||||
cache: {
|
||||
memory: {
|
||||
maxSize: 200,
|
||||
defaultExpiry: 5 * 60 * 1000 // 5分钟
|
||||
},
|
||||
persistent: {
|
||||
maxSize: 100,
|
||||
defaultExpiry: 24 * 60 * 60 * 1000 // 24小时
|
||||
}
|
||||
},
|
||||
|
||||
lazyLoad: {
|
||||
delay: 200,
|
||||
timeout: 30000,
|
||||
retries: 3,
|
||||
retryDelay: 1000
|
||||
},
|
||||
|
||||
virtualScroll: {
|
||||
itemHeight: 50,
|
||||
buffer: 5,
|
||||
threshold: 100
|
||||
},
|
||||
|
||||
api: {
|
||||
timeout: 30000,
|
||||
retries: 3,
|
||||
retryDelay: 1000,
|
||||
concurrency: 5
|
||||
},
|
||||
|
||||
router: {
|
||||
preloadDelay: 2000,
|
||||
cacheSize: 20,
|
||||
performanceThreshold: 1000
|
||||
},
|
||||
|
||||
monitoring: {
|
||||
enabled: process.env.NODE_ENV === 'production',
|
||||
sampleRate: 0.1, // 10% 采样率
|
||||
reportInterval: 60000 // 1分钟上报一次
|
||||
}
|
||||
};
|
||||
|
||||
// 性能优化管理器
|
||||
export class PerformanceManager {
|
||||
private config: PerformanceConfig;
|
||||
private reportTimer: number | null = null;
|
||||
|
||||
constructor(config: Partial<PerformanceConfig> = {}) {
|
||||
this.config = { ...defaultPerformanceConfig, ...config };
|
||||
this.init();
|
||||
}
|
||||
|
||||
private init() {
|
||||
// 初始化性能监控
|
||||
if (this.config.monitoring.enabled) {
|
||||
this.startMonitoring();
|
||||
}
|
||||
|
||||
// 设置全局错误处理
|
||||
this.setupErrorHandling();
|
||||
|
||||
// 优化控制台输出
|
||||
this.optimizeConsole();
|
||||
}
|
||||
|
||||
// 开始性能监控
|
||||
private startMonitoring() {
|
||||
this.reportTimer = window.setInterval(() => {
|
||||
this.reportPerformance();
|
||||
}, this.config.monitoring.reportInterval);
|
||||
}
|
||||
|
||||
// 上报性能数据
|
||||
private reportPerformance() {
|
||||
if (Math.random() > this.config.monitoring.sampleRate) {
|
||||
return; // 采样控制
|
||||
}
|
||||
|
||||
try {
|
||||
const performanceData = this.collectPerformanceData();
|
||||
|
||||
// 这里可以发送到监控服务
|
||||
console.log('Performance Report:', performanceData);
|
||||
|
||||
// 可以发送到后端
|
||||
// this.sendToBackend(performanceData);
|
||||
} catch (error) {
|
||||
console.warn('Failed to report performance:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 收集性能数据
|
||||
private collectPerformanceData() {
|
||||
const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
|
||||
const memory = (performance as any).memory;
|
||||
|
||||
return {
|
||||
// 页面加载性能
|
||||
pageLoad: {
|
||||
domContentLoaded: navigation?.domContentLoadedEventEnd - navigation?.fetchStart,
|
||||
loadComplete: navigation?.loadEventEnd - navigation?.fetchStart,
|
||||
firstByte: navigation?.responseStart - navigation?.fetchStart
|
||||
},
|
||||
|
||||
// 内存使用
|
||||
memory: memory ? {
|
||||
used: Math.round(memory.usedJSHeapSize / 1024 / 1024),
|
||||
total: Math.round(memory.totalJSHeapSize / 1024 / 1024),
|
||||
limit: Math.round(memory.jsHeapSizeLimit / 1024 / 1024)
|
||||
} : null,
|
||||
|
||||
// 资源加载
|
||||
resources: this.getResourceMetrics(),
|
||||
|
||||
// 时间戳
|
||||
timestamp: Date.now()
|
||||
};
|
||||
}
|
||||
|
||||
// 获取资源指标
|
||||
private getResourceMetrics() {
|
||||
const resources = performance.getEntriesByType('resource');
|
||||
const metrics = {
|
||||
total: resources.length,
|
||||
slow: 0,
|
||||
failed: 0,
|
||||
avgDuration: 0
|
||||
};
|
||||
|
||||
let totalDuration = 0;
|
||||
|
||||
resources.forEach(resource => {
|
||||
const duration = resource.duration;
|
||||
totalDuration += duration;
|
||||
|
||||
if (duration > 2000) {
|
||||
metrics.slow++;
|
||||
}
|
||||
});
|
||||
|
||||
metrics.avgDuration = Math.round(totalDuration / resources.length);
|
||||
|
||||
return metrics;
|
||||
}
|
||||
|
||||
// 设置错误处理
|
||||
private setupErrorHandling() {
|
||||
// 全局错误处理
|
||||
window.addEventListener('error', (event) => {
|
||||
this.handleError('JavaScript Error', event.error);
|
||||
});
|
||||
|
||||
// Promise 错误处理
|
||||
window.addEventListener('unhandledrejection', (event) => {
|
||||
this.handleError('Unhandled Promise Rejection', event.reason);
|
||||
});
|
||||
|
||||
// Vue 错误处理
|
||||
if (window.Vue) {
|
||||
window.Vue.config.errorHandler = (error, instance, info) => {
|
||||
this.handleError('Vue Error', { error, instance, info });
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 处理错误
|
||||
private handleError(type: string, error: any) {
|
||||
console.error(`${type}:`, error);
|
||||
|
||||
// 可以发送错误到监控服务
|
||||
// this.reportError(type, error);
|
||||
}
|
||||
|
||||
// 优化控制台输出
|
||||
private optimizeConsole() {
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
// 生产环境禁用 console.log
|
||||
console.log = () => {};
|
||||
console.debug = () => {};
|
||||
console.info = () => {};
|
||||
}
|
||||
}
|
||||
|
||||
// 获取配置
|
||||
getConfig(): PerformanceConfig {
|
||||
return this.config;
|
||||
}
|
||||
|
||||
// 更新配置
|
||||
updateConfig(newConfig: Partial<PerformanceConfig>) {
|
||||
this.config = { ...this.config, ...newConfig };
|
||||
}
|
||||
|
||||
// 清理资源
|
||||
destroy() {
|
||||
if (this.reportTimer) {
|
||||
clearInterval(this.reportTimer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 性能优化建议
|
||||
export class PerformanceAdvisor {
|
||||
// 分析性能并给出建议
|
||||
static analyzeAndAdvise() {
|
||||
const advice: string[] = [];
|
||||
|
||||
// 检查内存使用
|
||||
const memory = (performance as any).memory;
|
||||
if (memory && memory.usedJSHeapSize > memory.jsHeapSizeLimit * 0.8) {
|
||||
advice.push('内存使用过高，建议清理不必要的缓存和引用');
|
||||
}
|
||||
|
||||
// 检查资源加载
|
||||
const resources = performance.getEntriesByType('resource');
|
||||
const slowResources = resources.filter(r => r.duration > 2000);
|
||||
if (slowResources.length > 0) {
|
||||
advice.push(`发现 ${slowResources.length} 个加载缓慢的资源，建议优化`);
|
||||
}
|
||||
|
||||
// 检查页面加载时间
|
||||
const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
|
||||
if (navigation) {
|
||||
const loadTime = navigation.loadEventEnd - navigation.fetchStart;
|
||||
if (loadTime > 3000) {
|
||||
advice.push('页面加载时间过长，建议优化首屏渲染');
|
||||
}
|
||||
}
|
||||
|
||||
return advice;
|
||||
}
|
||||
|
||||
// 获取优化建议
|
||||
static getOptimizationTips() {
|
||||
return [
|
||||
'使用虚拟滚动处理长列表',
|
||||
'启用组件懒加载',
|
||||
'合理使用缓存策略',
|
||||
'优化图片资源大小',
|
||||
'减少不必要的重新渲染',
|
||||
'使用 Web Workers 处理复杂计算',
|
||||
'启用 HTTP/2 和资源压缩',
|
||||
'使用 CDN 加速静态资源'
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
// 全局性能管理器实例
|
||||
export const performanceManager = new PerformanceManager();
|
||||
|
||||
// 性能装饰器
|
||||
export function performanceTrack(name: string) {
|
||||
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
|
||||
const originalMethod = descriptor.value;
|
||||
|
||||
descriptor.value = function (...args: any[]) {
|
||||
const startTime = performance.now();
|
||||
|
||||
try {
|
||||
const result = originalMethod.apply(this, args);
|
||||
|
||||
// 如果是 Promise，等待完成后记录
|
||||
if (result && typeof result.then === 'function') {
|
||||
return result.finally(() => {
|
||||
const duration = performance.now() - startTime;
|
||||
console.log(`${name} 执行时间: ${duration.toFixed(2)}ms`);
|
||||
});
|
||||
}
|
||||
|
||||
const duration = performance.now() - startTime;
|
||||
console.log(`${name} 执行时间: ${duration.toFixed(2)}ms`);
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
const duration = performance.now() - startTime;
|
||||
console.log(`${name} 执行时间: ${duration.toFixed(2)}ms (出错)`);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
return descriptor;
|
||||
};
|
||||
}
|
||||
|
||||
// 性能检查工具
|
||||
export class PerformanceChecker {
|
||||
// 检查长任务
|
||||
static checkLongTasks() {
|
||||
if ('PerformanceObserver' in window) {
|
||||
const observer = new PerformanceObserver((list) => {
|
||||
list.getEntries().forEach((entry) => {
|
||||
console.warn(`长任务检测: ${entry.duration.toFixed(2)}ms`, entry);
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe({ entryTypes: ['longtask'] });
|
||||
}
|
||||
}
|
||||
|
||||
// 检查布局抖动
|
||||
static checkLayoutShift() {
|
||||
if ('PerformanceObserver' in window) {
|
||||
const observer = new PerformanceObserver((list) => {
|
||||
let clsValue = 0;
|
||||
|
||||
list.getEntries().forEach((entry) => {
|
||||
if (!(entry as any).hadRecentInput) {
|
||||
clsValue += (entry as any).value;
|
||||
}
|
||||
});
|
||||
|
||||
if (clsValue > 0.1) {
|
||||
console.warn(`布局抖动过大: ${clsValue.toFixed(3)}`);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe({ entryTypes: ['layout-shift'] });
|
||||
}
|
||||
}
|
||||
|
||||
// 检查首次输入延迟
|
||||
static checkFirstInputDelay() {
|
||||
if ('PerformanceObserver' in window) {
|
||||
const observer = new PerformanceObserver((list) => {
|
||||
list.getEntries().forEach((entry) => {
|
||||
const fid = (entry as any).processingStart - entry.startTime;
|
||||
if (fid > 100) {
|
||||
console.warn(`首次输入延迟过大: ${fid.toFixed(2)}ms`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe({ entryTypes: ['first-input'] });
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user