知识库

Appearance

Return to top
On this page

性能优化最佳实践

性能优化是一个持续的过程，需要从多个维度综合考虑。本章总结了在Web开发中实施性能优化的最佳实践。

综合优化策略

性能优化清单

在项目开发过程中，遵循以下性能优化清单：

网络层面

  • 启用Gzip/Brotli压缩
  • 使用CDN加速静态资源
  • 实现资源预加载和预获取
  • 优化HTTP缓存策略
  • 启用HTTP/2

资源层面

  • 压缩和优化图片
  • 压缩CSS、JavaScript文件
  • 消除未使用的代码
  • 实现代码分割
  • 使用WebP格式图片

渲染层面

  • 减少关键渲染路径长度
  • 优化CSS和JavaScript加载顺序
  • 避免强制同步布局
  • 使用高效的动画技术
  • 优化DOM操作

性能预算

建立性能预算以控制性能指标：

javascript
// webpack性能预算配置
module.exports = {
  performance: {
    maxAssetSize: 250000, // 单个资源最大250KB
    maxEntrypointSize: 250000, // 入口文件最大250KB
    hints: 'warning'
  }
};

前端优化

JavaScript优化

代码分割

javascript
// 使用动态导入实现代码分割
const loadFeature = async () => {
  const { expensiveFeature } = await import('./expensive-feature');
  return expensiveFeature();
};

// 按路由分割
const HomePage = lazy(() => import('./HomePage'));
const AboutPage = lazy(() => import('./AboutPage'));

懒加载

javascript
// 图片懒加载
const LazyImage = ({ src, alt }) => {
  return (
    <img 
      src="placeholder.jpg" 
      data-src={src} 
      alt={alt}
      className="lazy-image"
    />
  );
};

CSS优化

关键CSS内联

html
<!DOCTYPE html>
<html>
<head>
  <!-- 内联关键CSS -->
  <style>
    .header { height: 60px; background: #fff; }
    .hero { min-height: 300px; }
  </style>
  
  <!-- 非关键CSS异步加载 -->
  <link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

后端优化

服务端渲染 (SSR)

使用SSR提升首屏加载速度：

javascript
// Node.js SSR示例
app.get('*', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div id="root">${html}</div>
        <script src="client.js"></script>
      </body>
    </html>
  `);
});

API优化

  • 实现API缓存策略
  • 使用GraphQL减少数据传输
  • 实现分页和懒加载
  • 压缩API响应

监控和度量

性能监控

javascript
// 监控核心Web指标
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

const storeMetrics = (metric) => {
  // 发送指标到分析服务
  analytics.track('Web Vitals', metric);
};

getCLS(storeMetrics);
getFID(storeMetrics);
getFCP(storeMetrics);
getLCP(storeMetrics);
getTTFB(storeMetrics);

性能审计

定期执行性能审计：

javascript
// Lighthouse CI配置
module.exports = {
  ci: {
    collect: {
      url: ['https://example.com'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['warn', { minScore: 0.9 }],
      },
    },
  },
};

用户体验优化

感知性能

提升用户感知的性能：

css
/* 使用骨架屏 */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

预测加载

javascript
// 根据用户行为预测加载
let isLikelyToNavigate = false;

// 检测用户悬停在链接上超过1秒
document.addEventListener('mouseover', (e) => {
  if (e.target.tagName === 'A') {
    setTimeout(() => {
      if (e.target === document.activeElement || /* still hovered */) {
        isLikelyToNavigate = true;
        preloadResource(e.target.href);
      }
    }, 1000);
  }
});

工具和流程

构建优化

javascript
// Webpack优化配置
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        }
      }
    }
  }
};

持续集成

在CI流程中集成性能检查：

yaml
# GitHub Actions性能检查
name: Performance Check
on: [push, pull_request]
jobs:
  performance:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Run Lighthouse
        run: |
          npm install -g @lhci/cli
          lhci autorun

团队协作

性能文化

  • 将性能视为功能需求
  • 建立性能指标责任制度
  • 定期进行性能培训
  • 分享性能优化案例

持续改进

性能债务管理

  • 定期重构性能不佳的代码
  • 跟踪性能回归
  • 设定可量化的目标
  • 评估新技术的性能影响

性能优化是一个持续的过程，需要在整个开发生命周期中不断关注和改进。