前端性能优化实战

网站性能对用户体验和业务成功至关重要。研究表明，页面加载时间每增加1秒，用户转化率就会下降约7%。本文将分享在实际项目中行之有效的前端性能优化策略。

性能指标简介

在开始优化之前，我们需要了解几个关键的性能指标：

核心指标

FCP (First Contentful Paint): 首次内容绘制，页面上第一个内容元素渲染的时间
LCP (Largest Contentful Paint): 最大内容绘制，页面最大内容元素渲染完成的时间
FID (First Input Delay): 首次输入延迟，用户首次与页面交互到浏览器响应的时间
CLS (Cumulative Layout Shift): 累积布局偏移，衡量视觉稳定性的指标

Google Core Web Vitals 推荐值

LCP: 应在2.5秒内完成
FID: 应在100毫秒内响应
CLS: 应小于0.1

1. 资源加载优化

减少资源体积

javascript

// 使用ES模块进行按需导入
import { Button } from 'antd'; // 而不是 import Antd from 'antd'

资源压缩

确保你的构建工具配置正确，例如Webpack配置：

javascript

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 生产环境移除console
          },
        },
      }),
      new CssMinimizerPlugin(),
    ],
  },
};

图片优化

使用WebP格式：比JPG小约30%，同时保持视觉质量
响应式图片：根据设备提供不同尺寸的图片

html

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="描述" loading="lazy">
</picture>

资源提示

使用资源提示预加载关键资源：

html

<!-- 预连接到关键域名 -->
<link rel="preconnect" href="https://api.example.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

2. 渲染优化

关键渲染路径优化

内联关键CSS
延迟非关键JS和CSS

html

<head>
  <!-- 内联关键CSS -->
  <style>
    /* 首屏关键样式 */
    .header { /* ... */ }
    .hero { /* ... */ }
  </style>
  
  <!-- 延迟加载非关键CSS -->
  <link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

避免渲染阻塞

使用async或defer加载非关键脚本

html

<!-- 异步加载，下载完成后立即执行 -->
<script src="analytics.js" async></script>

<!-- 延迟加载，在HTML解析完成后执行 -->
<script src="non-critical.js" defer></script>

实现骨架屏

骨架屏可以提供更好的用户体验，让用户感觉页面加载更快。

Vue实现示例：

vue

<template>
  <div class="article">
    <template v-if="loading">
      <div class="skeleton-header"></div>
      <div class="skeleton-content">
        <div class="skeleton-line"></div>
        <div class="skeleton-line"></div>
        <div class="skeleton-line"></div>
      </div>
    </template>
    <template v-else>
      <h1>{{ article.title }}</h1>
      <div>{{ article.content }}</div>
    </template>
  </div>
</template>

<style scoped>
.skeleton-header {
  height: 24px;
  background: #f0f0f0;
  margin-bottom: 16px;
  animation: pulse 1.5s infinite;
}
.skeleton-line {
  height: 16px;
  background: #f0f0f0;
  margin-bottom: 8px;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 0.8; }
  100% { opacity: 0.6; }
}
</style>

3. JavaScript 优化

代码分割

使用动态导入实现按需加载：

javascript

// React组件懒加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// Vue组件懒加载
const LazyComponent = () => import('./LazyComponent.vue');

// 路由级代码分割
const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
];

使用Web Workers

将复杂计算移至Web Worker：

javascript

// main.js
const worker = new Worker('worker.js');

worker.addEventListener('message', event => {
  console.log('计算结果:', event.data);
});

worker.postMessage({ data: largeArray });

// worker.js
self.addEventListener('message', event => {
  const result = complexCalculation(event.data.data);
  self.postMessage(result);
});

function complexCalculation(data) {
  // 复杂计算逻辑
  return processedData;
}

使用虚拟列表

对于大型列表，使用虚拟列表只渲染可视区域的内容：

javascript

import { useVirtualList } from '@vueuse/core';

export default {
  setup() {
    const data = Array.from({ length: 10000 }).map((_, index) => index);
    
    const { list, containerProps, wrapperProps } = useVirtualList(data, {
      itemHeight: 50,
      overscan: 10
    });
    
    return { list, containerProps, wrapperProps };
  }
}

html

<div v-bind="containerProps" style="height: 500px; overflow: auto;">
  <div v-bind="wrapperProps">
    <div v-for="item in list" :key="item.index" style="height: 50px;">
      Row {{ item.data }}
    </div>
  </div>
</div>

4. CSS 优化

关键CSS内联

提取并内联首屏关键CSS：

html

<head>
  <style>
    /* 关键CSS */
  </style>
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

减少CSS选择器复杂度

css

/* 不推荐 */
.header .navigation ul li a.active span { ... }

/* 推荐 */
.nav-link-active { ... }

使用CSS containment

contain属性可以优化渲染性能：

css

.card {
  contain: content;
}

.list-item {
  contain: layout;
}

5. 网络优化

实现HTTP缓存

配置适当的缓存策略：

nginx

# Nginx配置示例
location ~* \.(css|js)$ {
  expires 1y;
  add_header Cache-Control "public, max-age=31536000, immutable";
}

location ~* \.(html)$ {
  expires -1;
  add_header Cache-Control "no-cache, no-store, must-revalidate";
}

