🏗️ 《建材网商品详情页前端性能优化实战》

背景：建材网（如齐家网、土巴兔、慧聪建材等）的商品详情页，是典型的 “SKU 规则地狱 + 非标参数 + 装修案例图片堆砌” 场景。

核心挑战：“规格多到离谱、参数表没有标准、图片体积巨大”。本次优化目标：在装修公司老旧电脑上实现“秒开”。

一、建材网的“参数地狱”挑战

FCP: 2.2s
LCP: 5.5s (超大尺寸主图)
TTI: 4.8s (SKU 选择器卡顿)

二、优化总纲：化繁为简

┌────────────────────────────┐
│  1. SKU 规则引擎（正则压缩） │ ← 解决 1000+ 规格组合
├────────────────────────────┤
│  2. 非标参数表虚拟化        │ ← 解决 DOM 节点爆炸
├────────────────────────────┤
│  3. 装修图“按需解码”       │ ← 解决大图解码阻塞
├────────────────────────────┤
│  4. 装修案例“相邻加载”     │ ← 类似相册的滑动加载
└────────────────────────────┘

三、关键优化实战（含核心代码）

✅ 第一阶段：SKU 规则的“正则压缩”

💥 痛点：建材 SKU 的排列组合

• 尺寸：800 * 800, 600 * 600, 600 * 1200, 750 * 1500...

• 工艺：抛釉, 柔光, 通体, 哑光...

• 色系：浅灰, 深灰, 鱼肚白...

❌ 错误方式

skus.filter(sku => 
  sku.size === size && 
  sku.craft === craft && 
  sku.color === color
);
// 每次选择耗时 100ms+

✅ 建材网解法：规则编码 + 位运算/正则

// SKU 数据结构优化
const skus = [
  { id: 1, rule: '800 * 800|抛釉|浅灰', price: 88 },
  { id: 2, rule: '600 * 1200|柔光|深灰', price: 98 },
];

// 构建选择器
const selectedRule = ['800\\*800', '抛釉', '浅灰']; 

function matchSku(ruleParts) {
  const reg = new RegExp(ruleParts.join('|'));
  return skus.find(sku => reg.test(sku.rule));
}

// 选择时 O(1) 或 O(N) 但极快
const targetSku = matchSku(selectedRule);

✅ 第二阶段：非标参数表的“外科手术”

💥 痛点：一行一个样

| 参数名 | 参数值 |
|-------|--------|
| 吸水率 | ≤0.5% |
| 抗压强度 | ≥35MPa |
| 甲醛释放量 | E0级 |

✅ 解决方案：Canvas 绘制参数表（备选方案）

// 仅在滚动到可视区时绘制
const canvas = document.getElementById('param-canvas');
const ctx = canvas.getContext('2d');

function drawParams(params) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  params.forEach((p, i) => {
    ctx.fillText(`${p.name}: ${p.value}`, 10, 30 * (i + 1));
  });
}

✅ 第三阶段：装修大图的“按需解码”

💥 痛点：首屏加载 5 张 500KB 大图

✅ 优化策略：低质量占位 + 渐进加载

<!-- 超小尺寸模糊占位 -->
<img 
  src="placeholder-20x20.jpg"
  data-src="real-large-image.webp"
  width="800"
  height="600"
  decoding="async"
  class="lazy"
/>

// 滚动到附近再加载大图
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 此时才开始解码大图
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' }); // 提前 200px 加载

✅ 第四阶段：装修案例的“相邻加载”

💥 痛点：底部“同款装修案例”有上百张图

✅ 解决方案：类似 Google Photos

let currentIndex = 0;
const CASE_LOAD_RANGE = 3; // 前后各加载 3 张

function loadVisibleCases(index) {
  for (let i = index - CASE_LOAD_RANGE; i <= index + CASE_LOAD_RANGE; i++) {
    if (cases[i] && !cases[i].loaded) {
      cases[i].img.src = cases[i].url;
      cases[i].loaded = true;
    }
  }
}

// 监听滚动或手势
caseContainer.onscroll = (e) => {
  const newIndex = Math.floor(e.target.scrollLeft / ITEM_WIDTH);
  loadVisibleCases(newIndex);
};

四、性能监控指标（建材行业标准）

五、最终优化成果

六、面试高频追问（建材网风格）

Q：建材 SKU 和服装 SKU 最大的区别是什么？

• 服装 SKU 通常是有限的枚举（颜色/尺码）；

• 建材 SKU 是无限组合（尺寸/工艺/等级/产地），必须用规则引擎或正则解决，不能用普通 Map。

Q：为什么参数表要用 Canvas？

• 建材参数没有统一 Schema，DOM 结构难以抽象；

• 数据量大时，Canvas 的绘制性能远超 DOM 回流。

Q：装修案例图为什么不用虚拟列表？

• 装修案例通常是横向滑动或瀑布流；

• 用户有“扫视”行为，虚拟列表的滚动监听会有延迟，采用“相邻加载”体验更好。

七、总结一句话

建材网的性能优化核心在于：用“规则压缩”对抗“参数爆炸”，用“按需解码”消化“图片洪流”。