工程化与框架系列（21）--前端性能优化（上）

前端性能优化（加载） 🚀

引言

页面加载性能直接影响用户体验和业务转化率。本文将深入探讨前端加载性能优化的各种策略和技术，包括资源加载优化、代码分割、预加载等关键主题，帮助开发者构建快速响应的Web应用。

加载性能概述

加载性能优化主要关注以下方面：

资源加载：减少资源大小，优化加载顺序
代码分割：按需加载，减少首屏加载时间
缓存策略：合理利用浏览器缓存
预加载技术：提前加载关键资源
渲染优化：优化关键渲染路径

资源加载优化

资源压缩与合并

// webpack配置示例
const config = {optimization: {minimize: true,minimizer: [new TerserPlugin({terserOptions: {compress: {drop_console: true,drop_debugger: true}}}),new CssMinimizerPlugin()],splitChunks: {chunks: 'all',minSize: 20000,minRemainingSize: 0,minChunks: 1,maxAsyncRequests: 30,maxInitialRequests: 30,enforceSizeThreshold: 50000,cacheGroups: {defaultVendors: {test: /[\\/]node_modules[\\/]/,priority: -10,reuseExistingChunk: true},default: {minChunks: 2,priority: -20,reuseExistingChunk: true}}}}
};

图片优化

// 图片加载优化工具
class ImageOptimizer {// 图片懒加载static enableLazyLoading(): void {const images = document.querySelectorAll('img[data-src]');const imageObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target as HTMLImageElement;img.src = img.dataset.src!;img.removeAttribute('data-src');observer.unobserve(img);}});});images.forEach(img => imageObserver.observe(img));}// 响应式图片static setupResponsiveImages(): void {const images = document.querySelectorAll('img[data-srcset]');images.forEach(img => {const srcset = img.getAttribute('data-srcset');if (srcset) {img.srcset = srcset;}});}// 图片预加载static preloadImages(urls: string[]): void {urls.forEach(url => {const img = new Image();img.src = url;});}// WebP支持检测static async checkWebPSupport(): Promise<boolean> {try {const canvas = document.createElement('canvas');if (canvas.getContext && canvas.getContext('2d')) {return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;}return false;} catch (e) {return false;}}
}// 使用示例
document.addEventListener('DOMContentLoaded', () => {ImageOptimizer.enableLazyLoading();ImageOptimizer.setupResponsiveImages();// 预加载关键图片ImageOptimizer.preloadImages(['/images/hero.jpg','/images/logo.png']);
});

代码分割与懒加载

路由级别代码分割

