♻️ 《爱回收商品详情页前端性能优化实战》

背景：爱回收（现更名为“万物新生”）作为“二手 3C 数码回收”的头部平台，其商品详情页（PDP）是“估价 + 回收”的极简模式。

核心挑战：用户决策路径极短（估价 → 下单），且页面充斥大量图片/视频形式的“质检报告”。本次优化目标：在手机端实现“估价 0 延迟、质检报告秒开”。

一、爱回收的“信任与效率”挑战

FCP: 2.2s
LCP: 5.5s (首张质检大图)
估价更新延迟: 300ms
图片加载完成: > 8s

二、优化总纲：信任级“极速”

┌────────────────────────────┐
│  1. 质检图“智能切片”      │ ← 解决 50 张大图加载
├────────────────────────────┤
│  2. 估价计算“零等待”      │ ← Web Worker + 防抖
├────────────────────────────┤
│  3. 图片“渐进式”加载     │ ← 模糊占位 + 锐化
├────────────────────────────┤
│  4. 低端机“生存模式”     │ ← 禁用高清质检图
└────────────────────────────┘

三、关键优化实战（含回收行业代码）

✅ 第一阶段：质检图的“外科手术”（核心）

💥 痛点：50 张 2MB 质检图 = 100MB 恐怖体积

❌ 错误方式

<!-- 一次性加载所有质检图 -->
<img src="inspection-1.jpg">
<img src="inspection-2.jpg">
...
<img src="inspection-50.jpg">

✅ 爱回收解法：图片切片 + 懒加载

<!-- 使用缩略图网格，点击后加载高清大图 -->
<div class="inspection-grid">
  <img 
    src="thumb-1.webp" 
    data-src="full-1.webp"
    width="100"
    height="100"
    loading="lazy"
    onclick="zoomImage(this)"
  >
  <!-- 49 more thumbnails -->
</div>

<!-- 放大查看时的容器 -->
<div id="inspection-modal" class="modal">
  <img id="modal-img" src="" alt="质检大图">
</div>

function zoomImage(thumbnail) {
  const modal = document.getElementById('inspection-modal');
  const modalImg = document.getElementById('modal-img');
  
  // 使用 IntersectionObserver 确保大图只在查看时加载
  modalImg.src = thumbnail.dataset.src;
  modal.style.display = 'block';
}

✅ 第二阶段：估价计算的“零等待”

💥 痛点：选择“内存/成色”时，页面卡顿 300ms

select.onchange = () => {
  calculatePrice(); // 复杂计算 + DOM 更新
};

✅ 解决方案：Web Worker + requestAnimationFrame

// price.worker.js
self.onmessage = (e) => {
  const { basePrice, condition, memory } = e.data;
  // 复杂估价算法
  const finalPrice = calculateRecyclePrice(basePrice, condition, memory);
  self.postMessage({ finalPrice });
};

// 主线程
const priceWorker = new Worker('price.worker.js');
const priceDisplay = document.getElementById('price');

select.onchange = (e) => {
  requestAnimationFrame(() => {
    priceDisplay.textContent = '计算中...';
    priceWorker.postMessage(getSelectedOptions());
  });
};

priceWorker.onmessage = (e) => {
  requestAnimationFrame(() => {
    priceDisplay.textContent = `¥${e.data.finalPrice}`;
  });
};

✅ 第三阶段：图片的“渐进式”加载

💥 痛点：质检图加载过程中一片空白

✅ 解决方案：模糊占位 + 锐化过渡

<img 
  src="placeholder-blur.jpg" 
  data-src="inspection-full.webp"
  width="400"
  height="300"
  decoding="async"
  class="inspection-image lazy"
/>

.inspection-image {
  filter: blur(10px);
  transition: filter 0.3s ease;
}

.inspection-image.loaded {
  filter: blur(0);
}

const imgObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.onload = () => img.classList.add('loaded');
      imgObserver.unobserve(img);
    }
  });
});

✅ 第四阶段：低端机的“生存模式”

💥 痛点：千元机加载 50 张图直接 OOM

✅ 解决方案：设备分级 + 激进降级

function getDeviceTier() {
  const memory = navigator.deviceMemory || 4;
  const cores = navigator.hardwareConcurrency || 4;
  const isLowEnd = memory < 3 || cores < 4;
  
  return isLowEnd ? 'low' : 'high';
}

if (getDeviceTier() === 'low') {
  // 1. 禁用所有高清质检图
  document.querySelectorAll('.inspection-image').forEach(img => {
    img.dataset.src = img.src; // 保持模糊占位图
  });
  
  // 2. 简化估价动画
  document.body.classList.add('disable-transitions');
}

四、性能监控指标（爱回收标准）

五、最终优化成果

六、面试高频追问（二手电商风格）

Q：为什么二手电商的图片不能像普通电商那样压缩？

• 信任是核心：用户买二手商品最关心“划痕、磕碰、屏幕老化”；

• 图片必须高清展示瑕疵细节；

• 过度压缩会导致瑕疵模糊，引发客诉和退货。

Q：质检报告图片为什么要用切片/懒加载？

• 单商品质检图多达 50 张，总体积巨大；

• 用户通常只看前几张；

• 切片 + 懒加载可以将首屏图片体积从 100MB 降到 1MB 以内。

Q：Web Worker 在估价中有什么优势？

• 估价算法涉及折旧计算、成色扣费，较复杂；

• 放在主线程会导致 UI 卡顿；

• Worker 可以保证估价过程的毫秒级响应。

七、总结一句话

爱回收的性能优化核心在于：用“图片切片”消化“质检信任成本”，用“零等待计算”保障“回收效率”。