如何继续优化

做了缓存、CDN、减小包的体积后，从原来的20s提升到1.8s打开页面后，怎么继续优化这1.8s呢？

第 0 步：定位瓶颈（绝对要做，否则优化是瞎打）

工具：
● Chrome Performance
● Lighthouse
● WebPageTest
● Performance → Main Thread flamechart
● Coverage（查看未使用 JS/CSS）

目标：
确定 20 秒卡在哪里：

瓶颈类型 症状
资源请求慢 TTFB 高、多个长耗时请求
JS 执行太重 Main Thread 长时间紫色/黄色占满
渲染太重 Layout / Paint 占用大、DOM 数量 > 2000
第三方库超重 bundler 分析显示某库 > 1MB
接口链路慢 多个接口串行、接口慢

→ 输出性能画像（这一步让你在汇报 + 面试里非常加分）。

第 1 阶段：首屏瘦身（把 20 秒变 5 秒）

目标：首屏只加载能让用户“看到内容的最少东西”

1.1 拆分首屏渲染（最核心）

只渲染可见区域，不加载不展示的模块。

React 示例：

1
2
3
4
const HeavyChart = lazy(() => import('./Chart'));
<Suspense fallback={<Skeleton/>}>
  <HeavyChart />
</Suspense>

1.2 删除“一次性初始化大量东西”的行为

冷启动最常见的罪魁祸首：
注册所有路由
加载所有语言包
初始化图表 SDK
初始化地图
初始化权限树
IM、监控 SDK 启动在主线程前
全部换成：
用户点击时加载
进入对应路由时加载
空壳渲染 → 内容延迟加载
能减少 40% JS 执行时间。

第 2 阶段：JS 执行链路优化（把 5 秒变 2 秒）

2.1 第三方库“瘦身 + 拆分”

最有效的优化之一。

库 优化方式
lodash 换成 lodash-es + tree-shaking 或 lodash/fp
moment 换 dayjs
echarts 按需引入 + 动态 import
mapbox/cesium 延迟初始化
monaco-editor 拆分 + 动态加载

例子（按需引入 echarts）：

1
import('echarts/core').then(...)

2.2 预加载（只有首屏必须的资源做）

1
2
<link rel="preload" href="/core.js" as="script">
<link rel="prefetch" href="/chart.js">

第 3 阶段：接口链路优化（把 2 秒 → 1 秒）

3.1 把“首屏的接口”压缩到1~2 个

这是大杀器。
一进入页面要请求 10 个接口
拆成：必要的 1 个（用户信息 + 基础数据）

其余的全部：

1
Promise.allSettled([ fetchA(), fetchB(), fetchC() ])

并发加载，不阻塞渲染。

3.2 接口合并 / Gzip / JSON 压缩

JSON 从 500KB 压到 50KB → 直接减少 0.5 秒

第 4 阶段：渲染流程优化（把渲染时间减掉 30%-70%）

4.1 虚拟列表（List / Table / 大屏点位）

如果渲染超过 1000+ DOM，必使用虚拟列表。
如：
● react-window
● react-virtualized
● vue-virtual-scroll-list

4.2 工作线程（Web Worker）

把 CPU 密集处理移出主线程：
● JSON 大数据预处理
● 加密
● excel 解析
● 大图压缩

第 5 阶段：架构级优化（真正端到端拔高）

5.1 SSR / SSG

直接把冷启动变成“立即可见”。

例如：
● Next.js（React）
● Nuxt（Vue）
● Remix（全 SSR）
● React Server Component（RSC）
效果：
冷启动等 JS
用户先看到 HTML，再渐进水合
冷启动可从 20 秒 → 1 秒以内。

第 6 阶段：长期可持续优化体系（面试 + 年度复盘必提）

6.1自动化性能监控

● Sentry Performance
● Lighthouse CI
● SpeedCurve
● RUM（Real User Monitoring）

6.2 性能指标体系（你要能说出的专业指标）

● TTFB
● FP
● FCP
● LCP
● TTI
● CLS
● JS Load/Exec Time
● Long Tasks
面试官会直接认为你是 懂性能体系化的人。

最终落地成果

通过首屏瘦身、JS 链路拆分、接口并发、第三方库按需、SSR/SSG、渲染异步化等策略，让冷启动从 20 秒降低到 3 秒，热启动保持在 1 秒级。