SPA应用性能优化全流程

理解SPA性能瓶颈

单页应用（SPA）的核心性能问题通常集中在首次加载速度、运行时响应性和资源管理三个方面。首次加载时，打包后的JavaScript文件体积过大直接导致白屏时间延长。例如，一个未经优化的React项目主包可能达到2MB以上：

// webpack配置示例
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

运行时性能问题常出现在频繁的DOM操作和状态更新中。Vue应用中不当使用v-for可能导致大量不必要的渲染：

<!-- 反例：未设置key的列表渲染 -->
<div v-for="item in items">
  {{ item.text }}
</div>

构建阶段优化

代码分割（Code Splitting）是减小初始加载体积的有效手段。Webpack的动态导入语法可以将模块分离到不同chunk：

// 动态导入组件
const ProductList = () => import('./components/ProductList.vue');

Tree Shaking通过静态分析移除未引用代码。确保package.json中设置"sideEffects": false并配置Babel保留ES模块：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { modules: false }]
  ]
};

压缩资源时采用现代算法如Brotli：

// vite.config.js
export default {
  build: {
    brotliSize: true,
  }
}

运行时性能提升

虚拟滚动技术解决长列表渲染问题。React中使用react-window示例：

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

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List height={600} itemCount={1000} itemSize={35} width={300}>
    {Row}
  </List>
);

防抖节流控制高频事件，比如搜索输入：

// Lodash实现防抖
import { debounce } from 'lodash';

const handleSearch = debounce((query) => {
  fetchResults(query);
}, 300);

缓存策略设计

Service Worker实现离线缓存：

// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/main.css'
      ]);
    })
  );
});

HTTP缓存头设置最佳实践：

# Nginx配置
location /static {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

监控与持续优化

使用Performance API测量关键指标：

// 测量FP时间
const perfObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('FP:', entry.startTime);
  }
});
perfObserver.observe({ type: 'paint', buffered: true });

自定义指标上报：

// 组件挂载耗时统计
export default {
  mounted() {
    this.$perfStart = performance.now();
  },
  beforeDestroy() {
    const duration = performance.now() - this.$perfStart;
    trackComponentLifecycle('ProductDetail', duration);
  }
}

框架特定优化技巧

React组件优化示例：

// 使用React.memo避免不必要渲染
const MemoizedComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

// 使用useMemo缓存计算结果
const computedValue = useMemo(() => expensiveCalculation(input), [input]);

Vue的标记静态节点：

<template>
  <div>
    <!-- 静态内容标记 -->
    <div v-once>Copyright {{ year }}</div>
    <!-- 动态内容 -->
    <div>{{ dynamicContent }}</div>
  </div>
</template>

网络层优化实践

预加载关键资源：

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.js" as="script">

HTTP/2服务器推送配置：

# Apache配置
<FilesMatch "bundle\.js$">
  Header set Link "</bundle.js>; rel=preload; as=script"
</FilesMatch>

内存管理策略

避免内存泄漏的常见模式：

// 清除事件监听
useEffect(() => {
  const handleResize = () => {/*...*/};
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// 定时器清理
useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  return () => clearInterval(timer);
}, []);

渲染性能调优

CSS containment优化渲染：

.product-list {
  contain: strict;
}

强制GPU加速的恰当方式：

.animation-layer {
  will-change: transform;
  transform: translateZ(0);
}

移动端专项优化

触摸事件优化处理：

// 禁用双击缩放
document.addEventListener('dblclick', (e) => {
  e.preventDefault();
}, { passive: false });

// 使用touch-action控制默认行为
element.style.touchAction = 'pan-y';

针对低速网络的降级方案：

// 检测网络状态
const connection = navigator.connection || navigator.mozConnection;
if (connection.effectiveType === '2g') {
  loadLiteVersion();
}