货铺头商品详情页前端性能优化实战

📦 批量下单

支持多规格批量采购，一键生成订单

供应商客服

在线

{
const price = prompt('请输入您的报价价格:');
if (price && !isNaN(parseFloat(price))) {
handleSendOffer({
type: 'price',
originalValue: 0,
proposedValue: parseFloat(price),
unit: '元',
validUntil: new Date(Date.now() + 24 60 60 * 1000)
});
}
}}>
💰 发起报价

  {/* 消息列表 */}
  <div className="messages-container" ref={chatContainerRef}>
    {messages.map((message) => {
      const isMe = message.senderId === currentUser.id;

      return (
        <div 
          key={message.id} 
          className={`message ${isMe ? 'me' : 'them'} ${message.type}`}
        >
          <div className="message-avatar">
            {isMe ? (
              <img src={currentUser.avatar} alt="我的头像" />
            ) : (
              <img src="/default-avatar.png" alt="供应商头像" />
            )}
          </div>

          <div className="message-content">
            <div className="message-bubble">
              {message.type === 'offer' ? (
                renderOfferContent(message)
              ) : (
                <p>{message.content}</p>
              )}
            </div>
            <span className="message-time">
              {formatTime(message.timestamp)}
              {message.status === 'read' && <span className="read-status">✓✓</span>}
            </span>
          </div>
        </div>
      );
    })}

    {isTyping && (
      <div className="typing-indicator">
        <span></span>
        <span></span>
        <span></span>
      </div>
    )}

    <div ref={messagesEndRef} />
  </div>

  {/* 输入区域 */}
  <div className="chat-input-area">
    <div className="input-tools">
      <button className="tool-btn" title="发送图片">
        📷
      </button>
      <button className="tool-btn" title="发送文件">
        📎
      </button>
    </div>

    <textarea
      value={inputText}
      onChange={handleInputChange}
      onKeyDown={handleKeyDown}
      placeholder="输入消息... (Enter发送, Shift+Enter换行)"
      rows={1}
      className="message-input"
    />

    <button 
      className="send-btn"
      onClick={handleSendMessage}
      disabled={!inputText.trim()}
    >
      发送
    </button>
  </div>
</div>

);
});

// 辅助函数
function getOfferTypeName(type: string): string {
const names: Record = {
price: '价格',
quantity: '数量',
delivery: '交付',
custom: '自定义'
};
return names[type] || type;
}

六、性能监控与分析

6.1 移动端性能监控

// 货铺头移动端性能监控器
class MobilePerformanceMonitor {
private metrics: MobilePerformanceMetrics = {
firstPaint: 0,
firstContentfulPaint: 0,
largestContentfulPaint: 0,
firstInputDelay: 0,
cumulativeLayoutShift: 0,
interactionToNextPaint: 0,
mobileSpecificMetrics: {
appLaunchTime: 0,
scrollPerformance: [],
touchResponseTime: [],
imageLoadTime: [],
memoryUsage: [],
batteryImpact: 0
}
};

private observers: PerformanceObserver[] = [];
private isMonitoring = false;
封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
// 启动监控
startMonitoring(): void {
if (this.isMonitoring) return;
this.isMonitoring = true;

this.setupCoreWebVitalsObservers();
this.setupMobileSpecificObservers();
this.setupResourceObservers();
this.setupLongTaskObserver();

}

// 设置核心Web指标观察器
private setupCoreWebVitalsObservers(): void {
// LCP
this.observers.push(
new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1] as any;
this.metrics.largestContentfulPaint = lastEntry.startTime;
this.reportMetric('LCP', lastEntry.startTime);
})
).observe({ type: 'largest-contentful-paint', buffered: true });

// FID
this.observers.push(
  new PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach((entry: any) => {
      this.metrics.firstInputDelay = entry.processingStart - entry.startTime;
      this.reportMetric('FID', this.metrics.firstInputDelay);
    });
  })
).observe({ type: 'first-input', buffered: true });

// CLS
this.observers.push(
  new PerformanceObserver((list) => {
    let clsValue = 0;
    list.getEntries().forEach((entry: any) => {
      if (!entry.hadRecentInput) {
        clsValue += entry.value;
      }
    });
    this.metrics.cumulativeLayoutShift = clsValue;
    this.reportMetric('CLS', clsValue);
  })
).observe({ type: 'layout-shift', buffered: true });