// React Router配置示例
import { lazy, Suspense } from 'react';const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Dashboard = lazy(() => import('./pages/Dashboard'));function App() {return (<Router><Suspense fallback={<Loading />}><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /><Route path="/dashboard" component={Dashboard} /></Switch></Suspense></Router>);
}// 组件级别代码分割
const HeavyComponent = lazy(() => {return new Promise(resolve => {// 模拟延迟加载setTimeout(() => {resolve(import('./components/HeavyComponent'));}, 1000);});
});

动态导入

// 动态导入工具
class DynamicImporter {private loadedModules: Map<string, any> = new Map();// 动态加载模块async importModule(modulePath: string): Promise<any> {if (this.loadedModules.has(modulePath)) {return this.loadedModules.get(modulePath);}try {const module = await import(/* webpackChunkName: "[request]" */ modulePath);this.loadedModules.set(modulePath, module);return module;} catch (error) {console.error(`模块加载失败: ${modulePath}`, error);throw error;}}// 预加载模块preloadModule(modulePath: string): void {const link = document.createElement('link');link.rel = 'modulepreload';link.href = modulePath;document.head.appendChild(link);}// 清除已加载的模块clearModule(modulePath: string): void {this.loadedModules.delete(modulePath);}
}// 使用示例
const importer = new DynamicImporter();async function loadFeature() {const { default: Feature } = await importer.importModule('./features/Feature');return new Feature();
}

预加载策略

资源预加载

// 预加载管理器
class PreloadManager {private preloadedResources: Set<string> = new Set();// 预加载JavaScriptpreloadScript(url: string): void {if (this.preloadedResources.has(url)) return;const link = document.createElement('link');link.rel = 'preload';link.as = 'script';link.href = url;document.head.appendChild(link);this.preloadedResources.add(url);}// 预加载样式preloadStyle(url: string): void {if (this.preloadedResources.has(url)) return;const link = document.createElement('link');link.rel = 'preload';link.as = 'style';link.href = url;document.head.appendChild(link);this.preloadedResources.add(url);}// 预加载字体preloadFont(url: string, type: string): void {if (this.preloadedResources.has(url)) return;const link = document.createElement('link');link.rel = 'preload';link.as = 'font';link.href = url;link.type = type;link.crossOrigin = 'anonymous';document.head.appendChild(link);this.preloadedResources.add(url);}// 预连接preconnect(url: string): void {const link = document.createElement('link');link.rel = 'preconnect';link.href = url;document.head.appendChild(link);}
}// 使用示例
const preloader = new PreloadManager();// 预加载关键资源
preloader.preloadScript('/js/main.js');
preloader.preloadStyle('/css/critical.css');
preloader.preloadFont('/fonts/roboto.woff2', 'font/woff2');
preloader.preconnect('https://api.example.com');

数据预加载

// 数据预加载管理器
class DataPreloader {private cache: Map<string, any> = new Map();// 预加载API数据async preloadApiData(url: string, params?: object): Promise<void> {const cacheKey = this.generateCacheKey(url, params);if (this.cache.has(cacheKey)) return;try {const response = await fetch(url, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(params)});const data = await response.json();this.cache.set(cacheKey, data);} catch (error) {console.error('数据预加载失败:', error);}}// 获取预加载的数据getPreloadedData(url: string, params?: object): any {const cacheKey = this.generateCacheKey(url, params);return this.cache.get(cacheKey);}// 生成缓存键private generateCacheKey(url: string, params?: object): string {return `${url}:${JSON.stringify(params || {})}`;}// 清除预加载的数据clearPreloadedData(url?: string): void {if (url) {const cacheKey = this.generateCacheKey(url);this.cache.delete(cacheKey);} else {this.cache.clear();}}
}// 使用示例
const dataPreloader = new DataPreloader();// 预加载用户数据
await dataPreloader.preloadApiData('/api/user-profile');// 使用预加载的数据
const userData = dataPreloader.getPreloadedData('/api/user-profile');

关键渲染路径优化

CSS优化

// 关键CSS提取工具
class CriticalCSSExtractor {private styles: Map<string, string> = new Map();// 提取关键CSSextractCriticalCSS(html: string): string {const criticalStyles = new Set<string>();// 分析DOM树const dom = new DOMParser().parseFromString(html, 'text/html');// 获取首屏元素const viewportElements = this.getViewportElements(dom);// 提取关键样式viewportElements.forEach(element => {const styles = this.getElementStyles(element);styles.forEach(style => criticalStyles.add(style));});return Array.from(criticalStyles).join('\n');}// 获取首屏元素private getViewportElements(dom: Document): Element[] {// 实现首屏元素检测逻辑return Array.from(dom.querySelectorAll('*'));}// 获取元素样式private getElementStyles(element: Element): string[] {// 实现样式提取逻辑return [];}// 内联关键CSSinlineCriticalCSS(html: string, criticalCSS: string): string {return html.replace('</head>',`<style id="critical-css">${criticalCSS}</style></head>`);}
}

JavaScript优化

// JavaScript加载优化
class ScriptLoader {// 异步加载脚本static loadAsync(url: string): Promise<void> {return new Promise((resolve, reject) => {const script = document.createElement('script');script.src = url;script.async = true;script.onload = () => resolve();script.onerror = () => reject(new Error(`Script load error: ${url}`));document.head.appendChild(script);});}// 延迟加载脚本static loadDeferred(url: string): void {const script = document.createElement('script');script.src = url;script.defer = true;document.head.appendChild(script);}// 按需加载脚本static loadOnDemand(url: string, condition: () => boolean): void {if (condition()) {this.loadAsync(url);}}
}// 使用示例
ScriptLoader.loadAsync('/js/analytics.js');
ScriptLoader.loadDeferred('/js/comments.js');
ScriptLoader.loadOnDemand('/js/chat.js', () => {return localStorage.getItem('userLoggedIn') === 'true';
});

性能监控

性能指标监控

// 性能监控工具
class PerformanceMonitor {private metrics: Map<string, number> = new Map();// 记录性能指标recordMetric(name: string, value: number): void {this.metrics.set(name, value);}// 获取关键指标getMetrics(): object {const entries = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;return {// 首次内容绘制FCP: this.getFCP(),// DOM内容加载完成DCL: entries.domContentLoadedEventEnd - entries.domContentLoadedEventStart,// 页面完全加载loadComplete: entries.loadEventEnd - entries.navigationStart,// 首字节时间TTFB: entries.responseStart - entries.requestStart,// 自定义指标custom: Object.fromEntries(this.metrics)};}// 获取首次内容绘制时间private getFCP(): number {const fcp = performance.getEntriesByName('first-contentful-paint')[0];return fcp ? fcp.startTime : 0;}// 发送性能数据async sendMetrics(): Promise<void> {const metrics = this.getMetrics();try {await fetch('/api/performance', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(metrics)});} catch (error) {console.error('性能数据发送失败:', error);}}
}// 使用示例
const monitor = new PerformanceMonitor();// 记录自定义指标
monitor.recordMetric('componentLoad', performance.now());// 页面加载完成后发送性能数据
window.addEventListener('load', () => {setTimeout(() => {monitor.sendMetrics();}, 0);
});