使用Service Worker缓存

javascript

// 注册Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW registered:', registration);
      })
      .catch(error => {
        console.log('SW registration failed:', error);
      });
  });
}

// sw.js
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

启用HTTP/2

使用HTTP/2可以解决HTTP/1.1的许多性能限制，如多路复用、头部压缩等。以Nginx为例：

nginx

server {
  listen 443 ssl http2;
  server_name example.com;

  ssl_certificate /path/to/cert.pem;
  ssl_certificate_key /path/to/key.pem;
  
  # 其他配置...
}

6. 性能监控与分析

使用Performance API

javascript

// 测量自定义性能指标
performance.mark('startProcess');
// 执行操作...
performance.mark('endProcess');
performance.measure('processTime', 'startProcess', 'endProcess');

// 获取性能数据
const metrics = performance.getEntriesByType('measure');
console.log(metrics);

// 获取Core Web Vitals
const getCLS = () => {
  return new Promise(resolve => {
    let cls = 0;
    
    new PerformanceObserver(list => {
      const entries = list.getEntries();
      entries.forEach(entry => {
        cls += entry.value;
      });
    }).observe({type: 'layout-shift', buffered: true});
    
    setTimeout(() => resolve(cls), 3000);
  });
};

真实用户监控 (RUM)

javascript

// 简单的性能数据收集
const collectPerformanceData = () => {
  const navigation = performance.getEntriesByType('navigation')[0];
  const paint = performance.getEntriesByType('paint');
  
  const data = {
    url: window.location.href,
    userAgent: navigator.userAgent,
    timing: {
      loadTime: navigation.loadEventEnd - navigation.startTime,
      domContentLoaded: navigation.domContentLoadedEventEnd - navigation.startTime,
      firstPaint: paint.find(p => p.name === 'first-paint')?.startTime,
      firstContentfulPaint: paint.find(p => p.name === 'first-contentful-paint')?.startTime
    }
  };
  
  // 发送数据到分析服务器
  navigator.sendBeacon('/analytics/performance', JSON.stringify(data));
};

window.addEventListener('load', () => {
  // 延迟收集数据，以确保所有指标都已计算
  setTimeout(collectPerformanceData, 3000);
});

7. 实际项目案例分析

电商网站优化

我们对一个电商网站进行了以下优化：

产品列表页面优化：
- 实现产品列表虚拟滚动
- 采用图片懒加载 + WebP 格式
- 预加载下一页数据
产品详情页优化：
- 提取关键CSS内联
- 实现评论的分页加载
- 预渲染静态内容
结果：
- LCP 从 4.2s 减少到 1.8s
- FID 从 250ms 减少到 45ms
- CLS 从 0.28 减少到 0.05

后台管理系统优化

对于一个数据密集型后台管理系统：

优化策略：
- 按路由进行代码分割
- 大型表格使用虚拟滚动
- Web Worker 处理数据转换
- IndexedDB 缓存常用数据
结果：
- 首屏加载时间减少 65%
- 大表格渲染时间从 3s 减少到 200ms
- 内存占用减少 40%

总结

前端性能优化是一个持续的过程，需要从多个维度入手：

加载优化：减少资源体积、使用压缩、懒加载、预加载
渲染优化：关键渲染路径、避免阻塞、骨架屏
运行时优化：代码分割、虚拟列表、Web Worker
缓存策略：HTTP缓存、Service Worker、本地存储

最重要的是，性能优化应该建立在实际测量和用户体验指标的基础上，而不仅仅是理论上的优化。

前端性能优化实战 ​

性能指标简介 ​

核心指标 ​

Google Core Web Vitals 推荐值 ​

1. 资源加载优化 ​

减少资源体积 ​

资源压缩 ​

图片优化 ​

资源提示 ​

2. 渲染优化 ​

关键渲染路径优化 ​

避免渲染阻塞 ​

实现骨架屏 ​

3. JavaScript 优化 ​

代码分割 ​

使用Web Workers ​

使用虚拟列表 ​

4. CSS 优化 ​

关键CSS内联 ​

减少CSS选择器复杂度 ​

使用CSS containment ​

5. 网络优化 ​

实现HTTP缓存 ​

使用Service Worker缓存 ​

启用HTTP/2 ​

6. 性能监控与分析 ​

使用Performance API ​

真实用户监控 (RUM) ​

7. 实际项目案例分析 ​

电商网站优化 ​

后台管理系统优化 ​

总结 ​

参考资源 ​

前端性能优化实战

性能指标简介

核心指标

Google Core Web Vitals 推荐值

1. 资源加载优化

减少资源体积

资源压缩

图片优化

资源提示

2. 渲染优化

关键渲染路径优化

避免渲染阻塞

实现骨架屏

3. JavaScript 优化

代码分割

使用Web Workers

使用虚拟列表

4. CSS 优化

关键CSS内联

减少CSS选择器复杂度

使用CSS containment

5. 网络优化

实现HTTP缓存

使用Service Worker缓存

启用HTTP/2

6. 性能监控与分析

使用Performance API

真实用户监控 (RUM)

7. 实际项目案例分析

电商网站优化

后台管理系统优化

总结

参考资源