Charon's Blog

当前主题

前端性能优化实战

2024年6月25日·
性能优化JavaScript前端开发

前端性能优化实战 ​

网站性能对用户体验和业务成功至关重要。研究表明，页面加载时间每增加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. 实际项目案例分析 ​

电商网站优化 ​

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

  1. 产品列表页面优化：

    • 实现产品列表虚拟滚动
    • 采用图片懒加载 + WebP 格式
    • 预加载下一页数据

  2. 产品详情页优化：

    • 提取关键CSS内联
    • 实现评论的分页加载
    • 预渲染静态内容

  3. 结果：

    • LCP 从 4.2s 减少到 1.8s
    • FID 从 250ms 减少到 45ms
    • CLS 从 0.28 减少到 0.05

后台管理系统优化 ​

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

  1. 优化策略：

    • 按路由进行代码分割
    • 大型表格使用虚拟滚动
    • Web Worker 处理数据转换
    • IndexedDB 缓存常用数据

  2. 结果：

    • 首屏加载时间减少 65%
    • 大表格渲染时间从 3s 减少到 200ms
    • 内存占用减少 40%

总结 ​

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

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

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

参考资源 ​

Charon
展开

Charon

后端开发工程师

热爱技术，专注于前后端开发、数据库优化和软件架构设计