前端性能优化指南：从加载到交互的每一毫秒-编程实验室

前言

上个月，我们的产品被反馈"页面加载太慢"。用户在3G网络下需要等待8秒才能看到内容。

经过一个月的优化，我们把首屏加载时间从8秒降到了1.2秒。这篇文章分享我们的优化实践。

一、性能指标体系

1.1 核心Web指标（Core Web Vitals）

javascript

// LCP（Largest Contentful Paint）- 最大内容绘制// 目标：2.5秒内const observer = new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { console.log('LCP:', entry.renderTime || entry.loadTime); });});observer.observe({entryTypes: ['largest-contentful-paint']});// FID（First Input Delay）- 首次输入延迟// 目标：100毫秒内new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { console.log('FID:', entry.processingDuration); });}).observe({entryTypes: ['first-input']});// CLS（Cumulative Layout Shift）- 累积布局偏移// 目标：0.1以下let clsValue = 0;new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { if (!entry.hadRecentInput) { clsValue += entry.value; console.log('CLS:', clsValue); } });}).observe({entryTypes: ['layout-shift']});

1.2 性能指标采集

javascript

// 采集所有关键指标const getMetrics = () => { const navigation = performance.getEntriesByType('navigation')[0]; const paint = performance.getEntriesByType('paint'); return { // 时间相关指标 DNS: navigation.domainLookupEnd - navigation.domainLookupStart, TCP: navigation.connectEnd - navigation.connectStart, TTFB: navigation.responseStart - navigation.requestStart, // 首字节时间 DomReady: navigation.domInteractive - navigation.fetchStart, LoadComplete: navigation.loadEventEnd - navigation.fetchStart, // 渲染相关指标 FP: paint.find(p => p.name === 'first-paint')?.startTime, // 首次绘制 FCP: paint.find(p => p.name === 'first-contentful-paint')?.startTime, // 首次内容绘制 // 资源加载 Resources: performance.getEntriesByType('resource').length, };};console.log(getMetrics());

二、网络优化

2.1 HTTP/2与CDN

javascript

// 配置CDN的关键资源const cdnConfig = { // 使用CDN加速静态资源 images: 'https://cdn.example.com/images', scripts: 'https://cdn.example.com/scripts', styles: 'https://cdn.example.com/styles',};// 使用HTTP/2的服务器推送// 在服务器侧配置const http2Push = { '/index.html': [ '/styles/main.css', '/scripts/app.js', '/fonts/roboto.woff2', ]};

2.2 资源压缩

bash

# Gzip压缩gzip -9 static/bundle.js -c > static/bundle.js.gz# Brotli压缩（更高的压缩率）brotli -q 11 static/bundle.js -o static/bundle.js.br# WebP图片格式cwebp original.jpg -o optimized.webp -q 80

2.3 缓存策略

javascript

// 服务器配置缓存头const express = require('express');const app = express();// 不变资源：带hash的JS、CSS、图片app.use('/static', (req, res, next) => { res.set('Cache-Control', 'public, max-age=31536000, immutable'); next();});// HTML文件：始终检查新版本app.get('/', (req, res) => { res.set('Cache-Control', 'no-cache, must-revalidate'); res.sendFile('index.html');});// API响应：短期缓存app.get('/api/*', (req, res) => { res.set('Cache-Control', 'private, max-age=300'); // 5分钟 next();});

三、代码分割与懒加载

3.1 Webpack代码分割

javascript

// webpack.config.jsmodule.exports = { optimization: { splitChunks: { chunks: 'all', cacheGroups: { // 分离第三方库 vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', priority: 10, reuseExistingChunk: true, }, // 分离公共模块 common: { minChunks: 2, priority: 5, reuseExistingChunk: true, } } } }};

3.2 动态导入与懒加载

javascript

// React懒加载示例import React, { Suspense, lazy } from 'react';const Dashboard = lazy(() => import('./Dashboard'));const Settings = lazy(() => import('./Settings'));function App() { return ( <Suspense fallback={<Loading />}> <Router> <Route path="/dashboard" component={Dashboard} /> <Route path="/settings" component={Settings} /> </Router> </Suspense> );}

3.3 路由懒加载

javascript

// Vue路由懒加载const router = new VueRouter({ routes: [ { path: '/home', component: () => import('./views/Home.vue') }, { path: '/about', component: () => import('./views/About.vue') }, { path: '/products', component: () => import('./views/Products.vue') } ]});

四、图片优化

4.1 响应式图片

html

<!-- 使用srcset适配不同屏幕 --><img src="image.jpg" srcset=" image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w " sizes="(max-width: 320px) 280px, (max-width: 640px) 600px, 1200px" alt="Responsive image"/><!-- 使用picture元素支持多种格式 --><picture> <source srcset="image.webp" type="image/webp" /> <source srcset="image.jpg" type="image/jpeg" /> <img src="image.jpg" alt="Fallback" /></picture>

4.2 图片懒加载

javascript

// 使用Intersection Observer懒加载const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.add('loaded'); observer.unobserve(img); } });});document.querySelectorAll('img[data-src]').forEach(img => { imageObserver.observe(img);});

html