⚙️ 《京东工业商品详情页前端性能优化实战》

背景：京东工业（JD Industrials）作为 MRO（Maintenance, Repair & Operations） 核心平台，其商品详情页（PDP）面临的是“钢铁级”数据密度。不同于消费品，这里的每一个螺栓、每一卷胶带都有成百上千个技术参数。

本次实战目标：在政企内网环境下，实现参数表 0 抖动、SKU 规则 0 延迟、采购决策 0 阻碍。

一、京东工业的“钢铁丛林”挑战

FCP: 2.5s
LCP: 5.2s (巨型参数表)
SKU 规则匹配: 300ms+
页面可交互(TTI): 4.5s

二、优化总纲：工业级“降维打击”

┌────────────────────────────┐
│  1. SKU 规则引擎（Trie 树）  │ ← 核心：O(N²) → O(1)
├────────────────────────────┤
│  2. 参数表虚拟化 + 冻结     │ ← 解决 50+ 行 DOM 噩梦
├────────────────────────────┤
│  3. 阶梯价格 Web Worker     │ ← 隔离复杂数学计算
├────────────────────────────┤
│  4. 单位换算预计算         │ ← 消除运行时损耗
├────────────────────────────┤
│  5. 工厂网络专项加速        │ ← Preconnect + 强缓存
└────────────────────────────┘

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

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

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

• 连接方式：法兰 / 螺纹 / 焊接

• 口径：DN15 / DN20 / DN25 ... DN200

• 压力等级：PN10 / PN16 / PN25

• 材质：铸铁 / 铸钢 / 不锈钢304 / 316
  👉 组合数：3 × 12 × 4 × 4 = 576 种

❌ 传统方式（前端直接崩溃）

// 每次选择都 filter 全量 SKU
const result = skus.filter(sku => 
  sku.connection === conn &&
  sku.diameter === dia &&
  sku.pressure === pressure &&
  sku.material === material
);
// 耗时：150ms ~ 400ms

✅ 京东工业解法：SKU Trie（字典树）

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

  // 插入 SKU
  insert(sku) {
    let node = this.root;
    // 路径：connection -> diameter -> pressure -> material
    const path = [
      sku.attrs.connectionId,
      sku.attrs.diameterId,
      sku.attrs.pressureId,
      sku.attrs.materialId
    ];

    for (const attr of path) {
      if (!node.has(attr)) {
        node.set(attr, new Map());
      }
      node = node.get(attr);
    }
    node.set('__SKU__', sku); // 叶子节点存 SKU
  }

  // 查找 SKU (O(1))
  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 IndustrialSkuTrie();
allSkus.forEach(sku => skuTrie.insert(sku));

// 前端选择时
const selectedAttrs = [connId, diaId, pressId, matId];
const currentSku = skuTrie.find(selectedAttrs);

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

💥 痛点：DOM 节点数破千

1️⃣ 参数表虚拟化（Canvas 渲染备选）

import { FixedSizeGrid as Grid } from 'react-window';

<Grid
  columnCount={6}
  rowCount={params.length} // 可能 80+
  columnWidth={getColWidth}
  rowHeight={48}
  height={500}
  width="100%"
>
  {({ columnIndex, rowIndex, style }) => (
    <div style={style} className="param-cell">
      {params[rowIndex][columnIndex]}
    </div>
  )}
</Grid>

2️⃣ 参数冻结（Freeze）策略

// 服务端直接输出静态 HTML
<div class="params-table" inert>
  <!-- 不可交互，但可复制 -->
  {htmlString}
</div>

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

💥 痛点：采购量变化触发疯狂重算

// 输入 12345 个，触发 N 次价格计算
onQuantityChange(qty => {
  calculateTieredPrice(qty, tiers); // 复杂逻辑
});

✅ Web Worker 解耦

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

// 主线程
const priceWorker = new Worker('price.worker.js');
qtyInput.oninput = (e) => {
  priceWorker.postMessage({ qty: e.target.value, tiers });
};
priceWorker.onmessage = (e) => {
  priceEl.textContent = e.data.price;
};

✅ 第四阶段：工厂网络专项加速

1️⃣ 资源预建连（政企内网必杀技）

<!-- 提前 5s 建立与图片/CDN 的连接 -->
<link rel="preconnect" href="https://img.jdind.com" crossorigin>
<link rel="dns-prefetch" href="https://api.jdind.com">

2️⃣ 工业级强缓存

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

四、性能监控与降级

1️⃣ 工业级核心指标

2️⃣ 老旧工控机降级

// 检测是否为老 IE / 低内存环境
const isLegacyIndustrial = 
  /MSIE|Trident/i.test(navigator.userAgent) ||
  navigator.deviceMemory < 2;

if (isLegacyIndustrial) {
  disableParamVirtualization(); // 启用静态表格
  disableWebWorker();          // 改用同步计算
}

五、最终优化成果

六、面试高频追问（京东工业风格）

Q：为什么工业品 SKU 不能用普通 Map？

• 普通 Map 是单层 Key-Value；

• Trie 树能表达层级规则依赖（A 选了，B 才能选）；

• 更适合工业品的属性路径。

Q：参数表为什么不用 Excel 控件？

• Excel 控件太重，加载慢；

• 工业客户只需要“看”和“复制”；

• 虚拟化 DOM 更符合 Web 标准。

Q：工厂内网优化最重要的是什么？

• 减少 HTTPS 连接建立次数；

• preconnect是王道；

• 强缓存胜过一切压缩。

七、总结一句话

京东工业的性能优化核心在于：用“数据结构”驯服“工业复杂度”，用“线程隔离”保障“采购确定性”。