服装网商品详情页前端性能优化实战

一、项目背景与痛点

• 图片密集型：单商品15-50张高清图，单张2-5MB

• SKU复杂度高：颜色×尺码×款式组合爆炸

• 移动端占比大：70%+用户手机访问

• 批发业务逻辑重：阶梯价格、混批规则、实时库存

核心性能瓶颈

┌─────────────────────────────────────────────────────────────┐
│  优化前性能数据（移动端4G网络）                              │
├─────────────────────────────────────────────────────────────┤
│  • 首屏完全加载：6.8s                                        │
│  • 首屏可交互：4.2s                                          │
│  • 图片总下载量：68MB                                        │
│  • SKU选择响应：>500ms（主线程阻塞）                          │
│  • 价格计算耗时：350ms                                       │
│  • 页面FPS：18-25（滑动卡顿）                                │
└─────────────────────────────────────────────────────────────┘

二、图片性能优化

2.1 智能图片加载系统

// 服装图片智能加载管理器
class FashionImageManager {
  constructor() {
    this.loadingQueue = [];
    this.activeLoads = 0;
    this.maxConcurrent = 4;
    this.imageCache = new LRUCache({ max: 200 });
    
    // 设备能力检测
    this.isLowEndDevice = this.detectLowEndDevice();
    this.supportedFormats = this.detectSupportedFormats();
  }

  // 检测低端设备
  detectLowEndDevice() {
    const memory = navigator.deviceMemory || 4;
    const cores = navigator.hardwareConcurrency || 2;
    return memory <= 2 || cores <= 2;
  }

  // 检测支持的图片格式
  detectSupportedFormats() {
    const formats = ['jpg'];
    const canvas = document.createElement('canvas');
    
    if (canvas.toDataURL('image/webp').includes('webp')) {
      formats.unshift('webp');
    }
    if (canvas.toDataURL('image/avif').includes('avif')) {
      formats.unshift('avif');
    }
    
    return formats;
  }

  // 生成多规格图片URL
  generateImageUrls(baseUrl, options = {}) {
    const {
      sizes = ['thumb', 'medium', 'large'],
      quality = this.isLowEndDevice ? 60 : 80,
      format = this.supportedFormats[0]
    } = options;

    const dimensionMap = {
      thumb: { w: 150, h: 187 },
      medium: { w: 375, h: 468 },
      large: { w: 750, h: 937 },
      xlarge: { w: 1125, h: 1406 }
    };

    return sizes.reduce((acc, size) => {
      const dim = dimensionMap[size];
      acc[size] = `${baseUrl}_${dim.w}x${dim.h}_q${quality}.${format}`;
      return acc;
    }, {});
  }

  // 渐进式图片加载（从缩略图到原图）
  async progressiveLoad(imageContainer, imageSources) {
    const { thumb, medium, large } = imageSources;
    
    // 1. 加载占位符
    const placeholder = this.createPlaceholder(375, 468);
    imageContainer.style.backgroundImage = `url(${placeholder})`;

    // 2. 加载缩略图
    const thumbImg = await this.loadImage(thumb, { priority: 'high' });
    imageContainer.style.backgroundImage = `url(${thumbImg.url})`;
    imageContainer.classList.add('loaded', 'thumb-loaded');

    // 3. 预加载中等图
    this.loadImage(medium, { priority: 'normal' }).then(mediumImg => {
      imageContainer.style.backgroundImage = `url(${mediumImg.url})`;
      imageContainer.classList.add('medium-loaded');
    });

    // 4. 按需加载大图
    if (!this.isLowEndDevice) {
      this.loadImage(large, { priority: 'low' }).then(largeImg => {
        imageContainer.style.backgroundImage = `url(${largeImg.url})`;
        imageContainer.classList.add('large-loaded');
      });
    }
  }

  // 带优先级的图片加载
  loadImage(url, { priority = 'normal' } = {}) {
    const cacheKey = url;
    
    if (this.imageCache.has(cacheKey)) {
      return Promise.resolve(this.imageCache.get(cacheKey));
    }

    return new Promise((resolve, reject) => {
      this.loadingQueue.push({ url, priority, resolve, reject });
      this.processQueue();
    });
  }

