🏢 《科力普商品详情页前端性能优化实战》

背景：科力普（Colipu）作为领先的一站式办公物资电商平台，服务于政府、央企、大型国企。其商品详情页的核心特征是：“MRO 属性强、参数极度复杂、SKU 规则变态级多、对数据准确性要求高于一切”。

本次优化目标：在政企内网环境下，实现“零白屏、零卡顿、毫秒级报价”。

一、科力普详情页的“地狱级”挑战

FCP: 2.1s
LCP: 4.8s (参数表首屏)
SKU 切换: 200ms+
键盘 Tab 响应: 明显卡顿

二、科力普优化总纲：工业级精度

┌────────────────────────────┐
│  1. SKU 规则引擎前置化      │ ← 把后端逻辑搬到前端 Map
├────────────────────────────┤
│  2. 参数表虚拟滚动 + 冻结   │ ← 工业级大数据渲染
├────────────────────────────┤
│  3. 价格计算 Web Worker     │ ← 隔离复杂计算
├────────────────────────────┤
│  4. 键盘导航无障碍优化      │ ← Tab 键零延迟
├────────────────────────────┤
│  5. 政企内网专项加速        │ ← DNS/TCP/TLS 预建连
└────────────────────────────┘

三、关键优化实战（含工业级代码）

✅ 第一阶段：SKU 规则引擎（核心）

💥 痛点：工业品的笛卡尔积

• 材质：不锈钢304 / 316 / 碳钢

• 表面：镀锌 / 发黑 / 本色

• 规格：M3 / M4 / M5 ... M20

• 长度：5mm / 10mm ... 100mm
  👉 组合数：3 × 3 × 18 × 20 = 3240 种

❌ 传统方式（必死）

// 每次选择都遍历 3000+ SKU
skus.find(sku => matchAllRules(sku, selectedAttrs));
// 耗时：150ms ~ 300ms

✅ 科力普解法：SKU 前缀树（Trie）

class SkuTrie {
  constructor() {
    this.root = new Map();
  }

  insert(sku) {
    let node = this.root;
    const path = [
      sku.material,
      sku.surface,
      sku.diameter,
      sku.length
    ];
    
    for (const attr of path) {
      if (!node.has(attr)) {
        node.set(attr, new Map());
      }
      node = node.get(attr);
    }
    node.set('__sku__', sku);
  }

  find(attrs) {
    let node = this.root;
    for (const attr of attrs) {
      if (!node.has(attr)) return null;
      node = node.get(attr);
    }
    return node.get('__sku__');
  }
}

// 构建 Trie（一次性）
const skuTrie = new SkuTrie();
allSkus.forEach(sku => skuTrie.insert(sku));

// 查找（O(K)，K=属性个数，几乎是常数）
const targetSku = skuTrie.find(selectedAttrs);

✅ 第二阶段：参数表的“钢铁洪流”治理

1️⃣ 虚拟滚动 + 行列冻结

import { FixedSizeGrid } from 'react-window';

<FixedSizeGrid
  columnCount={paramColumns.length}
  rowCount={params.length}
  columnWidth={getColumnWidth}
  rowHeight={48}
  height={500}
  width="100%"
>
  {({ columnIndex, rowIndex, style }) => (
    <div 
      style={style} 
      className={columnIndex === 0 ? 'sticky-col' : ''}
    >
      {params[rowIndex][columnIndex]}
    </div>
  )}
</FixedSizeGrid>

2️⃣ 化学属性高亮（按需渲染）

// 只在 hover 时计算高亮
const [hoveredFormula, setHoveredFormula] = useState(null);

<div 
  onMouseEnter={() => setHoveredFormula(formula)}
  onMouseLeave={() => setHoveredFormula(null)}
>
  {formula}
</div>

✅ 第三阶段：价格计算的“核武器隔离”

💥 痛点：阶梯价 + 税点 + 协议价

// 复杂计算阻塞主线程
calculateFinalPrice(sku, qty, contract, taxRate);

✅ Web Worker 解耦

// price.worker.js
self.onmessage = (e) => {
  const { sku, qty, contract } = e.data;
  const price = calculateComplexPrice(sku, qty, contract);
  self.postMessage({ price });
};

// 主线程
const priceWorker = new Worker('price.worker.js');
priceWorker.postMessage({ sku, qty, contract });
priceWorker.onmessage = (e) => updatePriceUI(e.data.price);

✅ 第四阶段：键盘导航的“零延迟”优化

💥 痛点：采购员习惯 Tab 快速录入

✅ focus 管理优化

// 禁用默认 focus 导致的 scroll
document.addEventListener('focusin', e => {
  if (e.target.tagName === 'INPUT') {
    e.preventDefault();
  }
});

// 使用 requestAnimationFrame 同步焦点
function moveFocus(nextIndex) {
  requestAnimationFrame(() => {
    skuInputs[nextIndex].focus({ preventScroll: true });
  });
}

✅ 第五阶段：政企内网专项加速

1️⃣ 资源预建连（关键）

<link rel="preconnect" href="https://cdn.colipu.com" crossorigin>
<link rel="dns-prefetch" href="https://api.colipu.com">

2️⃣ 内网缓存策略

Cache-Control: public, max-age=31536000, immutable

四、性能监控指标（科力普标准）

五、最终优化成果

六、面试高频追问（科力普/MRO 场景）

Q：为什么工业品电商不能用普通 SKU 方案？

• 工业品 SKU 是规则驱动而非图片驱动；

• 组合数呈指数级增长；

• 必须用 Trie / 图结构进行路径压缩。

Q：Web Worker 适合哪些场景？

• 复杂数值计算（价格、税费、折扣）

• 大数据排序/过滤

• 不能拆分的重型算法

Q：政企内网如何优化？

• preconnect+ dns-prefetch

• 减少 HTTPS 握手次数

• 强缓存 + CDN

七、总结一句话

科力普的性能优化核心在于：用“数据结构”解决“工业复杂度”，用“线程隔离”保障“操作确定性”。