爱企查的商品详情页（企业详情页）前端性能优化，核心挑战在于数据量大、接口多、页面结构复杂。以下是一套实战优化方案，涵盖从问题诊断到具体落地的全流程：
一、性能瓶颈诊断
- 核心痛点
• 数据维度多：工商信息、股东、风险、知识产权、经营状况等数十个模块
接口分散：每个模块可能对应独立接口，导致请求瀑布流
• 首屏阻塞：关键工商信息未优先展示，用户等待感强渲染压力大：复杂表格、树形结构（如股权穿透）导致 DOM 庞大
- 性能基线（以中端手机 4G 网络为例）
指标 优化前
FCP（首次内容绘制） 2.1s
LCP（最大内容绘制） 4.8s（企业 logo/名称）
TTI（可交互时间） 5.5s
接口请求数 15+
页面总资源 3.2MB
二、分层优化实战
✅ 第一阶段：数据加载“外科手术”
- 接口合并与优先级调度
// 错误示例：串行请求
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);
}
- 数据缓存策略
// 使用 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() });
}
✅ 第二阶段：渲染性能“精准减负”
- 虚拟滚动处理长列表
- 股权穿透图懒加载
// 初始只渲染第一层股权结构
function renderEquityTree(rootNode) {
renderNode(rootNode);
// 子节点点击时再展开
rootNode.onClick = () => {
if (!rootNode.childrenLoaded) {
fetchChildren(rootNode.id).then(children => {
rootNode.children = children;
renderChildren(rootNode);
});
}
};
}
- 表格虚拟化
// 针对大型表格（如分支机构、变更记录）
import { useVirtualTable } from '@/hooks/useVirtualTable';
const { visibleData, scrollTo } = useVirtualTable({
data: branchList,
rowHeight: 48,
viewportHeight: 400
});
✅ 第三阶段：资源加载“极速瘦身”
- 图片优化
- 代码分割
// 路由级分割
{
path: '/company/:id',
component: () => import(/ webpackChunkName: "company-detail" / './CompanyDetail.vue')
}
// 组件级分割
const RiskAnalysis = () => import(/ webpackPrefetch: true / './RiskAnalysis.vue');
- 第三方库按需加载
// 仅当使用图表时才加载 ECharts
let echarts = null;
async function renderChart() {
if (!echarts) {
echarts = await import('echarts');
}
// 渲染图表
}
✅ 第四阶段：网络层“加速通道”
- 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;
}
}
- 接口预连接
- 请求去重
// 防止同一企业 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);
}
}
三、性能监控体系
- 关键指标埋点
// 使用 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);
- 异常监控
// 资源加载失败监控
window.addEventListener('error', (e) => {
if (e.target.tagName === 'IMG') {
reportError('image_load_failed', { src: e.target.src });
}
}, true);
四、优化效果对比
指标 优化前 优化后 提升
FCP 2.1s 0.8s ⬆️ 62%
LCP 4.8s 1.5s ⬆️ 69%
TTI 5.5s 2.2s ⬆️ 60%
接口请求数 15+ 8 ⬇️ 47%
页面总资源 3.2MB 1.4MB ⬇️ 56%
五、面试高频追问
Q：爱企查的“股权穿透图”为什么容易卡顿？如何优化？
✅ 答：
• 卡顿原因：树形结构深度可能达 5-6 层，每层节点数多，全量渲染导致 DOM 爆炸
• 优化方案：
- 初始只渲染第一层，点击节点时动态加载子节点
- 使用 Canvas 或 SVG 替代 DOM 渲染（适合超大规模图谱）
- 虚拟滚动 + 节点折叠，控制同时渲染的节点数在 200 以内
Q：如何处理企业风险信息的实时性要求？
✅ 答：
• 风险信息分为两类：
- 静态风险（如历史被执行人）：缓存 24 小时
- 动态风险（如最新开庭公告）：每次请求都获取最新，但使用 stale-while-revalidate 策略：先展示缓存，后台更新，更新后无感刷新
Q：B端查询平台与C端电商平台性能优化的核心差异？
✅ 答：
• 数据特性：B端数据维度多、关联复杂，需重点优化接口聚合与数据缓存
• 用户行为：B端用户容忍度稍高，但要求数据准确性，需平衡缓存策略
• 交互复杂度：B端多表格、树形结构，需重点优化大型数据集渲染
六、总结
爱企查性能优化的核心逻辑：
用“接口聚合”解决数据分散，用“虚拟渲染”解决 DOM 爆炸，用“智能缓存”平衡实时性与速度。
以上是我在电商 中台领域的一些实践，目前我正在这个方向进行更深入的探索/提供相关咨询与解决方案。如果你的团队有类似的技术挑战或合作需求，欢迎通过[我的GitHub/个人网站/邮箱]与我联系
