/**
* 时钟性能监控器
*
* 功能：
* 1. 监控定时器数量
* 2. 监控DOM查询频率
* 3. 监控内存使用
* 4. 监控时间格式化性能
*/
class ClockPerformanceMonitor {
constructor() {
this.metrics = {
intervalCount: 0,
domQueries: 0,
formatOperations: 0,
memoryUsage: [],
lastCheck: Date.now()
};
this.isMonitoring = false;
this.monitorInterval = null;
console.log('⏱️ Clock Performance Monitor initialized');
}
/**
* 开始性能监控
*/
startMonitoring() {
if (this.isMonitoring) {
console.log('⚠️ Performance monitoring already running');
return;
}
this.isMonitoring = true;
this.resetMetrics();
// 每5秒收集一次性能数据
this.monitorInterval = setInterval(() => {
this.collectMetrics();
}, 5000);
// 监控DOM查询
this.interceptDOMQueries();
console.log('🚀 Clock performance monitoring started');
}
/**
* 停止性能监控
*/
stopMonitoring() {
if (!this.isMonitoring) {
return;
}
this.isMonitoring = false;
if (this.monitorInterval) {
clearInterval(this.monitorInterval);
this.monitorInterval = null;
}
// 生成性能报告
this.generateReport();
console.log('⏹️ Clock performance monitoring stopped');
}
/**
* 重置指标
*/
resetMetrics() {
this.metrics = {
intervalCount: 0,
domQueries: 0,
formatOperations: 0,
memoryUsage: [],
lastCheck: Date.now()
};
}
/**
* 收集性能指标
*/
collectMetrics() {
// 统计活跃的定时器数量
this.countActiveIntervals();
// 收集内存使用情况
this.collectMemoryUsage();
// 检查时间格式化性能
this.measureFormatPerformance();
}
/**
* 统计活跃定时器
*/
countActiveIntervals() {
let intervalCount = 0;
// 检查内存管理器中的定时器
if (window.memoryManager) {
intervalCount += window.memoryManager.intervals.length;
}
// 检查统一时间管理器
if (window.unifiedTimeManager && window.unifiedTimeManager.isRunning) {
intervalCount += 1;
}
// 检查其他可能的定时器
if (window.homeTimeInterval) intervalCount += 1;
if (window.timeUpdateInterval) intervalCount += 1;
this.metrics.intervalCount = intervalCount;
if (intervalCount > 2) {
console.warn(`⚠️ High interval count detected: ${intervalCount}`);
}
}
/**
* 收集内存使用
*/
collectMemoryUsage() {
if (performance.memory) {
const memoryMB = Math.round(performance.memory.usedJSHeapSize / 1024 / 1024);
this.metrics.memoryUsage.push({
timestamp: Date.now(),
usedMB: memoryMB
});
// 只保留最近10个记录
if (this.metrics.memoryUsage.length > 10) {
this.metrics.memoryUsage.shift();
}
// 内存增长告警
if (this.metrics.memoryUsage.length > 2) {
const latest = this.metrics.memoryUsage[this.metrics.memoryUsage.length - 1];
const previous = this.metrics.memoryUsage[this.metrics.memoryUsage.length - 2];
const growthMB = latest.usedMB - previous.usedMB;
if (growthMB > 5) { // 增长超过5MB
console.warn(`🚨 Memory growth detected: +${growthMB}MB in 5 seconds`);
}
}
}
}
/**
* 测量时间格式化性能
*/
measureFormatPerformance() {
const startTime = performance.now();
// 模拟时间格式化操作
const date = new Date();
try {
const formatter = new Intl.DateTimeFormat('en-GB', {
timeZone: 'UTC',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
});
formatter.format(date);
} catch (e) {
// 忽略错误
}
const duration = performance.now() - startTime;
this.metrics.formatOperations++;
if (duration > 5) { // 超过5ms
console.warn(`⏱️ Slow time formatting detected: ${duration.toFixed(2)}ms`);
}
}
/**
* 拦截DOM查询以统计频率
*/
interceptDOMQueries() {
if (this._originalQuerySelector) {
return; // 已经拦截过了
}
// 保存原始方法
this._originalQuerySelector = document.querySelector;
this._originalQuerySelectorAll = document.querySelectorAll;
this._originalGetElementById = document.getElementById;
const monitor = this;
// 拦截 querySelector
document.querySelector = function(selector) {
monitor.metrics.domQueries++;
if (monitor.metrics.domQueries % 50 === 0) {
console.log(`🔍 DOM Query #${monitor.metrics.domQueries}: querySelector("${selector}")`);
}
return monitor._originalQuerySelector.call(this, selector);
};
// 拦截 querySelectorAll
document.querySelectorAll = function(selector) {
monitor.metrics.domQueries++;
if (monitor.metrics.domQueries % 50 === 0) {
console.log(`🔍 DOM Query #${monitor.metrics.domQueries}: querySelectorAll("${selector}")`);
}
return monitor._originalQuerySelectorAll.call(this, selector);
};
// 拦截 getElementById
document.getElementById = function(id) {
monitor.metrics.domQueries++;
if (monitor.metrics.domQueries % 50 === 0) {
console.log(`🔍 DOM Query #${monitor.metrics.domQueries}: getElementById("${id}")`);
}
return monitor._originalGetElementById.call(this, id);
};
}
/**
* 恢复DOM查询方法
*/
restoreDOMQueries() {
if (this._originalQuerySelector) {
document.querySelector = this._originalQuerySelector;
document.querySelectorAll = this._originalQuerySelectorAll;
document.getElementById = this._originalGetElementById;
this._originalQuerySelector = null;
this._originalQuerySelectorAll = null;
this._originalGetElementById = null;
}
}
/**
* 生成性能报告
*/
generateReport() {
const report = {
duration: (Date.now() - this.metrics.lastCheck) / 1000,
intervals: this.metrics.intervalCount,
domQueries: this.metrics.domQueries,
formatOps: this.metrics.formatOperations,
avgMemoryMB: this.getAverageMemory(),
maxMemoryMB: this.getMaxMemory(),
recommendations: this.getRecommendations()
};
console.log('📊 Clock Performance Report:');
console.table(report);
return report;
}
/**
* 获取平均内存使用
*/
getAverageMemory() {
if (this.metrics.memoryUsage.length === 0) return0;
const total = this.metrics.memoryUsage.reduce((sum, record) => sum + record.usedMB, 0);
return Math.round(total / this.metrics.memoryUsage.length);
}
/**
* 获取最大内存使用
*/
getMaxMemory() {
if (this.metrics.memoryUsage.length === 0) return0;
return Math.max(...this.metrics.memoryUsage.map(record => record.usedMB));
}
/**
* 获取性能建议
*/
getRecommendations() {
const recommendations = [];
if (this.metrics.intervalCount > 2) {
recommendations.push('减少定时器数量，使用统一时间管理器');
}
if (this.metrics.domQueries > 100) {
recommendations.push('减少DOM查询，使用元素缓存');
}
const avgMemory = this.getAverageMemory();
if (avgMemory > 50) {
recommendations.push('优化内存使用，检查是否有内存泄漏');
}
if (recommendations.length === 0) {
recommendations.push('性能表现良好');
}
return recommendations;
}
/**
* 获取当前指标快照
*/
getMetricsSnapshot() {
return {
...this.metrics,
timestamp: Date.now()
};
}
}
// 创建全局性能监控器实例
if (!window.clockPerformanceMonitor) {
window.clockPerformanceMonitor = new ClockPerformanceMonitor();
}
// 提供便捷函数
window.startClockMonitoring = () => window.clockPerformanceMonitor.startMonitoring();
window.stopClockMonitoring = () => window.clockPerformanceMonitor.stopMonitoring();
window.getClockMetrics = () => window.clockPerformanceMonitor.getMetricsSnapshot();
// 在开发环境自动启动监控
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
setTimeout(() => {
console.log('🔧 Development environment detected, starting clock monitoring...');
window.startClockMonitoring();
// 30秒后生成报告
setTimeout(() => {
window.stopClockMonitoring();
}, 30000);
}, 2000);
}
console.log('⏱️ Clock Performance Monitor loaded');
发表回复