// INP
this.observers.push(
  new PerformanceObserver((list) => {
    const entries = list.getEntries();
    entries.forEach((entry: any) => {
      this.metrics.interactionToNextPaint = entry.processingEnd - entry.startTime;
      this.reportMetric('INP', this.metrics.interactionToNextPaint);
    });
  })
).observe({ type: 'event', buffered: true });

}

// 设置移动端特定指标观察器
private setupMobileSpecificObservers(): void {
// 内存使用监控
if ('memory' in performance) {
setInterval(() => {
const memory = (performance as any).memory;
const memoryUsage = {
used: memory.usedJSHeapSize,
total: memory.totalJSHeapSize,
limit: memory.jsHeapSizeLimit,
timestamp: Date.now()
};

    this.metrics.mobileSpecificMetrics.memoryUsage.push(memoryUsage);

    // 保持最近100条记录
    if (this.metrics.mobileSpecificMetrics.memoryUsage.length > 100) {
      this.metrics.mobileSpecificMetrics.memoryUsage.shift();
    }

    // 内存警告
    const usagePercent = memory.usedJSHeapSize / memory.jsHeapSizeLimit;
    if (usagePercent > 0.8) {
      this.reportWarning('High memory usage detected', usagePercent);
    }
  }, 10000); // 每10秒检查一次
}

// 电池影响监控
if ('getBattery' in navigator) {
  (navigator as any).getBattery().then((battery: any) => {
    const updateBatteryInfo = () => {
      this.metrics.mobileSpecificMetrics.batteryImpact = {
        level: battery.level,
        charging: battery.charging,
        chargingTime: battery.chargingTime,
        dischargingTime: battery.dischargingTime
      };

      // 低电量警告
      if (battery.level < 0.2 && !battery.charging) {
        this.reportWarning('Low battery detected', battery.level);
      }
    };

    updateBatteryInfo();
    battery.addEventListener('levelchange', updateBatteryInfo);
    battery.addEventListener('chargingchange', updateBatteryInfo);
  });
}

// 滚动性能监控
let scrollStartTime = 0;
let scrollFrameCount = 0;

const handleScrollStart = () => {
  scrollStartTime = performance.now();
  scrollFrameCount = 0;
};

const handleScrollEnd = () => {
  const scrollDuration = performance.now() - scrollStartTime;
  const fps = scrollFrameCount / (scrollDuration / 1000);
  封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
  this.metrics.mobileSpecificMetrics.scrollPerformance.push({
    duration: scrollDuration,
    fps,
    timestamp: Date.now()
  });

  // 保持最近50条记录
  if (this.metrics.mobileSpecificMetrics.scrollPerformance.length > 50) {
    this.metrics.mobileSpecificMetrics.scrollPerformance.shift();
  }

  // FPS警告
  if (fps < 30) {
    this.reportWarning('Low scroll FPS detected', fps);
  }
};

let scrollTimeout: NodeJS.Timeout;

window.addEventListener('scroll', () => {
  scrollFrameCount++;

  if (!scrollStartTime) {
    handleScrollStart();
  }

  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(handleScrollEnd, 150);
}, { passive: true });

// 触摸响应时间监控
let touchStartTime = 0;

document.addEventListener('touchstart', () => {
  touchStartTime = performance.now();
}, { passive: true });

document.addEventListener('touchend', () => {
  const touchDuration = performance.now() - touchStartTime;

  this.metrics.mobileSpecificMetrics.touchResponseTime.push({
    duration: touchDuration,
    timestamp: Date.now()
  });

  // 保持最近100条记录
  if (this.metrics.mobileSpecificMetrics.touchResponseTime.length > 100) {
    this.metrics.mobileSpecificMetrics.touchResponseTime.shift();
  }

  // 响应时间警告
  if (touchDuration > 100) {
    this.reportWarning('Slow touch response detected', touchDuration);
  }
}, { passive: true });

}

// 设置资源加载观察器
private setupResourceObservers(): void {
this.observers.push(
new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.name.match(/.(jpg|jpeg|png|webp|avif|gif)/i)) {
const loadTime = entry.duration;
this.metrics.mobileSpecificMetrics.imageLoadTime.push({
url: entry.name,
loadTime,
size: (entry as any).transferSize || 0,
timestamp: Date.now()
});

        // 保持最近200条记录
        if (this.metrics.mobileSpecificMetrics.imageLoadTime.length > 200) {
          this.metrics.mobileSpecificMetrics.imageLoadTime.shift();
        }

        // 慢图片加载警告
        if (loadTime > 2000) {
          this.reportWarning('Slow image load detected', { url: entry.name, loadTime });
        }
      }
    });
  })
).observe({ type: 'resource', buffered: true });

}

