衣联网商品详情页前端性能优化实战

一、背景与挑战

• 图片资源密集：服装类商品需要多角度展示，单商品平均15-30张高清图片

• SKU组合复杂：颜色、尺码、款式等多维度组合，可能产生上百种SKU变体

• 季节性波动明显：换季时期流量激增10倍以上，服务器压力巨大

• 批发业务逻辑复杂：起订量、阶梯价格、混批规则等需要实时计算

• 移动端采购商为主：超过80%用户通过手机下单，网络环境复杂多变

• 图片版权保护：需要对商品图片进行水印、防盗链等技术处理

二、性能瓶颈分析

2.1 图片加载瓶颈

┌─────────────────────────────────────────────────────────────┐
│                    图片性能分析                              │
├─────────────────────────────────────────────────────────────┤
│  问题1: 图片体积过大                                           │
│  ├── 单张商品图平均2.5MB（4000×5000像素）                      │
│  ├── 未使用WebP/AVIF等现代格式                                │
│  ├── 所有角度图片首屏同时加载                                  │
│  └── 移动端带宽浪费严重，首屏加载时间>4s                        │
│                                                             │
│  问题2: 图片加载策略不当                                       │
│  ├── 未实现真正的懒加载，首屏加载20+张图                        │
│  ├── 缩略图和大图没有分级加载                                  │
│  ├── 图片预加载时机不合理                                      │
│  └── 失败重试机制缺失                                          │
│                                                             │
│  问题3: 图片处理服务性能差                                     │
│  ├── 实时生成缩略图，CPU消耗高                                 │
│  ├── 水印处理同步进行，阻塞主线程                              │
│  └── CDN回源慢，边缘节点覆盖不足                                │
└─────────────────────────────────────────────────────────────┘

2.2 SKU与价格计算瓶颈

┌─────────────────────────────────────────────────────────────┐
│                    SKU计算性能分析                            │
├─────────────────────────────────────────────────────────────┤
│  问题1: 组合爆炸问题                                           │
│  ├── 颜色(8种) × 尺码(12个) × 款式(5种) = 480种组合            │
│  ├── 每个组合需要独立计算价格和库存                              │
│  ├── 未做计算缓存，每次选择都重新计算                            │
│  └── 页面交互卡顿，选择延迟>500ms                               │
│                                                             │
│  问题2: 阶梯价格计算复杂                                       │
│  ├── 批发规则：100件9折，500件8折，1000件7折                   │
│  ├── 混批规则：不同款式按比例享受折扣                            │
│  ├── 实时库存校验                                              │
│  └── JavaScript计算密集，主线程阻塞                             │
│                                                             │
│  问题3: DOM更新频繁                                            │
│  ├── SKU选择触发大量DOM操作                                    │
│  ├── 价格、库存、按钮状态同时更新                               │
│  ├── 缺乏批量更新机制                                          │
│  └── 页面闪烁严重                                               │
└─────────────────────────────────────────────────────────────┘

2.3 业务逻辑性能瓶颈

┌─────────────────────────────────────────────────────────────┐
│                    业务逻辑分析                               │
├─────────────────────────────────────────────────────────────┤
│  问题1: API调用过多                                           │
│  ├── 商品基本信息：1次                                         │
│  ├── SKU库存价格：1次                                          │
│  ├── 运费计算：1次                                             │
│  ├── 店铺信息：1次                                             │
│  ├── 推荐商品：1次                                             │
│  ├── 评价统计：1次                                             │
│  └── 串行调用总耗时>2s                                         │
│                                                             │
│  问题2: 实时性要求过高                                         │
│  ├── 库存变化需要实时反映                                      │
│  ├── 价格变动立即生效                                          │
│  ├── 频繁的WebSocket推送                                      │
│  └── 前端状态同步开销大                                        │
│                                                             │
│  问题3: 季节性缓存失效                                         │
│  ├── 换季时大量商品上新，缓存击穿                               │
│  ├── 热门商品缓存雪崩                                          │
│  ├── 数据库压力过大                                            │
│  └── 用户体验急剧下降                                          │
└─────────────────────────────────────────────────────────────┘

三、优化方案实施

3.1 图片性能优化

3.1.1 智能图片加载系统

// 服装图片智能加载管理器
class FashionImageLoader {
  constructor(options = {}) {
    this.options = {
      thumbnailQuality: 60,
      fullQuality: 85,
      formats: ['webp', 'jpg'],
      lazyLoadThreshold: 200,
      maxConcurrentLoads: 4,
      retryAttempts: 3,
      ...options
    };
    
    this.loadingQueue = [];
    this.activeLoads = 0;
    this.imageCache = new LRUCache({ max: 100 });
    this.observer = null;
  }

