📺 《哔哩哔哩（B站）商品详情页前端性能优化实战》

背景：B 站作为 “Z 世代精神家园 + 会员购” 的核心阵地，其商品详情页（PDP）是 “内容深度 + 二次元文化 + 高互动” 的复杂集合体。

核心挑战：如何在承载大量 ACG 内容（视频、长图、弹幕）的同时，保证“会员购”的流畅交易体验？ 本次优化目标：在 B 站 App 内实现“内容 0 卡顿、购买 0 延迟”。

一、B 站的“次元壁”挑战

FCP: 1.8s
LCP: 4.5s (主图视频/动图)
TTI: 4.2s (弹幕/评论加载)
滚动 FPS: 35 (严重掉帧)

二、优化总纲：打破“次元壁”

┌────────────────────────────┐
│  1. 主视觉“智能降级”      │ ← 视频/动图/静态图的分级策略
├────────────────────────────┤
│  2. 弹幕与评论“虚拟化”    │ ← 解决万级 DOM 节点
├────────────────────────────┤
│  3. B 站 App “原生加速”   │ ← 利用 JSSDK 预加载
├────────────────────────────┤
│  4. 预售倒计时“精准渲染”  │ ← requestAnimationFrame
└────────────────────────────┘

三、关键优化实战（含二次元代码）

✅ 第一阶段：主视觉的“智能降维”

💥 痛点：首屏是视频，低端机直接卡死

❌ 错误方式

<!-- GIF 动图，体积巨大且无视设备性能 -->
<img src="figure-demo.gif" />

<!-- 自动播放视频，抢占主线程 -->
<video src="promo.mp4" autoplay muted></video>

✅ B 站解法：设备分级 + 资源映射

function getBilibiliDeviceTier() {
  const ua = navigator.userAgent;
  const memory = navigator.deviceMemory || 4;
  const isIOS = /iPhone|iPad/i.test(ua);
  const isHighEndAndroid = /Android/i.test(ua) && memory >= 6;

  if (isIOS || isHighEndAndroid) return 'high';
  if (memory >= 4) return 'medium';
  return 'low';
}

// 根据等级加载不同资源
const tier = getBilibiliDeviceTier();
const mainVisual = document.getElementById('main-visual');

if (tier === 'high') {
  mainVisual.innerHTML = '<video src="video.mp4" autoplay muted loop playsinline></video>';
} else if (tier === 'medium') {
  mainVisual.innerHTML = '<img src="animation.webp" loading="eager">'; // WebP 动图
} else {
  mainVisual.innerHTML = '<img src="static-poster.jpg" loading="eager">'; // 静态兜底
}

✅ 第二阶段：弹幕与评论的“外科手术”

💥 痛点：评论区“盖楼”导致 DOM 节点爆炸

✅ 解决方案：react-window + 内容冻结

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

// 评论区虚拟滚动
const CommentList = ({ comments }) => (
  <List
    height={window.innerHeight * 0.6}
    itemCount={comments.length}
    itemSize={index => comments[index].content.length > 100 ? 120 : 80}
    width="100%"
  >
    {({ index, style }) => (
      <div style={style} className="comment-item">
        <CommentContent data={comments[index]} />
      </div>
    )}
  </List>
);

✅ 第三阶段：B 站 App “原生加速”

💥 痛点：App 内跳转 WebView 冷启动慢

✅ 解决方案：Bilibili JSSDK 预加载

<script src="https://s1.hdslb.com/bfs/seed/jsbbridge.js"></script>

// 在用户浏览列表页时，提前告知 App 预加载资源
if (window.BiliApp) {
  BiliApp.preloadResources({
    urls: [
      'https://api.bilibili.com/mall/product/detail',
      'https://i0.hdslb.com/bfs/mall/poster.jpg'
    ],
    type: 'webview' // 指定预加载到 WebView 环境
  });
}

✅ 第四阶段：预售倒计时的“丝滑跳动”

💥 痛点：倒计时每秒更新导致重排

setInterval(() => {
  // 直接操作 DOM，每秒导致一次回流
  document.getElementById('countdown').innerText = new Date().toLocaleTimeString();
}, 1000);

✅ 解决方案：RAF + 文本节点更新

let lastText = '';
function updateCountdown() {
  const now = new Date();
  const text = formatCountdown(now);
  
  // 只有文本变化时才更新 DOM
  if (text !== lastText) {
    const el = document.getElementById('countdown');
    el.firstChild.nodeValue = text; // 更新文本节点性能最好
    lastText = text;
  }
  requestAnimationFrame(updateCountdown);
}
requestAnimationFrame(updateCountdown);

四、性能监控指标（B 站标准）

五、最终优化成果

六、面试高频追问（B 站/二次元风格）

Q：B 站商品页和普通电商最大的不同？

• 内容权重极高：商品本身是内容（视频、动图），而不仅是图片。

• 社区氛围：评论区、弹幕是页面的一部分，需要极高的交互性能。

• 用户挑剔：Z 世代对卡顿、掉帧的容忍度为零。

Q：如何处理 GIF/WebP 动图性能问题？

• 绝不默认自动播放 GIF，因为它不可控且消耗巨大。

• 使用 设备分级，高端机用视频/WebP，低端机强制降级为静态 JPG。

• 使用 <picture>标签提供多种格式选择。

Q：为什么要用 nodeValue更新倒计时？

• 修改 innerText或 innerHTML会触发整个元素的重排和重绘。

• 修改 文本节点的 nodeValue 是成本最低的 DOM 更新方式，配合 requestAnimationFrame可达到 60fps。

七、总结一句话

B 站的性能优化核心在于：用“设备分级”平衡“视觉盛宴”，用“虚拟化”消化“社区狂欢”。