// 设置长任务观察器
private setupLongTaskObserver(): void {
this.observers.push(
new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
this.reportWarning('Long task detected', {
duration: entry.duration,
startTime: entry.startTime,
name: entry.name
});
});
})
).observe({ type: 'longtask', buffered: true });
}

// 报告指标
private reportMetric(name: string, value: number): void {
// 发送到分析服务
const payload = {
metric: name,
value,
timestamp: Date.now(),
url: window.location.href,
userAgent: navigator.userAgent,
connectionType: (navigator as any).connection?.effectiveType || 'unknown',
devicePixelRatio: window.devicePixelRatio || 1,
viewportWidth: window.innerWidth,
viewportHeight: window.innerHeight
};

// 使用sendBeacon发送（不会阻塞页面）
if (navigator.sendBeacon) {
  navigator.sendBeacon(
    'https://analytics.huoputou.com/metrics',
    JSON.stringify(payload)
  );
}

}

// 报告警告
private reportWarning(warning: string, details: any): void {
console.warn([MobilePerf] ${warning}:, details);

const payload = {
  warning,
  details,
  timestamp: Date.now(),
  url: window.location.href
};

if (navigator.sendBeacon) {
  navigator.sendBeacon(
    'https://analytics.huoputou.com/warnings',
    JSON.stringify(payload)
  );
}

}

// 获取当前指标快照
getMetricsSnapshot(): MobilePerformanceMetrics {
return { ...this.metrics };
}

// 停止监控
stopMonitoring(): void {
this.observers.forEach(observer => observer.disconnect());
this.observers = [];
this.isMonitoring = false;
}

// 生成性能报告
generateReport(): PerformanceReport {
const snapshot = this.getMetricsSnapshot();

return {
  summary: {
    lcp: snapshot.largestContentfulPaint,
    fid: snapshot.firstInputDelay,
    cls: snapshot.cumulativeLayoutShift,
    inp: snapshot.interactionToNextPaint
  },
  mobileMetrics: {
    avgScrollFPS: this.calculateAvgScrollFPS(snapshot.mobileSpecificMetrics.scrollPerformance),
    avgTouchResponse: this.calculateAvgTouchResponse(snapshot.mobileSpecificMetrics.touchResponseTime),
    avgImageLoadTime: this.calculateAvgImageLoadTime(snapshot.mobileSpecificMetrics.imageLoadTime),
    memoryTrend: this.analyzeMemoryTrend(snapshot.mobileSpecificMetrics.memoryUsage),
    batteryImpact: snapshot.mobileSpecificMetrics.batteryImpact
  },
  recommendations: this.generateRecommendations(snapshot),
  timestamp: Date.now()
};

}

private calculateAvgScrollFPS(scrollData: any[]): number {
if (scrollData.length === 0) return 0;
const totalFPS = scrollData.reduce((sum, item) => sum + item.fps, 0);
return totalFPS / scrollData.length;
}

private calculateAvgTouchResponse(touchData: any[]): number {
if (touchData.length === 0) return 0;
const totalTime = touchData.reduce((sum, item) => sum + item.duration, 0);
return totalTime / touchData.length;
}

private calculateAvgImageLoadTime(imageData: any[]): number {
if (imageData.length === 0) return 0;
const totalTime = imageData.reduce((sum, item) => sum + item.loadTime, 0);
return totalTime / imageData.length;
}

private analyzeMemoryTrend(memoryData: any[]): MemoryTrend {
if (memoryData.length < 2) return { trend: 'stable', changePercent: 0 };

const first = memoryData[0];
const last = memoryData[memoryData.length - 1];

const changePercent = ((last.used - first.used) / first.used) * 100;

let trend: 'increasing' | 'decreasing' | 'stable' = 'stable';
if (changePercent > 10) trend = 'increasing';
else if (changePercent < -10) trend = 'decreasing';

return { trend, changePercent };

}