  // 初始化Intersection Observer
  initLazyLoading() {
    this.observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const imageData = entry.target.dataset.imageData;
            if (imageData) {
              this.loadImage(JSON.parse(imageData));
              this.observer.unobserve(entry.target);
            }
          }
        });
      },
      { 
        rootMargin: `${this.options.lazyLoadThreshold}px`,
        threshold: 0.1 
      }
    );
  }

  // 生成图片URL（支持多种格式和质量）
  generateImageUrls(baseUrl, sizes = ['thumbnail', 'medium', 'large']) {
    const urls = {};
    
    sizes.forEach(size => {
      const dimensions = this.getDimensions(size);
      urls[size] = {
        webp: `${baseUrl}_${dimensions.width}x${dimensions.height}_q${this.options.thumbnailQuality}.webp`,
        jpg: `${baseUrl}_${dimensions.width}x${dimensions.height}_q${this.options.fullQuality}.jpg`
      };
    });
    
    return urls;
  }

  getDimensions(size) {
    const dimensionMap = {
      thumbnail: { width: 200, height: 250 },
      medium: { width: 400, height: 500 },
      large: { width: 800, height: 1000 },
      original: { width: 2000, height: 2500 }
    };
    return dimensionMap[size] || dimensionMap.medium;
  }

  // 渐进式图片加载
  async loadImage(imageConfig, priority = 'normal') {
    const cacheKey = `${imageConfig.baseUrl}_${imageConfig.size}`;
    
    // 检查缓存
    if (this.imageCache.has(cacheKey)) {
      return this.imageCache.get(cacheKey);
    }

    // 加入队列
    return new Promise((resolve, reject) => {
      this.loadingQueue.push({
        config: imageConfig,
        priority,
        resolve,
        reject
      });

      // 按优先级排序
      this.loadingQueue.sort((a, b) => 
        a.priority === 'high' ? -1 : b.priority === 'high' ? 1 : 0
      );

      this.processQueue();
    });
  }

  async processQueue() {
    while (
      this.loadingQueue.length > 0 && 
      this.activeLoads < this.options.maxConcurrentLoads
    ) {
      const item = this.loadingQueue.shift();
      this.activeLoads++;

      try {
        const result = await this.fetchImage(item.config);
        this.imageCache.set(cacheKey, result);
        item.resolve(result);
      } catch (error) {
        item.reject(error);
      } finally {
        this.activeLoads--;
        this.processQueue();
      }
    }
  }

  async fetchImage(config) {
    const { baseUrl, size, preferredFormat = 'webp' } = config;
    const urls = this.generateImageUrls(baseUrl, [size]);
    const url = urls[size][preferredFormat];

    // 创建图片元素进行加载
    return new Promise((resolve, reject) => {
      const img = new Image();
      
      img.onload = () => {
        resolve({
          element: img,
          url,
          format: preferredFormat,
          size,
          naturalWidth: img.naturalWidth,
          naturalHeight: img.naturalHeight
        });
      };

      img.onerror = async () => {
        // 尝试备用格式
        if (preferredFormat === 'webp') {
          const fallbackUrl = urls[size]['jpg'];
          img.src = fallbackUrl;
        } else {
          reject(new Error(`Failed to load image: ${url}`));
        }
      };

      img.src = url;
    });
  }

  // 预加载关键图片
  preloadCriticalImages(product) {
    const criticalImages = [
      product.mainImage,
      ...product.gallery.slice(0, 3) // 预加载前3张图
    ];

    criticalImages.forEach((img, index) => {
      this.loadImage(
        { baseUrl: img, size: 'medium', priority: index === 0 ? 'high' : 'normal' },
        index === 0 ? 'high' : 'normal'
      );
    });
  }

  // 图片占位符和水印处理
  createPlaceholder(width, height, color = '#f5f5f5') {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // 绘制渐变占位符
    const gradient = ctx.createLinearGradient(0, 0, width, height);
    gradient.addColorStop(0, color);
    gradient.addColorStop(1, this.adjustColor(color, -10));
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);
    
    // 添加加载动画
    ctx.strokeStyle = this.adjustColor(color, 20);
    ctx.lineWidth = 2;
    ctx.setLineDash([5, 5]);
    ctx.strokeRect(10, 10, width - 20, height - 20);
    
    return canvas.toDataURL();
  }

  adjustColor(color, amount) {
    const hex = color.replace('#', '');
    const num = parseInt(hex, 16);
    const r = Math.min(255, Math.max(0, (num >> 16) + amount));
    const g = Math.min(255, Math.max(0, ((num >> 8) & 0x00FF) + amount));
    const b = Math.min(255, Math.max(0, (num & 0x0000FF) + amount));
    return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
  }
}

// 使用示例
const imageLoader = new FashionImageLoader();

// 初始化懒加载
imageLoader.initLazyLoading();

// 绑定到图片容器
document.querySelectorAll('.product-gallery-item').forEach(item => {
  const imageData = {
    baseUrl: item.dataset.imageUrl,
    size: item.dataset.size || 'medium'
  };
  item.dataset.imageData = JSON.stringify(imageData);
  imageLoader.observer.observe(item);
});

3.1.2 CDN与图片处理优化

// 图片CDN智能路由与处理
class ImageCDNOptimizer {
  constructor() {
    this.cdnProviders = [
      { name: 'aliyun', baseUrl: 'https://img.aliyun.com', priority: 1 },
      { name: 'tencent', baseUrl: 'https://img.tencent.com', priority: 2 },
      { name: 'cloudflare', baseUrl: 'https://img.cloudflare.com', priority: 3 }
    ];
    
    this.edgeNodes = this.detectOptimalEdgeNode();
  }

  // 检测最优边缘节点
  detectOptimalEdgeNode() {
    // 基于用户地理位置和网络延迟选择最优CDN节点
    return navigator.geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        // 调用内部API获取最近的边缘节点
        return this.fetchNearestEdgeNode(latitude, longitude);
      },
      () => {
        // 降级到默认节点
        return this.cdnProviders[0];
      }
    );
  }

  // 生成优化的图片URL
  generateOptimizedUrl(originalUrl, options = {}) {
    const {
      width,
      height,
      quality = 85,
      format = 'auto', // auto, webp, avif, jpg
      watermark = false,
      crop = null
    } = options;

    // 参数验证和优化
    const validatedOptions = this.validateAndOptimizeOptions({
      width,
      height,
      quality,
      format,
      watermark,
      crop
    });

    // 构建CDN URL
    const cdnBase = this.edgeNodes.baseUrl;
    const params = new URLSearchParams({
      url: encodeURIComponent(originalUrl),
      w: validatedOptions.width,
      h: validatedOptions.height,
      q: validatedOptions.quality,
      f: validatedOptions.format,
      ...(validatedOptions.watermark && { wm: '1' }),
      ...(validatedOptions.crop && { crop: validatedOptions.crop })
    });

    return `${cdnBase}/image/process?${params.toString()}`;
  }

  validateAndOptimizeOptions(options) {
    // 宽度优化：限制最大宽度，避免浪费带宽
    if (options.width > 1200) {
      options.width = 1200;
    }
    
    // 质量优化：根据设备类型调整
    if (this.isMobileDevice()) {
      options.quality = Math.min(options.quality, 75);
    }
    
    // 格式优化：自动选择最佳格式
    if (options.format === 'auto') {
      options.format = this.getBestSupportedFormat();
    }
    
    return options;
  }

  getBestSupportedFormat() {
    // 检测浏览器支持的图片格式
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    if (ctx) {
      // 测试AVIF支持
      const avifData = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKBzgABpAQIYBwAAB9AAACABAA';
      if (canvas.toDataURL('image/avif').indexOf('data:image/avif') === 0) {
        return 'avif';
      }
      
      // 测试WebP支持
      const webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
      if (canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0) {
        return 'webp';
      }
    }
    
    return 'jpg';
  }

  isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  }
}

