🐟 《闲鱼商品详情页前端性能优化实战》

背景：闲鱼作为 “C2C 闲置交易 + 信任经济” 的标杆，其商品详情页（PDP）是 “轻量化发布 + 即时聊天” 的产物。用户路径为：搜索/推荐 → 看详情 → 直接私聊/下单。

核心挑战：如何在“非标品”（每台手机/衣服状态都不同）和“强社交”（即时通讯）的双重压力下，保证页面的秒开和流畅？ 本次优化目标：在闲鱼 App 内实现“图片 0 抖动、聊天 0 延迟”。

一、闲鱼的“信任交易”挑战

FCP: 2.0s
LCP: 4.5s (卖家随意拍的大图)
IM 唤起延迟: 800ms
滚动 FPS: 35 (推荐流卡顿)

二、优化总纲：信任级“轻量化”

┌────────────────────────────┐
│  1. 非标图片“智能裁剪”   │ ← 解决任意尺寸图片的布局抖动
├────────────────────────────┤
│  2. IM “预连接”          │ ← 聊天通道秒级唤醒
├────────────────────────────┤
│  3. 推荐流“虚拟滚动”     │ ← 解决万级 DOM 节点
├────────────────────────────┤
│  4. 低端机“极简模式”     │ ← 禁用复杂布局和动画
└────────────────────────────┘

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

✅ 第一阶段：非标图片的“外科手术”

💥 痛点：卖家上传 1:1、4:3、16:9、竖屏乱七八糟的图片

<!-- 卖家上传了一张奇怪比例的图 -->
<img src="random-seller-image.jpg" />
<!-- 导致下方价格和按钮疯狂跳动 -->

✅ 解决方案：Aspect Ratio 容器 + Object-fit

/* 1. 统一图片容器比例（闲鱼常用 1:1 或 4:3） */
.image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 强制正方形占位 */
  background-color: #f5f5f5;
  overflow: hidden;
}

/* 2. 图片自适应填充，不变形 */
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 关键：保持比例，不裁剪 */
}

<div class="image-container">
  <img 
    src="placeholder-blur.jpg"
    data-src="seller-image.webp"
    loading="eager" <!-- 首图必须 eager -->
    decoding="async"
  />
</div>

✅ 第二阶段：IM 的“零延迟”唤醒

💥 痛点：点击“我想要”，IM 界面弹出慢 800ms

✅ 解决方案：WebView 预创建 + JS Bridge 预连接

// 1. 页面加载初期，预创建 IM WebView
if (window.FishJSBridge) {
  FishJSBridge.preCreateWebView({
    type: 'im',
    url: 'https://im.fish.com/placeholder'
  });
}

// 2. 点击按钮时直接唤起
document.getElementById('chat-button').addEventListener('click', async () => {
  const startTime = performance.now();
  
  // 3. 秒级唤醒
  await FishJSBridge.showWebView('im');
  
  console.log(`IM wake up time: ${performance.now() - startTime}ms`);
});

✅ 第三阶段：推荐流的“虚拟手术”

💥 痛点：“猜你喜欢”列表长达 100+ 项

// 错误示例：一次性渲染所有推荐商品
{recommendations.map(item => <RecommendCard key={item.id} data={item} />)}

✅ 解决方案：react-window + 不定高

import { VariableSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>
    <RecommendCard data={recommendations[index]} />
  </div>
);

<List
  height={window.innerHeight}
  itemCount={recommendations.length}
  itemSize={index => 180} // 闲鱼卡片高度相对固定
  width="100%"
>
  {Row}
</List>

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

💥 痛点：百元机渲染复杂 Flex 布局直接卡死

✅ 解决方案：设备分级 + 布局降级

function getFishDeviceTier() {
  const memory = navigator.deviceMemory || 2;
  const cores = navigator.hardwareConcurrency || 4;
  
  if (memory < 2 || cores < 4) return 'critical';
  if (memory < 4) return 'low';
  return 'high';
}

if (getFishDeviceTier() === 'critical') {
  // 1. 切换到纯文本布局
  document.body.classList.add('text-only-mode');
  
  // 2. 禁用所有图片懒加载动画
  document.querySelectorAll('img').forEach(img => {
    img.loading = 'eager'; // 避免 JS 控制的懒加载卡死
  });
}

四、性能监控指标（闲鱼标准）

五、最终优化成果

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

Q：闲鱼这种 C2C 平台和淘宝 B2C 在性能优化上最大的不同？

• 图片非标性：B2C 图片是标准化的，C2C 卖家上传的图片比例、质量极其混乱，必须用 aspect-ratio + object-fit强制约束。

• IM 权重极高：B2C 是“加购”，闲鱼是“聊天”，IM 的唤醒速度比页面加载更重要，需要预连接。

• 设备降级更激进：闲鱼用户设备更下沉，必须有 critical级别的降级方案。

Q：如何处理卖家上传的各种奇葩比例图片？

1. 容器定比：使用 aspect-ratio固定占位容器（如 1:1）。

2. 内容自适应：图片使用 object-fit: contain或 cover，避免变形。

3. 骨架屏：在图片加载前显示灰色占位，防止布局跳动。

Q：为什么 IM 要预创建 WebView？

• WebView 的创建和初始化（加载内核、JS 引擎）非常耗时（500ms+）。

• 预创建可以在这个“空窗期”提前完成这些工作，点击时只需 show，实现“秒开”。

七、总结一句话

闲鱼的性能优化核心在于：用“标准化容器”消化“非标内容”，用“预连接”保障“社交信任”的即时性。