  processQueue() {
    while (
      this.loadingQueue.length > 0 && 
      this.activeLoads < this.maxConcurrent
    ) {
      const item = this.loadingQueue.shift();
      this.activeLoads++;
      
      this.fetchImage(item.url)
        .then(result => {
          this.imageCache.set(item.url, result);
          item.resolve(result);
        })
        .catch(item.reject)
        .finally(() => {
          this.activeLoads--;
          this.processQueue();
        });
    }
  }

  async fetchImage(url) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      
      img.onload = () => resolve({
        url,
        width: img.naturalWidth,
        height: img.naturalHeight,
        loadedAt: Date.now()
      });
      
      img.onerror = () => {
        // 尝试降级格式
        const fallbackUrl = this.getFallbackUrl(url);
        if (fallbackUrl && fallbackUrl !== url) {
          img.src = fallbackUrl;
        } else {
          reject(new Error(`Failed to load: ${url}`));
        }
      };

      img.src = url;
    });
  }

  // 创建渐变占位符
  createPlaceholder(width, height) {
    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, '#f8f8f8');
    gradient.addColorStop(1, '#e8e8e8');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);
    
    return canvas.toDataURL('image/jpeg', 0.5);
  }

  // 图片懒加载观察器
  initLazyLoading(containerSelector) {
    const container = document.querySelector(containerSelector);
    if (!container) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const imageData = JSON.parse(entry.target.dataset.imageData);
            this.progressiveLoad(entry.target, imageData.urls);
            observer.unobserve(entry.target);
          }
        });
      },
      { 
        rootMargin: '100px',
        threshold: 0.1 
      }
    );

    container.querySelectorAll('.lazy-image').forEach(el => {
      observer.observe(el);
    });
  }
}

// 使用示例
const imageManager = new FashionImageManager();

// 绑定图片数据
document.querySelectorAll('.product-gallery-item').forEach(item => {
  const baseUrl = item.dataset.imageUrl;
  item.dataset.imageData = JSON.stringify({
    urls: imageManager.generateImageUrls(baseUrl)
  });
});

imageManager.initLazyLoading('.product-gallery');

2.2 CDN与图片处理优化

// 图片CDN智能配置
class ImageCDNOptimizer {
  constructor() {
    this.edgeNodes = this.selectOptimalEdgeNode();
    this.imageProcessor = new ImageProcessor();
  }

  // 选择最优CDN节点
  selectOptimalEdgeNode() {
    // 基于用户地理位置选择
    const userRegion = this.detectUserRegion();
    
    const edgeNodes = {
      'east-china': 'https://img-east.yilianwang.com',
      'north-china': 'https://img-north.yilianwang.com',
      'south-china': 'https://img-south.yilianwang.com',
      'west-china': 'https://img-west.yilianwang.com',
      'overseas': 'https://img-global.yilianwang.com'
    };

    return edgeNodes[userRegion] || edgeNodes['east-china'];
  }

  detectUserRegion() {
    // 基于IP地理定位
    return fetch('/api/user/region')
      .then(res => res.json())
      .catch(() => 'east-china');
  }