3.2 SKU与价格计算优化

3.2.1 智能SKU计算引擎

// 服装SKU智能计算引擎
class SkuCalculationEngine {
  constructor() {
    this.cache = new LRUCache({ max: 5000, ttl: 300000 }); // 5分钟缓存
    this.calculationQueue = [];
    this.workerPool = [];
    this.maxWorkers = navigator.hardwareConcurrency || 4;
  }

  // 初始化Web Worker池
  initWorkerPool() {
    for (let i = 0; i < this.maxWorkers; i++) {
      const worker = new Worker('/workers/sku-calculator.js');
      worker.onmessage = this.handleWorkerMessage.bind(this);
      this.workerPool.push({
        worker,
        busy: false
      });
    }
  }

  // 计算SKU价格（使用Worker避免阻塞主线程）
  async calculateSkuPrice(skuId, quantity, productRules) {
    const cacheKey = `sku_price_${skuId}_${quantity}_${productRules.version}`;
    
    // 检查缓存
    const cached = this.cache.get(cacheKey);
    if (cached) {
      return cached;
    }

    return new Promise((resolve, reject) => {
      const availableWorker = this.workerPool.find(w => !w.busy);
      if (availableWorker) {
        availableWorker.busy = true;
        
        availableWorker.worker.postMessage({
          type: 'calculate_price',
          skuId,
          quantity,
          rules: productRules
        });

        const handleMessage = (e) => {
          if (e.data.skuId === skuId) {
            availableWorker.worker.removeEventListener('message', handleMessage);
            availableWorker.busy = false;
            this.cache.set(cacheKey, e.data.result);
            resolve(e.data.result);
          }
        };

        availableWorker.worker.addEventListener('message', handleMessage);
      } else {
        // 没有可用Worker，使用主线程计算（降级处理）
        const result = this.calculatePriceSync(skuId, quantity, productRules);
        this.cache.set(cacheKey, result);
        resolve(result);
      }
    });
  }

  // 同步计算（用于降级）
  calculatePriceSync(skuId, quantity, rules) {
    const basePrice = rules.basePrices[skuId] || 0;
    let discountRate = 1;

    // 阶梯价格计算
    rules.tierPricing.forEach(tier => {
      if (quantity >= tier.minQuantity) {
        discountRate = Math.min(discountRate, tier.discountRate);
      }
    });

    // 混批折扣
    if (rules.mixedBatchDiscount && quantity >= rules.mixedBatchThreshold) {
      discountRate *= rules.mixedBatchDiscount;
    }

    // VIP折扣
    if (rules.vipDiscount) {
      discountRate *= rules.vipDiscount;
    }

    const finalPrice = basePrice * discountRate;
    const totalPrice = finalPrice * quantity;

    return {
      skuId,
      quantity,
      unitPrice: finalPrice,
      totalPrice: Math.round(totalPrice * 100) / 100,
      discountRate,
      appliedRules: this.getAppliedRules(rules, quantity, discountRate)
    };
  }

  // 批量计算多个SKU
  async calculateBatchPrices(skuQuantities, productRules) {
    const batchId = Date.now();
    const results = new Map();

    // 分组并行计算
    const batches = this.chunkArray(
      Object.entries(skuQuantities),
      Math.ceil(Object.keys(skuQuantities).length / this.maxWorkers)
    );

    const promises = batches.map(batch => {
      return new Promise((resolve) => {
        const availableWorker = this.workerPool.find(w => !w.busy);
        if (availableWorker) {
          availableWorker.busy = true;
          
          availableWorker.worker.postMessage({
            type: 'batch_calculate',
            batchId,
            calculations: batch,
            rules: productRules
          });

          const handleMessage = (e) => {
            if (e.data.batchId === batchId) {
              availableWorker.worker.removeEventListener('message', handleMessage);
              availableWorker.busy = false;
              
              e.data.results.forEach(result => {
                results.set(result.skuId, result);
                this.cache.set(
                  `sku_price_${result.skuId}_${result.quantity}_${productRules.version}`,
                  result
                );
              });
              resolve();
            }
          };

          availableWorker.worker.addEventListener('message', handleMessage);
        } else {
          // 降级处理
          batch.forEach(([skuId, quantity]) => {
            const result = this.calculatePriceSync(skuId, quantity, productRules);
            results.set(skuId, result);
            this.cache.set(
              `sku_price_${skuId}_${quantity}_${productRules.version}`,
              result
            );
          });
          resolve();
        }
      });
    });

    await Promise.all(promises);
    return results;
  }

  chunkArray(array, chunkSize) {
    const chunks = [];
    for (let i = 0; i < array.length; i += chunkSize) {
      chunks.push(array.slice(i, i + chunkSize));
    }
    return chunks;
  }

  // 处理Worker消息
  handleWorkerMessage(e) {
    // 统一处理Worker返回的消息
    const { type, data } = e.data;
    
    switch (type) {
      case 'calculation_complete':
        this.emit('calculationComplete', data);
        break;
      case 'batch_complete':
        this.emit('batchComplete', data);
        break;
      case 'error':
        this.emit('error', data);
        break;
    }
  }
}

