《爱企查商品详情页前端性能优化实战》

一、性能瓶颈诊断

1. 核心痛点

• 数据维度多：工商信息、股东、风险、知识产权、经营状况等数十个模块

• 接口分散：每个模块可能对应独立接口，导致请求瀑布流

• 首屏阻塞：关键工商信息未优先展示，用户等待感强

• 渲染压力大：复杂表格、树形结构（如股权穿透）导致 DOM 庞大

2. 性能基线（以中端手机 4G 网络为例）

二、分层优化实战

✅ 第一阶段：数据加载“外科手术”

1. 接口合并与优先级调度

// 错误示例：串行请求
async function loadPage() {
  await fetchBaseInfo();   // 工商信息
  await fetchShareholders(); // 股东
  await fetchRisks();      // 风险信息
  // ... 用户需等待所有接口完成
}

// ✅ 正确做法：关键接口优先 + 非关键并行
async function loadPage() {
  // 1. 优先加载核心工商信息（阻塞渲染）
  const baseInfo = await fetchBaseInfo();
  renderBaseInfo(baseInfo); // 立即渲染
  // 2. 非关键数据并行加载
  Promise.all([
    fetchShareholders(),
    fetchRisks(),
    fetchIntellectualProperty()
  ]).then(renderSecondaryModules);
}

2. 数据缓存策略

// 使用 IndexedDB 缓存企业基础信息（变动频率低）
const CACHE_KEY = `company_base_${id}`;
const cached = await idb.get(CACHE_KEY);
if (cached && Date.now() - cached.timestamp < 3600000) { // 1小时有效
  renderBaseInfo(cached.data);
} else {
  const fresh = await fetchBaseInfo();
  renderBaseInfo(fresh);
  idb.set(CACHE_KEY, { data: fresh, timestamp: Date.now() });
}

✅ 第二阶段：渲染性能“精准减负”

1. 虚拟滚动处理长列表

<!-- 股东列表可能上百条 -->
<VirtualScroller
  :items="shareholders"
  :item-height="60"
  :visible-count="10"
>
  <template #default="{ item }">
    <div class="shareholder-row">
      <span>{{ item.name }}</span>
      <span>{{ item.ratio }}%</span>
    </div>
  </template>
</VirtualScroller>

2. 股权穿透图懒加载

// 初始只渲染第一层股权结构
function renderEquityTree(rootNode) {
  renderNode(rootNode);
  // 子节点点击时再展开
  rootNode.onClick = () => {
    if (!rootNode.childrenLoaded) {
      fetchChildren(rootNode.id).then(children => {
        rootNode.children = children;
        renderChildren(rootNode);
      });
    }
  };
}

3. 表格虚拟化

// 针对大型表格（如分支机构、变更记录）
import { useVirtualTable } from '@/hooks/useVirtualTable';

const { visibleData, scrollTo } = useVirtualTable({
  data: branchList,
  rowHeight: 48,
  viewportHeight: 400
});

✅ 第三阶段：资源加载“极速瘦身”

1. 图片优化

<!-- 企业 logo 使用 WebP + 懒加载 -->
<picture>
  <source srcset="logo.webp" type="image/webp">
  <img 
    src="logo.png" 
    loading="lazy" 
    width="120" 
    height="120"
    alt="企业 logo"
  >
</picture>

2. 代码分割

// 路由级分割
{
  path: '/company/:id',
  component: () => import(/* webpackChunkName: "company-detail" */ './CompanyDetail.vue')
}

// 组件级分割
const RiskAnalysis = () => import(/* webpackPrefetch: true */ './RiskAnalysis.vue');

3. 第三方库按需加载

// 仅当使用图表时才加载 ECharts
let echarts = null;
async function renderChart() {
  if (!echarts) {
    echarts = await import('echarts');
  }
  // 渲染图表
}

✅ 第四阶段：网络层“加速通道”

1. HTTP/2 + 服务端推送

# Nginx 配置
server {
  listen 443 ssl http2;
  # 推送关键 CSS/JS
  location = /company/123 {
    http2_push /static/css/detail.css;
    http2_push /static/js/base.js;
  }
}

2. 接口预连接

<!-- 提前建立 API 连接 -->
<link rel="preconnect" href="https://api.aichacha.com">
<link rel="dns-prefetch" href="https://api.aichacha.com">

3. 请求去重

// 防止同一企业 ID 重复请求
const pendingRequests = new Map();

async function fetchCompany(id) {
  if (pendingRequests.has(id)) {
    return pendingRequests.get(id);
  }
  const promise = axios.get(`/company/${id}`);
  pendingRequests.set(id, promise);
  try {
    const res = await promise;
    return res;
  } finally {
    pendingRequests.delete(id);
  }
}

三、性能监控体系

1. 关键指标埋点

// 使用 Performance API 采集
const perfData = {
  fcp: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,
  lcp: new Promise(resolve => {
    new PerformanceObserver((list) => {
      resolve(list.getEntries().pop().startTime);
    }).observe({ entryTypes: ['largest-contentful-paint'] });
  }),
  apiCount: performance.getEntriesByType('resource')
    .filter(r => r.initiatorType === 'fetch').length
};

// 上报
axios.post('/log/perf', perfData);

2. 异常监控

// 资源加载失败监控
window.addEventListener('error', (e) => {
  if (e.target.tagName === 'IMG') {
    reportError('image_load_failed', { src: e.target.src });
  }
}, true);

四、优化效果对比

五、面试高频追问

Q：爱企查的“股权穿透图”为什么容易卡顿？如何优化？

• 卡顿原因：树形结构深度可能达 5-6 层，每层节点数多，全量渲染导致 DOM 爆炸

• 优化方案：

1. 初始只渲染第一层，点击节点时动态加载子节点

2. 使用 Canvas 或 SVG 替代 DOM 渲染（适合超大规模图谱）

3. 虚拟滚动 + 节点折叠，控制同时渲染的节点数在 200 以内

Q：如何处理企业风险信息的实时性要求？

• 风险信息分为两类：

1. 静态风险（如历史被执行人）：缓存 24 小时

2. 动态风险（如最新开庭公告）：每次请求都获取最新，但使用 stale-while-revalidate策略：先展示缓存，后台更新，更新后无感刷新

Q：B端查询平台与C端电商平台性能优化的核心差异？

• 数据特性：B端数据维度多、关联复杂，需重点优化接口聚合与数据缓存

• 用户行为：B端用户容忍度稍高，但要求数据准确性，需平衡缓存策略

• 交互复杂度：B端多表格、树形结构，需重点优化大型数据集渲染

六、总结

爱企查性能优化的核心逻辑：

用“接口聚合”解决数据分散，用“虚拟渲染”解决 DOM 爆炸，用“智能缓存”平衡实时性与速度。