  // 生成优化后的图片URL
  getOptimizedImageUrl(originalUrl, options = {}) {
    const {
      width,
      height,
      quality = 85,
      format = 'auto',
      watermark = false,
      mode = 'fit' // fit, fill, crop
    } = options;

    const params = new URLSearchParams({
      url: encodeURIComponent(originalUrl),
      w: width,
      h: height,
      q: quality,
      m: mode,
      ...(watermark && { wm: 'yilianwang' }),
      ...(format !== 'auto' && { fmt: format })
    });

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

  // 批量生成商品图片URL
  generateProductImageUrls(product) {
    const baseUrl = product.mainImage;
    const gallery = product.gallery || [];

    return {
      main: {
        thumb: this.getOptimizedImageUrl(baseUrl, { width: 300, height: 375, quality: 70 }),
        medium: this.getOptimizedImageUrl(baseUrl, { width: 600, height: 750, quality: 80 }),
        large: this.getOptimizedImageUrl(baseUrl, { width: 900, height: 1125, quality: 85 }),
        zoom: this.getOptimizedImageUrl(baseUrl, { width: 1200, height: 1500, quality: 90 })
      },
      gallery: gallery.map(img => ({
        thumb: this.getOptimizedImageUrl(img, { width: 150, height: 187, quality: 65 }),
        medium: this.getOptimizedImageUrl(img, { width: 375, height: 468, quality: 75 }),
        large: this.getOptimizedImageUrl(img, { width: 750, height: 937, quality: 85 })
      })),
      model: product.modelImages?.map(img => ({
        thumb: this.getOptimizedImageUrl(img, { width: 200, height: 267, quality: 70 }),
        full: this.getOptimizedImageUrl(img, { width: 600, height: 800, quality: 85 })
      }))
    };
  }
}

三、SKU与价格计算优化

3.1 SKU计算引擎

// 服装SKU智能计算引擎
class SkuEngine {
  constructor() {
    this.cache = new LRUCache({ max: 10000, ttl: 300000 });
    this.workerPool = this.createWorkerPool();
  }
# 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
  // 创建Web Worker池
  createWorkerPool() {
    const pool = [];
    const workerCount = Math.min(navigator.hardwareConcurrency || 4, 4);

    for (let i = 0; i < workerCount; i++) {
      const worker = new Worker('/workers/sku-worker.js');
      pool.push({ worker, busy: false });
    }

    return pool;
  }

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