// Web Worker: sku-calculator.js
self.onmessage = function(e) {
  const { type, data } = e.data;
  
  switch (type) {
    case 'calculate_price':
      const priceResult = calculatePrice(data.skuId, data.quantity, data.rules);
      self.postMessage({ 
        type: 'calculation_complete', 
        skuId: data.skuId,
        result: priceResult 
      });
      break;
      
    case 'batch_calculate':
      const batchResults = data.calculations.map(([skuId, quantity]) => ({
        skuId,
        quantity,
        ...calculatePrice(skuId, quantity, data.rules)
      }));
      self.postMessage({ 
        type: 'batch_complete',
        batchId: data.batchId,
        results: batchResults 
      });
      break;
  }
};

function calculatePrice(skuId, quantity, rules) {
  const basePrice = rules.basePrices[skuId] || 0;
  let discountRate = 1;

  rules.tierPricing.forEach(tier => {
    if (quantity >= tier.minQuantity) {
      discountRate = Math.min(discountRate, tier.discountRate);
    }
  });

  if (rules.mixedBatchDiscount && quantity >= rules.mixedBatchThreshold) {
    discountRate *= rules.mixedBatchDiscount;
  }

  if (rules.vipDiscount) {
    discountRate *= rules.vipDiscount;
  }

  const finalPrice = basePrice * discountRate;
  const totalPrice = finalPrice * quantity;

  return {
    unitPrice: finalPrice,
    totalPrice: Math.round(totalPrice * 100) / 100,
    discountRate,
    calculatedAt: Date.now()
  };
}

3.2.2 SKU选择器优化

// React SKU选择器组件（性能优化版）
import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';

const SkuSelector = ({ skuData, onSelectionChange }) => {
  const [selectedAttributes, setSelectedAttributes] = useState({});
  const [quantities, setQuantities] = useState({});
  const calculationEngineRef = useRef(null);
  
  // 初始化计算引擎
  useEffect(() => {
    calculationEngineRef.current = new SkuCalculationEngine();
    calculationEngineRef.current.initWorkerPool();
    
    return () => {
      calculationEngineRef.current?.workerPool.forEach(w => w.worker.terminate());
    };
  }, []);

  // 计算可用SKU组合
  const availableSkus = useMemo(() => {
    return skuData.skus.filter(sku => sku.stock > 0);
  }, [skuData.skus]);

  // 根据已选属性过滤可用选项
  const getAvailableOptions = useCallback((attributeName, currentSelection) => {
    const filteredSkus = availableSkus.filter(sku => {
      return Object.entries(currentSelection).every(([attr, value]) => {
        if (attr === attributeName) return true;
        return sku.attributes[attr] === value;
      });
    });

    const options = new Set();
    filteredSkus.forEach(sku => {
      if (sku.attributes[attributeName]) {
        options.add(sku.attributes[attributeName]);
      }
    });

    return Array.from(options);
  }, [availableSkus]);

  // 处理属性选择
  const handleAttributeSelect = useCallback((attributeName, value) => {
    const newSelection = {
      ...selectedAttributes,
      [attributeName]: value
    };

    // 查找匹配的SKU
    const matchedSku = availableSkus.find(sku =>
      Object.entries(newSelection).every(([attr, val]) => 
        sku.attributes[attr] === val
      )
    );

    setSelectedAttributes(newSelection);

    if (matchedSku) {
      onSelectionChange?.({
        sku: matchedSku,
        selectedAttributes: newSelection
      });
    }
  }, [selectedAttributes, availableSkus, onSelectionChange]);

  // 虚拟化的属性选项列表
  const AttributeOptions = ({ attributeName, options }) => {
    const parentRef = useRef(null);
    
    const rowVirtualizer = useVirtualizer({
      count: options.length,
      getScrollElement: () => parentRef.current,
      estimateSize: () => 48,
      overscan: 5
    });

    return (
      <div 
        ref={parentRef} 
        className="attribute-options-container"
        style={{ height: '200px', overflow: 'auto' }}
      >
        <div
          style={{
            height: `${rowVirtualizer.getTotalSize()}px`,
            width: '100%',
            position: 'relative'
          }}
        >
          {rowVirtualizer.getVirtualItems().map((virtualItem) => {
            const option = options[virtualItem.index];
            const isSelected = selectedAttributes[attributeName] === option;
            const isAvailable = getAvailableOptions(attributeName, {
              ...selectedAttributes,
              [attributeName]: option
            }).length > 0;

            return (
              <div
                key={virtualItem.key}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: '100%',
                  height: '48px',
                  transform: `translateY(${virtualItem.start}px)`
                }}
              >
                <button
                  className={`attribute-option ${isSelected ? 'selected' : ''} ${!isAvailable ? 'disabled' : ''}`}
                  onClick={() => isAvailable && handleAttributeSelect(attributeName, option)}
                  disabled={!isAvailable}
                >
                  {option}
                </button>
              </div>
            );
          })}
        </div>
      </div>
    );
  };

  // 批量更新价格显示（避免频繁DOM更新）
  const PriceDisplay = React.memo(({ sku }) => {
    const [priceInfo, setPriceInfo] = useState(null);
    const quantityInputRef = useRef(null);

    useEffect(() => {
      if (sku && calculationEngineRef.current) {
        const quantity = parseInt(quantityInputRef.current?.value) || 1;
        
        calculationEngineRef.current.calculateSkuPrice(
          sku.id,
          quantity,
          skuData.pricingRules
        ).then(setPriceInfo);
      }
    }, [sku]);

    const handleQuantityChange = useCallback((e) => {
      const quantity = parseInt(e.target.value) || 1;
      if (sku && calculationEngineRef.current) {
        calculationEngineRef.current.calculateSkuPrice(
          sku.id,
          quantity,
          skuData.pricingRules
        ).then(setPriceInfo);
      }
    }, [sku]);

    if (!sku || !priceInfo) {
      return <div className="price-placeholder">请选择规格</div>;
    }

    return (
      <div className="price-display">
        <div className="unit-price">
          ¥{priceInfo.unitPrice.toFixed(2)}
          <span className="original-price">
            ¥{(sku.basePrice || priceInfo.unitPrice / priceInfo.discountRate).toFixed(2)}
          </span>
        </div>
        <div className="total-price">
          合计: ¥{priceInfo.totalPrice.toFixed(2)}
        </div>
        <div className="quantity-input-wrapper">
          <label>数量:</label>
          <input
            ref={quantityInputRef}
            type="number"
            min="1"
            defaultValue="1"
            onChange={handleQuantityChange}
            className="quantity-input"
          />
          <span className="stock-info">
            库存: {sku.stock}{skuData.unit}
          </span>
        </div>
      </div>
    );
  });

  return (
    <div className="sku-selector">
      {skuData.attributes.map((attribute) => (
        <div key={attribute.name} className="attribute-group">
          <h4>{attribute.label}</h4>
          <AttributeOptions
            attributeName={attribute.name}
            options={getAvailableOptions(attribute.name, selectedAttributes)}
          />
        </div>
      ))}
      
      <PriceDisplay sku={availableSkus.find(sku =>
        Object.entries(selectedAttributes).every(([attr, val]) => 
          sku.attributes[attr] === val
        )
      )} />
    </div>
  );
};

