Jensen's Blog

Appearance

前端性能优化 ​

更新: 8/6/2025 字数: 0 字 时长: 0 分钟

前端性能优化是提升用户体验的关键因素，它直接影响到网站的加载速度、响应时间和交互流畅度。本文将介绍前端性能优化的各个方面，包括网络优化、渲染优化、代码优化等，以及相应的测量和监控方法。

为什么性能优化很重要 ​

  • 用户体验：研究表明，页面加载时间每增加1秒，用户跳出率就会增加10%。
  • 转化率：页面加载速度与转化率直接相关，速度越快，转化率越高。
  • 搜索引擎排名：Google等搜索引擎将页面速度作为排名因素之一。
  • 移动用户：移动设备上的网络连接通常不稳定，优化性能对移动用户尤为重要。

性能指标 ​

在进行性能优化之前，我们需要了解一些关键的性能指标：

核心Web指标（Core Web Vitals） ​

  • 最大内容绘制（LCP, Largest Contentful Paint）：测量加载性能，应在2.5秒内完成。
  • 首次输入延迟（FID, First Input Delay）：测量交互性，应在100毫秒内完成。
  • 累积布局偏移（CLS, Cumulative Layout Shift）：测量视觉稳定性，应保持在0.1以下。

其他重要指标 ​

  • 首次绘制（FP, First Paint）：浏览器首次渲染任何视觉内容的时间。
  • 首次内容绘制（FCP, First Contentful Paint）：浏览器首次渲染任何文本、图像、非空白canvas或SVG的时间。
  • 首屏时间（TTI, Time to Interactive）：页面变得完全可交互的时间。
  • 总阻塞时间（TBT, Total Blocking Time）：FCP和TTI之间主线程被阻塞的总时间。

网络优化 ​

减少HTTP请求 ​

每个HTTP请求都会增加页面加载时间，减少请求数量是优化的第一步。

合并文件 ​

html
<!-- 不推荐 -->
<link rel="stylesheet" href="styles1.css">
<link rel="stylesheet" href="styles2.css">
<link rel="stylesheet" href="styles3.css">

<!-- 推荐 -->
<link rel="stylesheet" href="styles-combined.css">

使用CSS Sprites ​

css
.icon {
  background-image: url('sprites.png');
  width: 16px;
  height: 16px;
}

.icon-home {
  background-position: 0 0;
}

.icon-user {
  background-position: -16px 0;
}

内联小资源 ​

html
<!-- 不推荐 -->
<link rel="stylesheet" href="tiny-styles.css">

<!-- 推荐 -->
<style>
  /* 内联小型CSS */
  body { margin: 0; padding: 0; }
</style>

减小资源大小 ​

压缩文本资源 ​

bash
# 使用Terser压缩JavaScript
npx terser input.js -o output.min.js -c -m

# 使用cssnano压缩CSS
npx cssnano input.css output.min.css

优化图片 ​

bash
# 使用imagemin压缩图片
npx imagemin images/* --out-dir=optimized
html
<!-- 使用适当的图片格式 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description">
</picture>

使用适当的图片尺寸 ​

html
<!-- 使用srcset提供不同尺寸的图片 -->
<img 
  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
  sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"
  src="medium.jpg"
  alt="Description"
>

利用缓存 ​

设置适当的HTTP缓存头 ​

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

使用版本化文件名或查询参数 ​

html
<!-- 使用版本化文件名 -->
<link rel="stylesheet" href="styles.v123.css">

<!-- 或使用查询参数 -->
<link rel="stylesheet" href="styles.css?v=123">

使用CDN ​

html
<!-- 使用CDN加载常用库 -->
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>

预加载和预连接 ​

html
<!-- 预连接到重要的第三方域 -->
<link rel="preconnect" href="https://api.example.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="critical.js" as="script">

<!-- 预取可能需要的资源 -->
<link rel="prefetch" href="next-page.js">

渲染优化 ​

关键渲染路径优化 ​

内联关键CSS ​

html
<head>
  <style>
    /* 首屏关键CSS */
    .header { ... }
    .hero { ... }
  </style>
  <link rel="preload" href="full-styles.css" as="style" onload="this.rel='stylesheet'">
</head>

延迟加载非关键JavaScript ​

html
<!-- 延迟加载非关键脚本 -->
<script src="non-critical.js" defer></script>