    return new Promise((resolve, reject) => {
      const worker = this.getAvailableWorker();
      
      if (worker) {
        worker.busy = true;
        
        worker.worker.postMessage({
          type: 'calculate_price',
          skuId,
          quantity,
          rules: pricingRules
        });

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

        worker.worker.addEventListener('message', handleMessage);
      } else {
        // 降级：同步计算
        const result = this.calculatePriceSync(skuId, quantity, pricingRules);
        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 unitPrice = basePrice * discountRate;
    const totalPrice = unitPrice * quantity;

    return {
      skuId,
      quantity,
      unitPrice: Math.round(unitPrice * 100) / 100,
      totalPrice: Math.round(totalPrice * 100) / 100,
      discountRate,
      savings: Math.round((basePrice - unitPrice) * quantity * 100) / 100
    };
  }

  // 获取可用Worker
  getAvailableWorker() {
    return this.workerPool.find(w => !w.busy);
  }

  // 批量计算价格
  async calculateBatchPrices(skuQuantities, pricingRules) {
    const batchId = Date.now();
    const results = new Map();

    // 分批并行计算
    const chunks = this.chunkArray(
      Object.entries(skuQuantities),
      Math.ceil(Object.keys(skuQuantities).length / this.workerPool.length)
    );

    const promises = chunks.map(chunk => {
      return new Promise((resolve) => {
        const worker = this.getAvailableWorker();
        if (worker) {
          worker.busy = true;
          
          worker.worker.postMessage({
            type: 'batch_calculate',
            batchId,
            calculations: chunk,
            rules: pricingRules
          });

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

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

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

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

// Web Worker: sku-worker.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: 'price_result', 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_result', 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 unitPrice = basePrice * discountRate;
  const totalPrice = unitPrice * quantity;

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

3.2 高性能SKU选择器

// React SKU选择器组件
import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
# 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
const SkuSelector = ({ skuData, pricingRules, onSelectionChange }) => {
  const [selectedAttrs, setSelectedAttrs] = useState({});
  const [quantity, setQuantity] = useState(1);
  const skuEngineRef = useRef(null);
  const priceInfoRef = useRef(null);

  // 初始化计算引擎
  useEffect(() => {
    skuEngineRef.current = new SkuEngine();
    return () => {
      skuEngineRef.current?.workerPool.forEach(w => w.worker.terminate());
    };
  }, []);

  // 计算可用选项
  const getAvailableOptions = useCallback((attrName, currentSelection) => {
    const filteredSkus = skuData.skus.filter(sku => {
      return Object.entries(currentSelection).every(([attr, value]) => {
        if (attr === attrName) return true;
        return sku.attributes[attr] === value;
      });
    });

    return [...new Set(filteredSkus.map(s => sku.attributes[attrName]))]
      .filter(Boolean)
      .map(value => ({
        value,
        available: filteredSkus.some(s => s.attributes[attrName] === value && s.stock > 0)
      }));
  }, [skuData.skus]);

  // 处理属性选择
  const handleAttrSelect = useCallback((attrName, value) => {
    const newSelection = { ...selectedAttrs, [attrName]: value };
    setSelectedAttrs(newSelection);

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

    if (matchedSku) {
      onSelectionChange?.({
        sku: matchedSku,
        selection: newSelection
      });
      
      // 计算价格
      skuEngineRef.current?.calculatePrice(
        matchedSku.id,
        quantity,
        pricingRules
      ).then(priceInfo => {
        priceInfoRef.current = priceInfo;
        // 触发价格更新
      });
    }
  }, [selectedAttrs, skuData.skus, quantity, pricingRules, onSelectionChange]);

  // 虚拟化的属性选项
  const AttributeGroup = ({ attribute }) => {
    const parentRef = useRef(null);
    const options = useMemo(() => 
      getAvailableOptions(attribute.name, selectedAttrs),
    [attribute.name, selectedAttrs, getAvailableOptions]);

    const rowVirtualizer = useVirtualizer({
      count: options.length,
      getScrollElement: () => parentRef.current,
      estimateSize: () => 44,
      overscan: 3
    });

    return (
      <div className="attr-group">
        <h4>{attribute.label}</h4>
        <div ref={parentRef} className="attr-options-scroll">
          <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }}>
            {rowVirtualizer.getVirtualItems().map(virtualItem => {
              const option = options[virtualItem.index];
              const isSelected = selectedAttrs[attribute.name] === option.value;
              
              return (
                <div
                  key={virtualItem.key}
                  style={{ transform: `translateY(${virtualItem.start}px)` }}
                >
                  <button
                    className={`attr-btn ${isSelected ? 'selected' : ''} ${!option.available ? 'disabled' : ''}`}
                    onClick={() => option.available && handleAttrSelect(attribute.name, option.value)}
                    disabled={!option.available}
                  >
                    {option.value}
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  };

  // 当前选中SKU
  const selectedSku = useMemo(() => {
    return skuData.skus.find(sku =>
      Object.entries(selectedAttrs).every(([attr, val]) => sku.attributes[attr] === val)
    );
  }, [skuData.skus, selectedAttrs]);

  return (
    <div className="sku-selector">
      {skuData.attributes.map(attr => (
        <AttributeGroup key={attr.name} attribute={attr} />
      ))}

      {/* 价格与数量 */}
      <div className="price-section">
        {selectedSku ? (
          <PriceDisplay 
            skuId={selectedSku.id} 
            quantity={quantity}
            pricingRules={pricingRules}
            engine={skuEngineRef.current}
            onUpdate={setPriceInfo}
          />
        ) : (
          <div className="select-prompt">请选择商品规格</div>
        )}
        
        <div className="quantity-selector">
          <label>数量：</label>
          <input
            type="number"
            min="1"
            max={selectedSku?.stock || 9999}
            value={quantity}
            onChange={(e) => {
              const qty = parseInt(e.target.value) || 1;
              setQuantity(qty);
              if (selectedSku) {
                skuEngineRef.current?.calculatePrice(
                  selectedSku.id,
                  qty,
                  pricingRules
                ).then(setPriceInfo);
              }
            }}
          />
          <span className="stock-info">
            库存：{selectedSku?.stock || 0} {skuData.unit}
          </span>
        </div>
      </div>
    </div>
  );
};

// 价格显示组件
const PriceDisplay = React.memo(({ skuId, quantity, pricingRules, engine, onUpdate }) => {
  const [priceInfo, setPriceInfo] = useState(null);
# 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
  useEffect(() => {
    if (engine && skuId) {
      engine.calculatePrice(skuId, quantity, pricingRules).then(setPriceInfo);
    }
  }, [engine, skuId, quantity, pricingRules]);

  useEffect(() => {
    onUpdate?.(priceInfo);
  }, [priceInfo, onUpdate]);

  if (!priceInfo) return <div className="price-loading">计算中...</div>;

  return (
    <div className="price-info">
      <div className="unit-price">
        <span className="currency">¥</span>
        <span className="amount">{priceInfo.unitPrice.toFixed(2)}</span>
        {priceInfo.discountRate < 1 && (
          <span className="original-price">
            ¥{(priceInfo.unitPrice / priceInfo.discountRate).toFixed(2)}
          </span>
        )}
      </div>
      <div className="total-price">
        合计：<span className="highlight">¥{priceInfo.totalPrice.toFixed(2)}</span>
      </div>
      {priceInfo.savings > 0 && (
        <div className="savings">为您节省 ¥{priceInfo.savings.toFixed(2)}</div>
      )}
    </div>
  );
});

export default SkuSelector;

四、数据层优化

4.1 智能数据聚合

// 商品数据聚合器
class ProductDataAggregator {
  constructor() {
    this.api = new ApiClient();
    this.cache = new MultiLayerCache();
    this.prefetchManager = new PrefetchManager();
  }
# 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
  // 聚合商品详情页所有数据
  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 results = await Promise.allSettled([
      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.fetchUserPrefs(userId) : Promise.resolve(null)
    ]);

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

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

    return aggregatedData;
  }

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

    const rawSkus = await this.api.get(`/products/${productId}/skus`);
    
    // 优化数据结构
    const optimized = {
      byId: {},
      byAttributes: new Map(),
      attributes: this.extractAttributes(rawSkus),
      pricingRules: this.extractPricingRules(rawSkus)
    };

    rawSkus.forEach(sku => {
      optimized.byId[sku.id] = sku;
      
      const attrKey = JSON.stringify(sku.attributes);
      if (!optimized.byAttributes.has(attrKey)) {
        optimized.byAttributes.set(attrKey, []);
      }
      optimized.byAttributes.get(attrKey).push(sku.id);
    });

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

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

    return Array.from(attrs.values()).map(a => ({
      ...a,
      values: Array.from(a.values)
    }));
  }

  // 提取定价规则
  extractPricingRules(skus) {
    const basePrices = {};
    const tierPricing = new Map();
    let mixedBatchDiscount = 1;
    let mixedBatchThreshold = Infinity;

    skus.forEach(sku => {
      basePrices[sku.id] = sku.basePrice;
      
      if (sku.tierPricing) {
        sku.tierPricing.forEach(tier => {
          const existing = tierPricing.get(tier.minQuantity) || { minQuantity: tier.minQuantity, discountRate: 1 };
          existing.discountRate = Math.min(existing.discountRate, tier.discountRate);
          tierPricing.set(tier.minQuantity, existing);
        });
      }
      
      if (sku.mixedBatchDiscount) {
        mixedBatchDiscount = Math.min(mixedBatchDiscount, sku.mixedBatchDiscount);
        mixedBatchThreshold = Math.min(mixedBatchThreshold, sku.mixedBatchThreshold || Infinity);
      }
    });

    return {
      basePrices,
      tierPricing: Array.from(tierPricing.values()).sort((a, b) => a.minQuantity - b.minQuantity),
      mixedBatchDiscount: mixedBatchThreshold === Infinity ? null : mixedBatchDiscount,
      mixedBatchThreshold: mixedBatchThreshold === Infinity ? null : mixedBatchThreshold
    };
  }

  // 后台预取
  prefetchRelatedData(productData) {
    // 预取同分类商品
    this.prefetchManager.prefetch(`/api/products?category=${productData.categoryId}&limit=20`);
    
    // 预取相关品牌
    this.prefetchManager.prefetch(`/api/brands/${productData.brandId}/products?limit=10`);
    
    // 预取相似商品
    if (productData.similarIds?.length) {
      productData.similarIds.slice(0, 5).forEach(id => {
        this.prefetchManager.prefetch(`/api/products/${id}/basic`);
      });
    }
  }
}

4.2 多层缓存系统

// 多层缓存管理
class MultiLayerCache {
  constructor() {
    this.memory = new LRUCache({ max: 200, ttl: 60000 });
    this.session = new SessionCache();
    this.persistent = new PersistentCache({ prefix: 'prod_cache_', ttl: 300000 });
  }
# 封装好API供应商demo url=https://console.open.onebound.cn/console/?i=Lex
  async get(key, options = {}) {
    const { storage = ['memory', 'session', 'persistent'] } = options;

    // 按层级检查缓存
    for (const layer of storage) {
      let result;
      switch (layer) {
        case 'memory':
          result = this.memory.get(key);
          break;
        case 'session':
          result = this.session.get(key);
          break;
        case 'persistent':
          result = await this.persistent.get(key);
          break;
      }
      if (result) {
        // 回填上层缓存
        if (layer === 'persistent') {
          this.session.set(key, result);
          this.memory.set(key, result);
        } else if (layer === 'session') {
          this.memory.set(key, result);
        }
        return result;
      }
    }

    return null;
  }

  async set(key, value, options = {}) {
    const { storage = ['memory', 'session', 'persistent'] } = options;

    storage.forEach(layer => {
      switch (layer) {
        case 'memory':
          this.memory.set(key, value);
          break;
        case 'session':
          this.session.set(key, value);
          break;
        case 'persistent':
          this.persistent.set(key, value);
          break;
      }
    });
  }
}

// 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 ts = this.timestamps.get(key);
    if (Date.now() - ts > this.ttl) {
      this.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.delete(oldestKey);
    }

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

  delete(key) {
    this.cache.delete(key);
    this.timestamps.delete(key);
  }
}

// 持久化缓存
class PersistentCache {
  constructor({ prefix, ttl }) {
    this.prefix = prefix;
    this.ttl = ttl;
  }

  async get(key) {
    try {
      const item = localStorage.getItem(this.prefix + key);
      if (!item) return undefined;

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

      return parsed.data;
    } catch {
      return undefined;
    }
  }

  async set(key, value) {
    try {
      localStorage.setItem(this.prefix + key, JSON.stringify({
        data: value,
        ts: Date.now()
      }));
    } catch (e) {
      // 空间不足时清理旧数据
      if (e.name === 'QuotaExceededError') {
        this.cleanup();
        try {
          localStorage.setItem(this.prefix + key, JSON.stringify({
            data: value,
            ts: Date.now()
          }));
        } catch {}
      }
    }
  }

  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.ts > this.ttl) {
            keysToRemove.push(key);
          }
        } catch {
          keysToRemove.push(key);
        }
      }
    }

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

五、性能监控

5.1 业务指标监控

// 服装电商专属监控
class FashionMetrics {
  static metrics = {
    IMAGE_LOAD: 'image_load_time',
    SKU_CALC: 'sku_calc_time',
    PRICE_UPDATE: 'price_update_latency',
    GALLERY_FPS: 'gallery_fps',
    CONVERSION_TIME: 'mobile_conversion_time'
  };

  // 图片加载监控
  static measureImageLoad(url) {
    const start = performance.now();
    
    return {
      end: () => {
        const duration = performance.now() - start;
        this.report(this.metrics.IMAGE_LOAD, duration, {
          type: this.getImageType(url),
          size: this.estimateSize(url)
        });
      }
    };
  }

  // SKU计算监控
  static measureSkuCalc(skuId, operation) {
    const start = performance.now();
    
    return {
      end: () => {
        const duration = performance.now() - start;
        this.report(this.metrics.SKU_CALC, duration, {
          skuId: skuId?.slice(0, 8),
          operation,
          workerUsed: !!window.Worker
        });
      }
    };
  }

  // 上报指标
  static report(metric, value, tags = {}) {
    const payload = {
      metric,
      value,
      timestamp: Date.now(),
      page: location.pathname,
      productId: window.productId,
      device: this.getDeviceType(),
      network: navigator.connection?.effectiveType || 'unknown',
      ...tags
    };

    // 使用Beacon确保可靠发送
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/metrics', JSON.stringify(payload));
    }
  }

  static getDeviceType() {
    const ua = navigator.userAgent;
    if (/tablet|ipad/i.test(ua)) return 'tablet';
    if (/mobile|iphone/i.test(ua)) return 'mobile';
    return 'desktop';
  }

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

六、优化效果

七、核心经验

1. 图片优化是根本：格式选择、分级加载、CDN优化缺一不可

2. 计算密集型任务必须分离：SKU计算、价格计算用Web Worker

3. 数据预取与缓存策略：并行请求+多层缓存+智能预取

4. 移动端专项优化：触摸体验、网络适配、性能降级

5. 业务指标驱动：不仅看技术指标，更要看转化效果