export default SkuSelector;

3.3 数据层与API优化

3.3.1 智能数据聚合

// 商品数据智能聚合器
class ProductDataAggregator {
  constructor() {
    this.apiClient = new ApiClient();
    this.cache = new RedisCache({ ttl: 180, maxKeys: 10000 });
    this.prefetchManager = new PrefetchManager();
  }

  // 并行聚合所有商品相关数据
  async aggregateProductData(productId, userId = null) {
    const cacheKey = `product_full_${productId}_${userId || 'guest'}`;
    
    // 检查缓存
    const cached = await this.cache.get(cacheKey);
    if (cached && !this.isStale(cached.timestamp, 180)) {
      return this.mergeCachedData(cached);
    }

    // 并行请求所有数据源
    const fetchTasks = [
      this.fetchBasicInfo(productId),
      this.fetchSkuData(productId),
      this.fetchInventory(productId),
      this.fetchPricingRules(productId),
      this.fetchShopInfo(productId),
      this.fetchReviews(productId, { limit: 10 }),
      this.fetchRecommendations(productId),
      userId ? this.fetchUserPreferences(userId) : Promise.resolve(null)
    ];

    try {
      const results = await Promise.allSettled(fetchTasks);
      const aggregatedData = this.mergeResults(results);
      
      // 缓存聚合数据
      await this.cache.set(cacheKey, {
        ...aggregatedData,
        timestamp: Date.now()
      });

      // 后台预取相关数据
      this.prefetchRelatedData(aggregatedData);

      return aggregatedData;
    } catch (error) {
      console.error('Product data aggregation failed:', error);
      throw error;
    }
  }

  // 获取基础商品信息
  async fetchBasicInfo(productId) {
    const cacheKey = `product_basic_${productId}`;
    const cached = await this.cache.get(cacheKey);
    
    if (cached && !this.isStale(cached.timestamp, 3600)) {
      return cached.data;
    }

    const data = await this.apiClient.get(`/products/${productId}/basic`);
    
    await this.cache.set(cacheKey, {
      data,
      timestamp: Date.now()
    });

    return data;
  }

  // 获取SKU数据（带格式化和索引优化）
  async fetchSkuData(productId) {
    const cacheKey = `product_skus_${productId}`;
    const cached = await this.cache.get(cacheKey);
    
    if (cached && !this.isStale(cached.timestamp, 300)) {
      return cached.data;
    }

    const rawSkus = await this.apiClient.get(`/products/${productId}/skus`);
    
    // 优化数据结构，建立快速索引
    const optimizedSkus = {
      byId: {},
      byAttributes: {},
      attributes: this.extractAttributes(rawSkus),
      pricingRules: this.extractPricingRules(rawSkus)
    };

    rawSkus.forEach(sku => {
      optimizedSkus.byId[sku.id] = sku;
      
      // 建立属性索引
      const attrKey = JSON.stringify(sku.attributes);
      if (!optimizedSkus.byAttributes[attrKey]) {
        optimizedSkus.byAttributes[attrKey] = [];
      }
      optimizedSkus.byAttributes[attrKey].push(sku.id);
    });

    await this.cache.set(cacheKey, {
      data: optimizedSkus,
      timestamp: Date.now()
    });

    return optimizedSkus;
  }

  // 提取商品属性定义
  extractAttributes(skus) {
    const attributes = new Map();
    
    skus.forEach(sku => {
      Object.entries(sku.attributes).forEach(([name, value]) => {
        if (!attributes.has(name)) {
          attributes.set(name, {
            name,
            label: this.getAttributeLabel(name),
            values: new Set()
          });
        }
        attributes.get(name).values.add(value);
      });
    });

    // 转换为数组格式
    return Array.from(attributes.values()).map(attr => ({
      ...attr,
      values: Array.from(attr.values)
    }));
  }

  // 提取定价规则
  extractPricingRules(skus) {
    const basePrices = {};
    const tierPricing = [];
    let mixedBatchDiscount = null;
    let mixedBatchThreshold = Infinity;

    skus.forEach(sku => {
      basePrices[sku.id] = sku.basePrice;
      
      if (sku.tierPricing) {
        tierPricing.push(...sku.tierPricing);
      }
      
      if (sku.mixedBatchDiscount) {
        mixedBatchDiscount = Math.min(
          mixedBatchDiscount || 1,
          sku.mixedBatchDiscount
        );
        mixedBatchThreshold = Math.min(
          mixedBatchThreshold,
          sku.mixedBatchThreshold || Infinity
        );
      }
    });

    // 去重并排序阶梯价格
    const uniqueTiers = Array.from(new Set(tierPricing.map(t => t.minQuantity)))
      .sort((a, b) => a - b)
      .map(qty => tierPricing.find(t => t.minQuantity === qty));

    return {
      basePrices,
      tierPricing: uniqueTiers,
      mixedBatchDiscount,
      mixedBatchThreshold: mixedBatchThreshold === Infinity ? null : mixedBatchThreshold
    };
  }