<!-- 或使用async（不保证执行顺序） -->
<script src="analytics.js" async></script>

减少重绘和回流 ​

javascript
// 不推荐 - 多次修改导致多次回流
const element = document.getElementById('box');
element.style.width = '100px';
element.style.height = '100px';
element.style.margin = '10px';

// 推荐 - 批量修改减少回流
const element = document.getElementById('box');
element.style.cssText = 'width: 100px; height: 100px; margin: 10px;';

// 或使用类名
element.className = 'box-style';

使用硬件加速 ​

css
/* 使用transform触发GPU加速 */
.animated {
  transform: translateZ(0);
  will-change: transform;
}

JavaScript优化 ​

代码分割 ​

javascript
// 使用动态import进行代码分割
button.addEventListener('click', async () => {
  const module = await import('./heavy-module.js');
  module.doSomething();
});

使用Web Workers ​

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

worker.postMessage({ data: complexData });
worker.onmessage = function(event) {
  console.log('Result:', event.data);
};

// worker.js
self.onmessage = function(event) {
  const result = performComplexCalculation(event.data.data);
  self.postMessage(result);
};

避免内存泄漏 ​

javascript
// 不推荐 - 可能导致内存泄漏
function setupListener() {
  const element = document.getElementById('button');
  element.addEventListener('click', function() {
    // 这里使用了外部变量，可能导致闭包引用
    console.log(largeData);
  });
}

// 推荐 - 移除不再需要的事件监听器
function setupListener() {
  const element = document.getElementById('button');
  const handleClick = function() {
    console.log('Clicked');
  };
  element.addEventListener('click', handleClick);
  
  return function cleanup() {
    element.removeEventListener('click', handleClick);
  };
}

const cleanup = setupListener();
// 在不再需要时调用
// cleanup();

使用防抖和节流 ​

javascript
// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

// 节流函数
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 使用防抖处理搜索输入
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(function(event) {
  // 执行搜索操作
  console.log('Searching:', event.target.value);
}, 300);

searchInput.addEventListener('input', debouncedSearch);

// 使用节流处理滚动事件
const throttledScroll = throttle(function() {
  // 执行滚动操作
  console.log('Scrolling');
}, 100);

window.addEventListener('scroll', throttledScroll);

CSS优化 ​

选择器优化 ​

css
/* 不推荐 - 复杂的选择器 */
body div.container ul li a { ... }

/* 推荐 - 简单直接的选择器 */
.nav-link { ... }

减少使用昂贵的属性 ​

css
/* 不推荐 - 可能导致性能问题的属性 */
.box {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  filter: blur(5px);
  opacity: 0.8;
  transform: scale(1.1);
}

/* 推荐 - 使用替代方案或谨慎使用 */
.box {
  /* 使用will-change提前告知浏览器 */
  will-change: transform;
  transform: scale(1.1);
}

使用CSS而非JavaScript进行动画 ​

css
/* 使用CSS动画 */
@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.animated {
  animation: slide-in 0.5s ease-out;
}

字体优化 ​

使用字体显示策略 ​

css
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* 或 block, fallback, optional */
}

使用变体字体 ​

css
@font-face {
  font-family: 'MyVariableFont';
  src: url('myvariablefont.woff2') format('woff2-variations');
  font-weight: 100 900;
}

.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

字体子集化 ​

html
<!-- 只加载需要的字符 -->
<link rel="preload" href="myfont-subset.woff2" as="font" type="font/woff2" crossorigin>

图片和视频优化 ​

使用现代图片格式 ​

html
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

懒加载 ​

html
<!-- 使用原生懒加载 -->
<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Description">

<!-- 或使用JavaScript实现 -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const lazyImages = document.querySelectorAll('img[data-src]');
    
    const observer = new IntersectionObserver(function(entries, observer) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });
    
    lazyImages.forEach(img => observer.observe(img));
  });
</script>

视频优化 ​

html
<!-- 延迟加载视频 -->
<video controls preload="none" poster="video-poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

框架特定优化 ​

React优化 ​

使用React.memo和useMemo ​

jsx
import React, { useMemo } from 'react';

// 使用React.memo避免不必要的重渲染
const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.name}</div>;
});