private generateRecommendations(metrics: MobilePerformanceMetrics): string[] {
const recommendations: string[] = [];

// LCP建议
if (metrics.largestContentfulPaint > 2500) {
  recommendations.push('优化首屏图片加载，考虑使用更小的图片或更好的CDN');
}

// FID建议
if (metrics.firstInputDelay > 100) {
  recommendations.push('减少主线程阻塞，考虑代码分割或延迟加载非关键JavaScript');
}

// CLS建议
if (metrics.cumulativeLayoutShift > 0.1) {
  recommendations.push('为图片和广告预留空间，避免动态插入内容导致布局偏移');
}

// 滚动性能建议
const avgScrollFPS = this.calculateAvgScrollFPS(metrics.mobileSpecificMetrics.scrollPerformance);
if (avgScrollFPS < 50) {
  recommendations.push('优化滚动性能，避免滚动时触发重排和重绘');
}

// 内存建议
const memoryTrend = this.analyzeMemoryTrend(metrics.mobileSpecificMetrics.memoryUsage);
if (memoryTrend.trend === 'increasing' && memoryTrend.changePercent > 20) {
  recommendations.push('检测到内存泄漏，请检查事件监听器清理和闭包使用');
}

return recommendations;

}
}

// 类型定义
interface MobilePerformanceMetrics {
firstPaint: number;
firstContentfulPaint: number;
largestContentfulPaint: number;
firstInputDelay: number;
cumulativeLayoutShift: number;
interactionToNextPaint: number;
mobileSpecificMetrics: {
appLaunchTime: number;
scrollPerformance: ScrollPerformanceData[];
touchResponseTime: TouchResponseData[];
imageLoadTime: ImageLoadData[];
memoryUsage: MemoryUsageData[];
batteryImpact: BatteryData;
};
}

interface ScrollPerformanceData {
duration: number;
fps: number;
timestamp: number;
}

interface TouchResponseData {
duration: number;
timestamp: number;
}

interface ImageLoadData {
url: string;
loadTime: number;
size: number;
timestamp: number;
}

interface MemoryUsageData {
used: number;
total: number;
limit: number;
timestamp: number;
}

interface BatteryData {
level: number;
charging: boolean;
chargingTime: number;
dischargingTime: number;
}

interface MemoryTrend {
trend: 'increasing' | 'decreasing' | 'stable';
changePercent: number;
}

interface PerformanceReport {
summary: {
lcp: number;
fid: number;
cls: number;
inp: number;
};
mobileMetrics: {
avgScrollFPS: number;
avgTouchResponse: number;
avgImageLoadTime: number;
memoryTrend: MemoryTrend;
batteryImpact: BatteryData;
};
recommendations: string[];
timestamp: number;
}

6.2 性能仪表板组件