  // 后台预取相关数据
  async prefetchRelatedData(productData) {
    // 预取同分类商品
    this.prefetchManager.prefetch(
      `/api/products?category=${productData.categoryId}&limit=20`
    );

    // 预取相关品牌商品
    this.prefetchManager.prefetch(
      `/api/products?brand=${productData.brandId}&limit=10`
    );

    // 预取用户可能感兴趣的商品
    if (productData.similarProducts) {
      productData.similarProducts.slice(0, 5).forEach(id => {
        this.prefetchManager.prefetch(`/api/products/${id}/basic`);
      });
    }
  }

  // 检查结果是否过期
  isStale(timestamp, ttlSeconds) {
    return Date.now() - timestamp > ttlSeconds * 1000;
  }

  // 合并缓存数据
  mergeCachedData(cached) {
    return {
      ...cached.basicInfo,
      skus: cached.skuData,
      inventory: cached.inventory,
      pricingRules: cached.pricingRules,
      shopInfo: cached.shopInfo,
      reviews: cached.reviews,
      recommendations: cached.recommendations,
      userPreferences: cached.userPreferences
    };
  }

  // 合并异步请求结果
  mergeResults(results) {
    const mappedResults = {};
    
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        mappedResults[this.getTaskKey(index)] = result.value;
      } else {
        console.warn(`Task ${index} failed:`, result.reason);
      }
    });

    return mappedResults;
  }

  getTaskKey(index) {
    const keys = [
      'basicInfo', 'skuData', 'inventory', 'pricingRules',
      'shopInfo', 'reviews', 'recommendations', 'userPreferences'
    ];
    return keys[index];
  }
}

// API客户端封装
class ApiClient {
  constructor() {
    this.baseUrl = '/api/v2';
    this.timeout = 10000;
  }

  async get(endpoint, params = {}) {
    const url = new URL(this.baseUrl + endpoint, window.location.origin);
    
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== null) {
        url.searchParams.append(key, value);
      }
    });

    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), this.timeout);

    try {
      const response = await fetch(url.toString(), {
        signal: controller.signal,
        headers: {
          'Accept': 'application/json',
          'Cache-Control': 'no-cache'
        }
      });

      clearTimeout(timeoutId);

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      return await response.json();
    } catch (error) {
      clearTimeout(timeoutId);
      throw error;
    }
  }

  // 批量请求
  async batch(requests) {
    const response = await fetch(`${this.baseUrl}/batch`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ requests })
    });

    if (!response.ok) {
      throw new Error(`Batch request failed: ${response.status}`);
    }

    return await response.json();
  }
}

3.3.2 缓存策略优化

// 多层缓存管理系统
class CacheManager {
  constructor() {
    this.memoryCache = new LRUCache({ max: 500, ttl: 60000 }); // 内存缓存1分钟
    this.localStorageCache = new PersistentCache({ prefix: 'ylw_cache_', ttl: 300000 }); // 本地存储5分钟
    this.sessionCache = new SessionCache(); // 会话缓存
  }
# 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
  // 多级缓存读取
  async get(key, fetcher, options = {}) {
    const {
      ttl = 300000,
      forceRefresh = false,
      storage = ['memory', 'localStorage', 'session']
    } = options;

    // 1. 首先检查内存缓存
    if (storage.includes('memory') && !forceRefresh) {
      const memoryResult = this.memoryCache.get(key);
      if (memoryResult) {
        return memoryResult;
      }
    }

    // 2. 检查本地存储缓存
    if (storage.includes('localStorage') && !forceRefresh) {
      const localResult = await this.localStorageCache.get(key);
      if (localResult) {
        // 回填内存缓存
        this.memoryCache.set(key, localResult);
        return localResult;
      }
    }

    // 3. 检查会话缓存
    if (storage.includes('session') && !forceRefresh) {
      const sessionResult = this.sessionCache.get(key);
      if (sessionResult) {
        // 回填上层缓存
        this.memoryCache.set(key, sessionResult);
        await this.localStorageCache.set(key, sessionResult);
        return sessionResult;
      }
    }

    // 4. 调用数据源获取数据
    const freshData = await fetcher();
    
    // 5. 写入各级缓存
    if (storage.includes('memory')) {
      this.memoryCache.set(key, freshData);
    }
    
    if (storage.includes('localStorage')) {
      await this.localStorageCache.set(key, freshData);
    }
    
    if (storage.includes('session')) {
      this.sessionCache.set(key, freshData);
    }

    return freshData;
  }

  // 批量缓存操作
  async getMultiple(keys, fetchers, options = {}) {
    const results = new Map();
    const missingKeys = [];

    // 批量检查缓存
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      const cached = await this.get(key, () => null, { ...options, forceRefresh: false });
      
      if (cached) {
        results.set(key, cached);
      } else {
        missingKeys.push({ key, index: i });
      }
    }

    // 批量获取缺失的数据
    if (missingKeys.length > 0) {
      const fetchPromises = missingKeys.map(({ key, index }) =>
        fetchers[index]().then(data => ({ key, data }))
      );

      const fetchedData = await Promise.allSettled(fetchPromises);
      
      for (const result of fetchedData) {
        if (result.status === 'fulfilled') {
          results.set(result.value.key, result.value.data);
          await this.set(result.value.key, result.value.data, options);
        }
      }
    }

