// 性能优化工具 - 提升小程序性能和用户体验 class PerformanceOptimizer { constructor() { this.imageCache = new Map(); this.requestCache = new Map(); this.lazyLoadObserver = null; this.performanceMetrics = { pageLoadTimes: [], apiResponseTimes: [], imageLoadTimes: [] }; } // 🔥 ===== 图片优化 ===== // 图片懒加载 initLazyLoad() { // 创建懒加载观察器 this.lazyLoadObserver = wx.createIntersectionObserver(); this.lazyLoadObserver.observe('.lazy-image', (res) => { if (res.intersectionRatio > 0) { // 图片进入视口,开始加载 const dataset = res.dataset; if (dataset && dataset.src) { this.loadImage(dataset.src, res.id); } } }); } // 优化图片加载 async loadImage(src, elementId) { try { const startTime = Date.now(); // 检查缓存 if (this.imageCache.has(src)) { const cachedImage = this.imageCache.get(src); this.updateImageElement(elementId, cachedImage); return cachedImage; } // 预加载图片 const imageInfo = await this.preloadImage(src); // 缓存图片信息 this.imageCache.set(src, imageInfo); // 更新元素 this.updateImageElement(elementId, imageInfo); // 记录性能指标 const loadTime = Date.now() - startTime; this.recordImageLoadTime(loadTime); return imageInfo; } catch (error) { console.error('图片加载失败:', error); // 使用默认图片 this.updateImageElement(elementId, { path: '/assets/images/placeholder.png' }); } } // 预加载图片 preloadImage(src) { return new Promise((resolve, reject) => { wx.getImageInfo({ src: src, success: resolve, fail: reject }); }); } // 更新图片元素 updateImageElement(elementId, imageInfo) { // 这里需要页面配合实现具体的更新逻辑 console.log('更新图片元素:', elementId, imageInfo); } // 🔥 ===== 请求优化 ===== // 请求缓存 async cacheRequest(key, requestFn, ttl = 300000) { // 默认5分钟缓存 const now = Date.now(); // 检查缓存 if (this.requestCache.has(key)) { const cached = this.requestCache.get(key); if (now - cached.timestamp < ttl) { console.log('使用缓存数据:', key); return cached.data; } } try { const startTime = Date.now(); const data = await requestFn(); const responseTime = Date.now() - startTime; // 缓存数据 this.requestCache.set(key, { data: data, timestamp: now }); // 记录性能指标 this.recordApiResponseTime(responseTime); return data; } catch (error) { console.error('请求失败:', error); throw error; } } // 清除过期缓存 clearExpiredCache() { const now = Date.now(); const maxAge = 600000; // 10分钟 for (const [key, value] of this.requestCache.entries()) { if (now - value.timestamp > maxAge) { this.requestCache.delete(key); } } } // 🔥 ===== 内存优化 ===== // 清理内存 cleanupMemory() { // 清理图片缓存 if (this.imageCache.size > 50) { const entries = Array.from(this.imageCache.entries()); const toDelete = entries.slice(0, entries.length - 30); toDelete.forEach(([key]) => { this.imageCache.delete(key); }); } // 清理请求缓存 this.clearExpiredCache(); // 触发垃圾回收(如果可用) if (wx.triggerGC) { wx.triggerGC(); } } // 监控内存使用 monitorMemory() { if (wx.getPerformance) { const performance = wx.getPerformance(); const memory = performance.memory; if (memory) { console.log('内存使用情况:', { used: this.formatBytes(memory.usedJSHeapSize), total: this.formatBytes(memory.totalJSHeapSize), limit: this.formatBytes(memory.jsHeapSizeLimit) }); // 如果内存使用超过80%,触发清理 if (memory.usedJSHeapSize / memory.jsHeapSizeLimit > 0.8) { console.warn('内存使用过高,开始清理'); this.cleanupMemory(); } } } } // 🔥 ===== 性能监控 ===== // 记录页面加载时间 recordPageLoadTime(loadTime) { this.performanceMetrics.pageLoadTimes.push(loadTime); // 只保留最近100条记录 if (this.performanceMetrics.pageLoadTimes.length > 100) { this.performanceMetrics.pageLoadTimes.shift(); } } // 记录API响应时间 recordApiResponseTime(responseTime) { this.performanceMetrics.apiResponseTimes.push(responseTime); if (this.performanceMetrics.apiResponseTimes.length > 100) { this.performanceMetrics.apiResponseTimes.shift(); } } // 记录图片加载时间 recordImageLoadTime(loadTime) { this.performanceMetrics.imageLoadTimes.push(loadTime); if (this.performanceMetrics.imageLoadTimes.length > 100) { this.performanceMetrics.imageLoadTimes.shift(); } } // 获取性能报告 getPerformanceReport() { const report = { pageLoad: this.calculateStats(this.performanceMetrics.pageLoadTimes), apiResponse: this.calculateStats(this.performanceMetrics.apiResponseTimes), imageLoad: this.calculateStats(this.performanceMetrics.imageLoadTimes), cacheStats: { imageCache: this.imageCache.size, requestCache: this.requestCache.size } }; console.log('性能报告:', report); return report; } // 计算统计数据 calculateStats(times) { if (times.length === 0) { return { avg: 0, min: 0, max: 0, count: 0 }; } const sum = times.reduce((a, b) => a + b, 0); const avg = sum / times.length; const min = Math.min(...times); const max = Math.max(...times); return { avg: Math.round(avg), min: min, max: max, count: times.length }; } // 🔥 ===== 工具方法 ===== // 格式化字节数 formatBytes(bytes) { if (bytes === 0) return '0 B'; const k = 1024; const sizes = ['B', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; } // 防抖函数 debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // 节流函数 throttle(func, limit) { let inThrottle; return function executedFunction(...args) { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; } // 🔥 ===== 初始化和清理 ===== // 初始化性能优化 init() { console.log('初始化性能优化器'); // 初始化懒加载 this.initLazyLoad(); // 定期清理内存 setInterval(() => { this.cleanupMemory(); }, 300000); // 5分钟清理一次 // 定期监控内存 setInterval(() => { this.monitorMemory(); }, 60000); // 1分钟监控一次 } // 销毁优化器 destroy() { console.log('销毁性能优化器'); // 清理懒加载观察器 if (this.lazyLoadObserver) { this.lazyLoadObserver.disconnect(); this.lazyLoadObserver = null; } // 清理缓存 this.imageCache.clear(); this.requestCache.clear(); // 清理性能指标 this.performanceMetrics = { pageLoadTimes: [], apiResponseTimes: [], imageLoadTimes: [] }; } } // 创建全局单例 const performanceOptimizer = new PerformanceOptimizer(); module.exports = performanceOptimizer;