// 货铺头性能监控仪表板
const MobilePerformanceDashboard = () => {
const [metrics, setMetrics] = useState(null);
const [isMonitoring, setIsMonitoring] = useState(false);
const monitorRef = useRef(null);

useEffect(() => {
monitorRef.current = new MobilePerformanceMonitor();

return () => {
  monitorRef.current?.stopMonitoring();
};

}, []);

const startMonitoring = useCallback(() => {
monitorRef.current?.startMonitoring();
setIsMonitoring(true);

// 定期更新报告
const interval = setInterval(() => {
  const report = monitorRef.current?.generateReport();
  if (report) {
    setMetrics(report);
  }
}, 5000);

return () => clearInterval(interval);

}, []);

const stopMonitoring = useCallback(() => {
monitorRef.current?.stopMonitoring();
setIsMonitoring(false);
}, []);

const getScoreColor = (value: number, thresholds: { good: number; bad: number }) => {
if (value <= thresholds.good) return '#22c55e';
if (value <= thresholds.bad) return '#f59e0b';
return '#ef4444';
};
封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
const getCLSScore = (cls: number) => {
if (cls <= 0.1) return { score: '优秀', color: '#22c55e' };
if (cls <= 0.25) return { score: '良好', color: '#f59e0b' };
return { score: '需改进', color: '#ef4444' };
};

return (

  {metrics && (
    <>
      {/* 核心Web指标 */}
      <div className="core-metrics">
        <h3>核心Web指标</h3>
        <div className="metrics-grid">
          <MetricCard
            label="LCP"
            value={`${(metrics.summary.lcp / 1000).toFixed(2)}s`}
            target="< 2.5s"
            score={metrics.summary.lcp <= 2500 ? 'good' : metrics.summary.lcp <= 4000 ? 'needs-improvement' : 'poor'}
            icon="🚀"
          />
          <MetricCard
            label="FID"
            value={`${metrics.summary.fid.toFixed(0)}ms`}
            target="< 100ms"
            score={metrics.summary.fid <= 100 ? 'good' : metrics.summary.fid <= 300 ? 'needs-improvement' : 'poor'}
            icon="👆"
          />
          <MetricCard
            label="CLS"
            value={metrics.summary.cls.toFixed(3)}
            target="< 0.1"
            score={metrics.summary.cls <= 0.1 ? 'good' : metrics.summary.cls <= 0.25 ? 'needs-improvement' : 'poor'}
            icon="📐"
          />
          <MetricCard
            label="INP"
            value={`${metrics.summary.inp.toFixed(0)}ms`}
            target="< 200ms"
            score={metrics.summary.inp <= 200 ? 'good' : metrics.summary.inp <= 500 ? 'needs-improvement' : 'poor'}
            icon="⚡"
          />
        </div>
      </div>

      {/* 移动端特定指标 */}
      <div className="mobile-specific-metrics">
        <h3>移动端特定指标</h3>
        <div className="metrics-grid">
          <MetricCard
            label="平均滚动FPS"
            value={`${metrics.mobileMetrics.avgScrollFPS.toFixed(1)}`}
            target="> 55"
            score={metrics.mobileMetrics.avgScrollFPS >= 55 ? 'good' : metrics.mobileMetrics.avgScrollFPS >= 30 ? 'needs-improvement' : 'poor'}
            icon="📜"
          />
          <MetricCard
            label="触摸响应时间"
            value={`${metrics.mobileMetrics.avgTouchResponse.toFixed(0)}ms`}
            target="< 100ms"
            score={metrics.mobileMetrics.avgTouchResponse <= 100 ? 'good' : metrics.mobileMetrics.avgTouchResponse <= 200 ? 'needs-improvement' : 'poor'}
            icon="👆"
          />
          <MetricCard
            label="图片平均加载"
            value={`${metrics.mobileMetrics.avgImageLoadTime.toFixed(0)}ms`}
            target="< 1000ms"
            score={metrics.mobileMetrics.avgImageLoadTime <= 1000 ? 'good' : metrics.mobileMetrics.avgImageLoadTime <= 3000 ? 'needs-improvement' : 'poor'}
            icon="🖼️"
          />
          <MetricCard
            label="内存趋势"
            value={metrics.mobileMetrics.memoryTrend.trend}
            target="稳定"
            score={metrics.mobileMetrics.memoryTrend.trend === 'stable' ? 'good' : metrics.mobileMetrics.memoryTrend.trend === 'decreasing' ? 'needs-improvement' : 'poor'}
            icon="💾"
          />
        </div>
      </div>

      {/* 电池影响 */}
      <div className="battery-impact">
        <h3>🔋 电池影响</h3>
        <div className="battery-info">
          <div className="battery-level">
            <span className="label">电量</span>
            <div className="level-bar">
              <div 
                className="level-fill"
                style={
            { width: `${metrics.mobileMetrics.batteryImpact.level * 100}%` }}
              />
            </div>
            <span className="value">{Math.round(metrics.mobileMetrics.batteryImpact.level * 100)}%</span>
          </div>
          <div className="charging-status">
            <span className="label">充电状态</span>
            <span className={`value ${metrics.mobileMetrics.batteryImpact.charging ? 'charging' : 'not-charging'}`}>
              {metrics.mobileMetrics.batteryImpact.charging ? '充电中' : '未充电'}
            </span>
          </div>
        </div>
      </div>

      {/* 优化建议 */}
      <div className="recommendations">
        <h3>💡 优化建议</h3>
        {metrics.recommendations.length > 0 ? (
          <ul>
            {metrics.recommendations.map((rec, index) => (
              <li key={index}>{rec}</li>
            ))}
          </ul>
        ) : (
          <p className="no-recommendations">🎉 当前性能表现良好，无需特别优化</p>
        )}
      </div>

      {/* 实时监控图表 */}
      <div className="realtime-charts">
        <h3>📈 实时性能趋势</h3>
        <div className="chart-placeholder">
          <p>图表组件将在这里显示实时性能数据</p>
        </div>
      </div>
    </>
  )}
</div>