    return results;
  }

  // 设置缓存
  async set(key, value, options = {}) {
    const { ttl = 300000, storage = ['memory', 'localStorage', 'session'] } = options;

    if (storage.includes('memory')) {
      this.memoryCache.set(key, value);
    }
    
    if (storage.includes('localStorage')) {
      await this.localStorageCache.set(key, value);
    }
    
    if (storage.includes('session')) {
      this.sessionCache.set(key, value);
    }
  }

  // 清除缓存
  async invalidate(pattern) {
    // 清除内存缓存
    this.memoryCache.invalidate(pattern);

    // 清除本地存储缓存
    await this.localStorageCache.invalidate(pattern);

    // 清除会话缓存
    this.sessionCache.invalidate(pattern);
  }

  // 预热缓存
  async warmUp(keys, fetchers, options = {}) {
    const warmupPromises = keys.map((key, index) =>
      this.get(key, fetchers[index], options).catch(err => 
        console.warn(`Cache warmup failed for ${key}:`, err)
      )
    );

    await Promise.allSettled(warmupPromises);
  }
}

// LRU缓存实现
class LRUCache {
  constructor({ max, ttl }) {
    this.max = max;
    this.ttl = ttl;
    this.cache = new Map();
    this.timestamps = new Map();
  }

  get(key) {
    if (!this.cache.has(key)) return undefined;

    const timestamp = this.timestamps.get(key);
    if (Date.now() - timestamp > this.ttl) {
      this.cache.delete(key);
      this.timestamps.delete(key);
      return undefined;
    }

    // 移动到末尾（最近使用）
    const value = this.cache.get(key);
    this.cache.delete(key);
    this.cache.set(key, value);
    this.timestamps.delete(key);
    this.timestamps.set(key, Date.now());

    return value;
  }

  set(key, value) {
    if (this.cache.has(key)) {
      this.cache.delete(key);
      this.timestamps.delete(key);
    } else if (this.cache.size >= this.max) {
      // 删除最久未使用的（第一个）
      const oldestKey = this.cache.keys().next().value;
      this.cache.delete(oldestKey);
      this.timestamps.delete(oldestKey);
    }

    this.cache.set(key, value);
    this.timestamps.set(key, Date.now());
  }

  invalidate(pattern) {
    const regex = typeof pattern === 'string' ? new RegExp(pattern) : pattern;
    
    for (const key of this.cache.keys()) {
      if (regex.test(key)) {
        this.cache.delete(key);
        this.timestamps.delete(key);
      }
    }
  }
}

// 持久化缓存（LocalStorage）
class PersistentCache {
  constructor({ prefix, ttl }) {
    this.prefix = prefix;
    this.ttl = ttl;
  }
# 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
  get(key) {
    try {
      const item = localStorage.getItem(this.prefix + key);
      if (!item) return undefined;

      const parsed = JSON.parse(item);
      if (Date.now() - parsed.timestamp > this.ttl) {
        localStorage.removeItem(this.prefix + key);
        return undefined;
      }

      return parsed.data;
    } catch (error) {
      console.warn('Persistent cache read failed:', error);
      return undefined;
    }
  }

  async set(key, value) {
    try {
      const item = {
        data: value,
        timestamp: Date.now()
      };
      localStorage.setItem(this.prefix + key, JSON.stringify(item));
    } catch (error) {
      // 存储空间满时清理旧数据
      if (error.name === 'QuotaExceededError') {
        this.cleanup();
        try {
          localStorage.setItem(this.prefix + key, JSON.stringify({
            data: value,
            timestamp: Date.now()
          }));
        } catch (e) {
          console.warn('Persistent cache write failed after cleanup:', e);
        }
      } else {
        console.warn('Persistent cache write failed:', error);
      }
    }
  }

  invalidate(pattern) {
    const regex = typeof pattern === 'string' ? new RegExp(pattern) : pattern;
    
    for (let i = localStorage.length - 1; i >= 0; i--) {
      const key = localStorage.key(i);
      if (key.startsWith(this.prefix) && regex.test(key.slice(this.prefix.length))) {
        localStorage.removeItem(key);
      }
    }
  }

  cleanup() {
    const now = Date.now();
    const keysToRemove = [];

    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      if (key.startsWith(this.prefix)) {
        try {
          const item = JSON.parse(localStorage.getItem(key));
          if (now - item.timestamp > this.ttl) {
            keysToRemove.push(key);
          }
        } catch (e) {
          keysToRemove.push(key);
        }
      }
    }

    keysToRemove.forEach(key => localStorage.removeItem(key));
  }
}

// 会话缓存
class SessionCache {
  constructor() {
    this.cache = new Map();
  }

  get(key) {
    if (!this.cache.has(key)) return undefined;
    return this.cache.get(key);
  }

  set(key, value) {
    this.cache.set(key, value);
  }

  invalidate(pattern) {
    const regex = typeof pattern === 'string' ? new RegExp(pattern) : pattern;
    
    for (const key of this.cache.keys()) {
      if (regex.test(key)) {
        this.cache.delete(key);
      }
    }
  }
}

四、性能监控与持续优化

4.1 业务指标监控

// 衣联网专属性能指标
class YilianwangMetrics {
  static businessMetrics = {
    IMAGE_LOAD_TIME: 'image_load_time',
    SKU_CALCULATION_TIME: 'sku_calculation_time',
    PRICE_UPDATE_LATENCY: 'price_update_latency',
    GALLERY_SWIPE_FPS: 'gallery_swipe_fps',
    MOBILE_CONVERSION_TIME: 'mobile_conversion_time',
    SEASONAL_TRAFFIC_HANDLED: 'seasonal_traffic_handled'
  };

  // 图片加载性能监控
  static measureImageLoad(imageUrl, startTime) {
    return {
      end: () => {
        const duration = performance.now() - startTime;
        this.report(this.businessMetrics.IMAGE_LOAD_TIME, duration, {
          imageType: this.getImageType(imageUrl),
          fileSize: this.estimateFileSize(imageUrl)
        });
      }
    };
  }