// 使用useMemo缓存计算结果
function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    return expensiveCalculation(data);
  }, [data]);
  
  return <div>{processedData}</div>;
}

使用useCallback ​

jsx
import React, { useCallback } from 'react';

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);
  
  return <ChildComponent onClick={handleClick} />;
}

Vue优化 ​

使用v-show代替v-if ​

vue
<!-- 频繁切换时使用v-show -->
<template>
  <div v-show="isVisible">Content</div>
</template>

使用keep-alive ​

vue
<template>
  <keep-alive>
    <component :is="currentComponent" />
  </keep-alive>
</template>

虚拟滚动 ​

vue
<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="32"
  >
    <template v-slot="{ item }">
      <div class="user-item">{{ item.name }}</div>
    </template>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  },
  data() {
    return {
      items: Array.from({ length: 10000 }).map((_, i) => ({
        id: i,
        name: `User ${i}`
      }))
    }
  }
}
</script>

性能测量和监控 ​

使用Lighthouse ​

Lighthouse是Google开发的自动化工具，用于改进网页质量。

bash
# 使用Chrome DevTools中的Lighthouse
# 或使用命令行
npx lighthouse https://example.com --view

使用Performance API ​

javascript
// 测量自定义性能指标
performance.mark('start-process');

// 执行需要测量的代码
processData();

performance.mark('end-process');
performance.measure('process-time', 'start-process', 'end-process');

const measurements = performance.getEntriesByType('measure');
console.log(measurements);

使用Web Vitals库 ​

javascript
import { getCLS, getFID, getLCP } from 'web-vitals';

function sendToAnalytics({ name, delta, id }) {
  // 发送指标到分析服务
  console.log(`Metric: ${name} ID: ${id} Value: ${delta}`);
}

// 测量核心Web指标
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

实时用户监控(RUM) ​

javascript
// 使用第三方RUM服务或自定义实现
document.addEventListener('DOMContentLoaded', () => {
  // 记录页面加载时间
  const pageLoadTime = performance.now();
  sendAnalytics('page_load', pageLoadTime);
  
  // 监听用户交互
  document.addEventListener('click', event => {
    const target = event.target.tagName;
    sendAnalytics('user_click', { target });
  });
});

function sendAnalytics(eventType, data) {
  // 发送数据到分析服务
  navigator.sendBeacon('/analytics', JSON.stringify({
    eventType,
    data,
    timestamp: Date.now()
  }));
}

性能预算 ​

性能预算是一组限制，用于确保网站保持一定的性能水平。

设置性能预算 ​

json
// budget.json
{
  "resourceSizes": [
    {
      "resourceType": "script",
      "budget": 120
    },
    {
      "resourceType": "image",
      "budget": 300
    },
    {
      "resourceType": "total",
      "budget": 500
    }
  ],
  "timings": [
    {
      "metric": "interactive",
      "budget": 3000
    },
    {
      "metric": "first-contentful-paint",
      "budget": 1500
    }
  ]
}

使用工具监控性能预算 ​

bash
# 使用Lighthouse CI
npx lighthouse-ci --budget-path=./budget.json https://example.com

# 或使用webpack-bundle-analyzer监控包大小
npx webpack-bundle-analyzer stats.json

渐进式Web应用(PWA) ​

PWA技术可以显著提升用户体验和性能。

使用Service Worker缓存资源 ​

javascript
// service-worker.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js',
        '/logo.png'
      ]);
    })
  );
});

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

添加Web App Manifest ​

json
// manifest.json
{
  "name": "My PWA App",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
html
<!-- 在HTML中引用manifest -->
<link rel="manifest" href="/manifest.json">

性能优化清单 ​

以下是一个简单的性能优化清单，可以用来检查你的网站是否实施了关键的性能优化：

网络优化 ​

渲染优化 ​

JavaScript优化 ​

CSS优化 ​

资源优化 ​

框架优化 ​

监控和测量 ​

总结 ​

前端性能优化是一个持续的过程，需要从多个方面入手，包括网络优化、渲染优化、代码优化等。通过实施本文介绍的各种优化策略，可以显著提升网站的加载速度和用户体验。

记住，性能优化不是一次性的工作，而是需要持续关注和改进的过程。随着技术的发展和用户期望的提高，性能优化的方法和标准也在不断演进。

Copyright © 2019-2025 present Jensen