🧪 《化工网商品详情页前端性能优化实战》

背景：化工网（如摩贝、盖德化工网）的商品详情页，是“数据密度之王”。这里没有华丽的图片，只有海量的 CAS 号、分子式、理化性质。核心挑战在于：“如何在 1 秒内渲染 200+ 行化学参数？”

一、化工网的“数据窒息”挑战

FCP: 1.5s
LCP: 2.0s (其实是文字，但 DOM 太多)
TTI: 5.5s (主线程被长列表阻塞)

二、优化总纲：数据“分而治之”

┌────────────────────────────┐
│  1. 参数表虚拟化（终极版）   │ ← 解决 200+ 行 DOM 噩梦
├────────────────────────────┤
│  2. 化学式 Canvas/SVG 渲染 │ ← 避免 HTML 字符碎片
├────────────────────────────┤
│  3. SDS 文档按需加载        │ ← 默认只展示摘要
├────────────────────────────┤
│  4. 同义词折叠与搜索        │ ← 减少首屏文本量
├────────────────────────────┤
│  5. 内网预连接加速          │ ← Preconnect + Prefetch
└────────────────────────────┘

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

✅ 第一阶段：参数表的“外科手术”（虚拟化）

💥 痛点：200 行参数 = 600+ DOM 节点

<tr><td>沸点</td><td>337.9℃</td></tr>
<tr><td>熔点</td><td>-114.1℃</td></tr>
...

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

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

const Row = ({ index, style }) => (
  <div style={style} className="chem-row">
    <span>{params[index].name}</span>
    <span>{params[index].value}</span>
  </div>
);

<List
  height={500}
  itemCount={params.length} // 200+
  itemSize={index => params[index].name.includes('描述') ? 80 : 40}
  width="100%"
>
  {Row}
</List>

✅ 第二阶段：化学式的“零抖动”渲染

💥 痛点：HTML 下标渲染抖动

H<sub>2</sub>SO<sub>4</sub> <!-- 布局抖动 -->

✅ 方案 A：SVG 渲染（高精度）

function ChemicalFormula({ formula }) {
  return (
    <svg viewBox="0 0 200 50">
      <text x="0" y="30">H</text>
      <text x="15" y="35" fontSize="12">2</text>
      <text x="25" y="30">SO</text>
      <text x="55" y="35" fontSize="12">4</text>
    </svg>
  );
}

✅ 方案 B：CSS 统一控制（更轻量）

.sub { vertical-align: sub; font-size: .7em; }

H<span class="sub">2</span>SO<span class="sub">4</span>

✅ 第三阶段：SDS（安全数据表）的“惰性战争”

💥 痛点：SDS 表格长达 16 个章节

✅ 按需加载（Accordion + Lazy）

const [activeSection, setActiveSection] = useState(null);

<Accordion>
  {sdsSections.map(section => (
    <AccordionItem
      key={section.id}
      title={section.title}
      active={activeSection === section.id}
      onClick={() => setActiveSection(section.id)}
    >
      {activeSection === section.id && (
        <Suspense fallback={<div>Loading...</div>}>
          <SdsContent id={section.id} />
        </Suspense>
      )}
    </AccordionItem>
  ))}
</Accordion>

✅ 第四阶段：同义词的“折叠艺术”

💥 痛点：别名显示 50 个，撑爆页面

别名：苯甲醇,苄醇,α-羟基甲苯,苯甲酰甲醇...

✅ 折叠 + 搜索

const [showAllAlias, setShowAllAlias] = useState(false);
const visibleAliases = showAllAlias ? aliases : aliases.slice(0, 5);

<>
  {visibleAliases.join(', ')}
  {!showAllAlias && aliases.length > 5 && (
    <button onClick={() => setShowAllAlias(true)}>+{aliases.length - 5} 更多</button>
  )}
</>

✅ 第五阶段：化工厂内网专项加速

1️⃣ Preconnect 是生命线

<link rel="preconnect" href="https://cdn.cheman.com" crossorigin>
<link rel="dns-prefetch" href="https://api.cheman.com">

2️⃣ 强缓存化学数据

Cache-Control: public, max-age=2592000, stale-while-revalidate=86400

四、性能监控指标（化工行业）

五、最终优化成果

六、面试高频追问（化工网风格）

Q：化工参数表为什么不用普通 table？

• table 会一次性渲染所有 DOM；

• 化工参数行数太多，必须用虚拟列表；

• table 布局在动态高度下性能极差。

Q：化学式为什么不用图片？

• 图片放大模糊；

• 无法选中/复制；

• SVG/CSS 是矢量，清晰且轻量。

Q：化工厂内网最重要的优化是什么？

• Preconnect，因为 DNS 和内网 TLS 握手非常慢；

• 减少 HTTPS 请求数。

七、总结一句话

化工网的性能优化核心在于：用“虚拟化”对抗“数据密度”，用“矢量渲染”消化“化学复杂度”。