  // SKU计算性能监控
  static measureSkuCalculation(skuId, operation) {
    const startTime = performance.now();
    
    return {
      end: () => {
        const duration = performance.now() - startTime;
        this.report(this.businessMetrics.SKU_CALCULATION_TIME, duration, {
          skuId: skuId?.substring(0, 8),
          operation,
          workerUsed: !!window.Worker
        });
      }
    };
  }

  // 价格更新延迟监控
  static measurePriceUpdate(skuId, oldPrice, newPrice) {
    const latency = performance.now() - (window.lastPriceRequestTime || 0);
    this.report(this.businessMetrics.PRICE_UPDATE_LATENCY, latency, {
      skuId: skuId?.substring(0, 8),
      priceChange: newPrice - oldPrice,
      percentageChange: ((newPrice - oldPrice) / oldPrice * 100).toFixed(2)
    });
  }

  // 画廊滑动FPS监控
  static monitorGalleryFPS(galleryElement) {
    let frameCount = 0;
    let lastTime = performance.now();
    let animationId = null;

    const measure = () => {
      frameCount++;
      const currentTime = performance.now();
      
      if (currentTime - lastTime >= 1000) {
        const fps = Math.round(frameCount * 1000 / (currentTime - lastTime));
        this.report(this.businessMetrics.GALLERY_SWIPE_FPS, fps, {
          galleryType: galleryElement.dataset.type || 'standard'
        });
        
        frameCount = 0;
        lastTime = currentTime;
      }

      animationId = requestAnimationFrame(measure);
    };

    // 监听滑动开始
    galleryElement.addEventListener('touchstart', () => {
      if (!animationId) {
        measure();
      }
    }, { passive: true });

    // 监听滑动结束
    galleryElement.addEventListener('touchend', () => {
      if (animationId) {
        cancelAnimationFrame(animationId);
        animationId = null;
      }
    }, { passive: true });
  }

  // 移动端转化时间监控
  static trackConversionFunnel() {
    const funnel = {
      pageView: Date.now(),
      skuSelected: null,
      quantityEntered: null,
      addToCart: null,
      checkoutStarted: null
    };

    window.trackFunnelStep = (step) => {
      if (funnel[step] === null) {
        funnel[step] = Date.now();
        this.report(this.businessMetrics.MOBILE_CONVERSION_TIME, 
          funnel[step] - funnel.pageView, { step });
      }
    };
  }

  // 季节性流量处理监控
  static monitorSeasonalTraffic() {
    const connection = navigator.connection;
    const deviceType = this.getDeviceType();
    const memory = navigator.deviceMemory || 4;
    # 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
    this.report(this.businessMetrics.SEASONAL_TRAFFIC_HANDLED, 1, {
      deviceType,
      connectionType: connection?.effectiveType || 'unknown',
      memoryGB: memory,
      screenResolution: `${window.screen.width}x${window.screen.height}`,
      pixelRatio: window.devicePixelRatio
    });
  }

  // 上报指标
  static report(metricName, value, tags = {}) {
    const payload = {
      metric_name: metricName,
      metric_value: value,
      timestamp: Date.now(),
      page: window.location.pathname,
      product_id: window.productId,
      user_type: this.getUserType(),
      device_type: this.getDeviceType(),
      network_type: navigator.connection?.effectiveType || 'unknown',
      ...tags
    };

    // 使用Beacon API确保数据可靠发送
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/metrics/yilianwang', JSON.stringify(payload));
    } else {
      fetch('/api/metrics/yilianwang', {
        method: 'POST',
        body: JSON.stringify(payload),
        keepalive: true
      }).catch(err => console.warn('Metrics report failed:', err));
    }
  }

  static getDeviceType() {
    const ua = navigator.userAgent;
    if (/tablet|ipad|playbook|silk/i.test(ua)) return 'tablet';
    if (/mobile|iphone|ipod|blackberry|opera mini|iemobile/i.test(ua)) return 'mobile';
    return 'desktop';
  }

  static getUserType() {
    // 基于用户行为判断用户类型
    const isWholesaler = document.body.dataset.userType === 'wholesaler';
    const hasBulkOrder = window.location.search.includes('bulk=true');
    return isWholesaler || hasBulkOrder ? 'wholesaler' : 'retailer';
  }

  static getImageType(url) {
    if (url.includes('main') || url.includes('primary')) return 'main';
    if (url.includes('detail') || url.includes('zoom')) return 'detail';
    if (url.includes('model') || url.includes('wear')) return 'model';
    if (url.includes('thumbnail') || url.includes('thumb')) return 'thumbnail';
    return 'other';
  }

  static estimateFileSize(url) {
    // 基于图片尺寸估算文件大小
    const dimensionMatch = url.match(/(\d+)x(\d+)/);
    if (dimensionMatch) {
      const [, width, height] = dimensionMatch.map(Number);
      const pixels = width * height;
      // 粗略估算：每像素0.5字节（压缩后）
      return Math.round(pixels * 0.5 / 1024); // KB
    }
    return 'unknown';
  }
}

五、优化效果

六、经验总结

1. 图片优化是重中之重：服装电商的核心是视觉，图片加载体验直接影响转化率，必须从格式、压缩、懒加载、CDN等多方面优化

2. SKU计算需要架构思维：复杂的组合计算和价格规则必须用Web Worker解耦，配合智能缓存避免重复计算

3. 数据聚合要智能：商品详情页涉及多源数据，并行请求+分层缓存+后台预取是保证性能的关键

4. 移动端体验差异化：批发采购商多在移动端下单，需要专门的触摸优化、加载策略和转化漏斗监控

5. 季节性预案必不可少：换季时期的流量爆发需要提前做好缓存预热、CDN扩容、服务降级等预案

6. 业务指标与技术指标并重：不仅要关注加载速度等技术指标，更要关注转化率、客单价等业务指标的提升