web前端首屏加载时间：从5秒到1.5秒，我做了这三件事

老前端的功夫

已于 2025-10-28 10:51:55 修改

阅读量946

点赞数 13

CC 4.0 BY-SA版权

分类专栏：前端性能道法文章标签： 1024程序员节 javascript css 前端开发语言性能优化

于 2025-10-24 15:30:00 首次发布

本文链接：https://blog.csdn.net/m0_66117560/article/details/153819005

前端性能道法专栏收录该内容

12 篇文章

订阅专栏

深入剖析首屏性能优化的核心策略，从理论到实践的系统性解决方案

引言：为什么首屏加载时间如此重要？

在Web性能领域，首屏加载时间（First Contentful Paint）是衡量用户体验的关键指标。研究表明：

53%的用户 会放弃加载时间超过3秒的移动网站
每减少100ms的加载延迟，转化率提升1%
页面加载时间每增加1秒，用户满意度下降16%

让我们从一个真实的案例开始：

// 优化前的性能数据
const beforeOptimization = {
  firstContentfulPaint: 5200,    // 5.2秒
  largestContentfulPaint: 6800,  // 6.8秒  
  totalBlockingTime: 450,        // 450ms
  cumulativeLayoutShift: 0.35,   // 明显的布局偏移
  speedIndex: 4200               // 速度指数4.2秒
};

经过系统优化后：

// 优化后的性能数据
const afterOptimization = {
  firstContentfulPaint: 1500,    // 1.5秒
  largestContentfulPaint: 2200,  // 2.2秒
  totalBlockingTime: 50,         // 50ms
  cumulativeLayoutShift: 0.05,   // 几乎无布局偏移
  speedIndex: 1200               // 速度指数1.2秒
};

第一件事：资源加载优化 - 减少关键请求链

关键渲染路径深度解析

浏览器渲染页面的过程是一个复杂的流水线操作：

1.1 消除渲染阻塞资源

问题分析：传统网站在首次渲染前需要下载和解析所有CSS和同步JavaScript。

解决方案：代码分割和资源优先级调整。

<!-- 优化前的阻塞写法 -->
<head>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="vendor.css">
  <script src="app.js"></script>
</head>

<!-- 优化后的非阻塞写法 -->
<head>
  <!-- 关键CSS内联 -->
  <style>
    /* 首屏关键样式 */
    .header, .hero, .navigation { /* ... */ }
  </style>
  
  <!-- 非关键CSS异步加载 -->
  <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="non-critical.css"></noscript>
  
  <!-- 关键JS预加载，非关键JS异步加载 -->
  <link rel="preload" href="critical.js" as="script">
  <script src="critical.js" defer></script>
</head>
<body>
  <!-- 页面内容 -->
  <script src="non-critical.js" async></script>
</body>

1.2 智能资源预加载

利用浏览器预加载机制提前获取关键资源：

// 资源预加载管理器
class ResourcePreloader {
  constructor() {
    this.preloadQueue = new Set();
    this.observedElements = new Set();
  }
  
  // 预加载关键资源
  preloadCriticalResources() {
    const criticalResources = [
      '/fonts/primary.woff2',
      '/images/hero-image.webp',
      '/css/main.css',
      '/js/main.js'
    ];
    
    criticalResources.forEach(resource => {
      this.createPreloadLink(resource);
    });
  }
  
  createPreloadLink(url) {
    const link = document.createElement('link');
    link.rel = 'preload';
    link.href = url;
    
    // 设置正确的as属性
    if (url.endsWith('.css')) link.as = 'style';
    else if (url.endsWith('.js')) link.as = 'script';
    else if (url.endsWith('.woff2')) link.as = 'font';
    else if (url.endsWith('.webp')) link.as = 'image';
    
    link.crossOrigin = 'anonymous';
    document.head.appendChild(link);
  }
  
  // 基于视口预加载
  observeViewportResources() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const resources = entry.target.dataset.preload;
          if (resources) {
            resources.split(',').forEach(resource => {
              this.createPreloadLink(resource.trim());
            });
          }
          observer.unobserve(entry.target);
        }
      });
    }, {
      rootMargin: '50% 0%' // 提前50%视口高度预加载
    });
    
    // 观察需要预加载的元素
    document.querySelectorAll('[data-preload]').forEach(el => {
      observer.observe(el);
    });
  }
}

// 使用示例
const preloader = new ResourcePreloader();
preloader.preloadCriticalResources();
preloader.observeViewportResources();

1.3 高级代码分割策略

基于路由和组件的智能代码分割：

// 基于路由的代码分割
const routes = [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "home" */ './views/Home.vue'),
    preload: ['home-chart.js', 'home-data.json']
  },
  {
    path: '/products',
    component: () => import(/* webpackChunkName: "products" */ './views/Products.vue'),
    preload: ['product-gallery.js', 'filters.js']
  },
  {
    path: '/about',
    component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    preload: ['team-data.json']
  }
];

// 智能预加载路由
class RoutePreloader {
  constructor(routes) {
    this.routes = routes;
    this.setupLinkPrefetch();
  }
  
  setupLinkPrefetch() {
    // 监听鼠标悬停和触摸开始事件
    document.addEventListener('mouseover', this.handleLinkHover.bind(this));
    document.addEventListener('touchstart', this.handleTouchStart.bind(this));
  }
  
  handleLinkHover(event) {
    const link = event.target.closest('a');
    if (link) {
      this.prefetchRoute(link.href);
    }
  }
  
  handleTouchStart(event) {
    const link = event.target.closest('a');
    if (link) {
      // 触摸开始时立即预加载
      this.prefetchRoute(link.href, true);
    }
  }
  
  prefetchRoute(href, urgent = false) {
    const route = this.findRouteByHref(href);
    if (route && !route.prefetched) {
      if (urgent) {
        // 紧急预加载：使用preload
        this.preloadResources(route.preload);
      } else {
        // 非紧急预加载：使用prefetch
        this.prefetchResources(route.preload);
      }
      
      // 预加载组件代码
      route.component().then(module => {
        route.prefetched = true;
      });
    }
  }
  
  preloadResources(resources) {
    resources.forEach(resource => {
      const link = document.createElement('link');
      link.rel = 'preload';
      link.href = resource;
      link.as = this.getResourceType(resource);
      document.head.appendChild(link);
    });
  }
  
  prefetchResources(resources) {
    resources.forEach(resource => {
      const link = document.createElement('link');
      link.rel = 'prefetch';
      link.href = resource;
      document.head.appendChild(link);
    });
  }
}

第二件事：渲染性能优化 - 加速内容呈现

2.1 关键CSS提取和内联

原理：将首屏渲染所需的最小CSS提取并内联到HTML中，避免CSS文件下载的阻塞。

// 关键CSS提取工具
const critical = require('critical');

// 提取关键CSS
async function extractCriticalCSS() {
  try {
    const { css, html, uncritical } = await critical.generate({
      base: 'dist/',
      src: 'index.html',
      target: {
        css: 'dist/critical.css',
        html: 'dist/index-critical.html',
        uncritical: 'dist/uncritical.css'
      },
      width: 1300,
      height: 900,
      inline: true, // 内联关键CSS
      extract: true,
      ignore: {
        atrule: ['@font-face'],
        rule: [/\.carousel/, /\.modal/] // 忽略轮播图和弹窗样式
      }
    });
    
    console.log('关键CSS提取完成');
    return { critical: css, uncritical };
  } catch (error) {
    console.error('关键CSS提取失败:', error);
  }
}

// 构建时自动提取
class CriticalCSSPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('CriticalCSSPlugin', async (compilation, callback) => {
      const criticalCSS = await extractCriticalCSS();
      
      // 将关键CSS添加到编译资源中
      compilation.assets['critical.css'] = {
        source: () => criticalCSS.critical,
        size: () => criticalCSS.critical.length
      };
      
      callback();
    });
  }
}

2.2 图片优化和响应式加载

现代图片优化策略：

// 智能图片加载器
class SmartImageLoader {
  constructor() {
    this.intersectionObserver = new IntersectionObserver(
      this.handleIntersection.bind(this),
      { rootMargin: '50px 0px' }
    );
    this.responsiveObserver = new ResizeObserver(
      this.handleResize.bind(this)
    );
  }
  
  // 观察所有需要懒加载的图片
  observeLazyImages() {
    const lazyImages = document.querySelectorAll('img[data-src]');
    lazyImages.forEach(img => {
      this.intersectionObserver.observe(img);
      
      // 如果是响应式图片，也监听容器大小变化
      if (img.parentElement) {
        this.responsiveObserver.observe(img.parentElement);
      }
    });
  }
  
  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        this.loadImage(img);
        this.intersectionObserver.unobserve(img);
      }
    });
  }
  
  handleResize(entries) {
    entries.forEach(entry => {
      const container = entry.target;
      const img = container.querySelector('img[data-src]');
      if (img) {
        this.selectOptimalSource(img, container.clientWidth);
      }
    });
  }
  
  loadImage(img) {
    const containerWidth = img.parentElement?.clientWidth || window.innerWidth;
    const optimalSrc = this.selectOptimalSource(img, containerWidth);
    
    // 创建图片预加载
    const tempImg = new Image();
    tempImg.onload = () => {
      img.src = optimalSrc;
      img.removeAttribute('data-src');
      img.classList.add('loaded');
    };
    tempImg.src = optimalSrc;
  }
  
  selectOptimalSource(img, containerWidth) {
    const srcset = img.dataset.srcset;
    if (!srcset) return img.dataset.src;
    
    // 解析srcset
    const sources = srcset.split(',').map(source => {
      const [url, width] = source.trim().split(' ');
      return {
        url: url,
        width: parseInt(width) || 9999
      };
    });
    
    // 选择最适合容器宽度的图片
    const optimalSource = sources.reduce((best, current) => {
      if (current.width >= containerWidth && current.width < best.width) {
        return current;
      }
      return best;
    });
    
    return optimalSource?.url || img.dataset.src;
  }
}

// 图片格式优化
function generateResponsiveImages(originalImage) {
  const formats = ['avif', 'webp', 'jpg'];
  const sizes = [400, 800, 1200, 1600, 2000];
  
  const responsiveSources = {};
  
  formats.forEach(format => {
    responsiveSources[format] = sizes.map(size => ({
      url: `/${format}/image-${size}.${format}`,
      width: size
    }));
  });
  
  return responsiveSources;
}

// HTML中的使用
<picture>
  <source 
    type="image/avif" 
    srcset="
      /avif/hero-400.avif 400w,
      /avif/hero-800.avif 800w,
      /avif/hero-1200.avif 1200w
    "
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  >
  <source 
    type="image/webp" 
    srcset="
      /webp/hero-400.webp 400w,
      /webp/hero-800.webp 800w, 
      /webp/hero-1200.webp 1200w
    "
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  >
  <img 
    src="/jpg/hero-800.jpg"
    data-src="/jpg/hero-800.jpg"
    data-srcset="
      /jpg/hero-400.jpg 400w,
      /jpg/hero-800.jpg 800w,
      /jpg/hero-1200.jpg 1200w
    "
    alt="Hero Image"
    loading="lazy"
    class="lazy-image"
  >
</picture>

2.3 字体加载优化

字体是首屏渲染的常见瓶颈：

// 字体加载优化策略
class FontLoadingOptimizer {
  constructor() {
    this.loadedFonts = new Set();
    this.fontDisplay = 'swap'; // 或者 'optional', 'block'
  }
  
  // 预加载关键字体
  preloadCriticalFonts() {
    const criticalFonts = [
      { 
        family: 'Inter',
        weights: [400, 700],
        subsets: ['latin'],
        preload: true
      }
    ];
    
    criticalFonts.forEach(font => {
      if (font.preload) {
        this.preloadFont(font);
      }
      this.loadFontWithFallback(font);
    });
  }
  
  preloadFont(font) {
    const link = document.createElement('link');
    link.rel = 'preload';
    link.href = this.getFontUrl(font, 400);
    link.as = 'font';
    link.crossOrigin = 'anonymous';
    document.head.appendChild(link);
  }
  
  // 使用Font Face Observer进行字体加载控制
  async loadFontWithFallback(font) {
    const fontFace = new FontFace(
      font.family,
      `url(${this.getFontUrl(font, 400)}) format('woff2')`,
      { 
        display: this.fontDisplay,
        weight: 400
      }
    );
    
    try {
      // 加载字体
      const loadedFont = await fontFace.load();
      document.fonts.add(loadedFont);
      
      // 标记字体已加载
      this.loadedFonts.add(font.family);
      
      // 更新CSS类名
      document.documentElement.classList.add('fonts-loaded');
      
      // 触发字体加载完成事件
      this.onFontsLoaded();
      
    } catch (error) {
      console.warn(`字体 ${font.family} 加载失败:`, error);
      this.onFontLoadFailed(font);
    }
  }
  
  onFontsLoaded() {
    // 字体加载完成后的回调
    performance.mark('fonts-loaded');
    
    // 可以在这里执行依赖字体的操作
    this.applyFontMetricsCorrection();
  }
  
  // 字体度量修正 - 避免布局偏移
  applyFontMetricsCorrection() {
    const style = document.createElement('style');
    style.textContent = `
      .font-fallback {
        font-family: system-ui, sans-serif;
      }
      
      .fonts-loaded .font-fallback {
        font-family: 'Inter', system-ui, sans-serif;
      }
      
      /* 使用size-adjust修正字体度量差异 */
      @font-face {
        font-family: 'Inter-fallback';
        src: local('Arial');
        size-adjust: 105%;
        ascent-override: 95%;
        descent-override: 25%;
        line-gap-override: 0%;
      }
      
      .font-fallback {
        font-family: 'Inter-fallback', 'Inter', system-ui;
      }
    `;
    document.head.appendChild(style);
  }
  
  getFontUrl(font, weight) {
    return `/fonts/${font.family}-${weight}-latin.woff2`;
  }
}

// CSS中的字体加载策略
const fontLoadingCSS = `
  /* 系统字体立即显示 */
  body {
    font-family: system-ui, -apple-system, sans-serif;
  }
  
  /* 自定义字体加载完成后替换 */
  .fonts-loaded body {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  /* 字体加载期间的备用样式 */
  .font-loading h1 {
    font-size: calc(1.5em + 0.5vw);
    line-height: 1.2;
  }
  
  .fonts-loaded .font-loading h1 {
    font-size: 2.5em;
    line-height: 1.1;
  }
`;

第三件事：JavaScript执行优化 - 减少主线程阻塞

3.1 代码分割和懒执行

// 智能代码分割管理器
class CodeSplitManager {
  constructor() {
    this.loadedChunks = new Set();
    this.pendingChunks = new Map();
  }
  
  // 基于路由的代码分割
  async loadRouteChunk(routeName) {
    if (this.loadedChunks.has(routeName)) {
      return Promise.resolve();
    }
    
    if (this.pendingChunks.has(routeName)) {
      return this.pendingChunks.get(routeName);
    }
    
    const loadPromise = this.loadChunk(routeName);
    this.pendingChunks.set(routeName, loadPromise);
    
    try {
      await loadPromise;
      this.loadedChunks.add(routeName);
      this.pendingChunks.delete(routeName);
    } catch (error) {
      this.pendingChunks.delete(routeName);
      throw error;
    }
  }
  
  async loadChunk(routeName) {
    switch (routeName) {
      case 'home':
        return import(/* webpackChunkName: "home" */ './routes/Home.js');
      case 'products':
        return import(/* webpackChunkName: "products" */ './routes/Products.js');
      case 'about':
        return import(/* webpackChunkName: "about" */ './routes/About.js');
      default:
        throw new Error(`未知的路由: ${routeName}`);
    }
  }
  
  // 预加载可能需要的chunk
  prefetchLikelyChunks() {
    const likelyChunks = this.predictNextChunks();
    likelyChunks.forEach(chunk => {
      if (!this.loadedChunks.has(chunk) && !this.pendingChunks.has(chunk)) {
        this.prefetchChunk(chunk);
      }
    });
  }
  
  prefetchChunk(chunkName) {
    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = this.getChunkUrl(chunkName);
    link.as = 'script';
    document.head.appendChild(link);
  }
  
  predictNextChunks() {
    // 基于用户行为预测下一个需要的chunk
    const pathname = window.location.pathname;
    const predictions = {
      '/': ['products', 'about'],
      '/products': ['home', 'about'],
      '/about': ['home', 'products']
    };
    
    return predictions[pathname] || [];
  }
}

3.2 主线程任务优化

减少长任务对主线程的阻塞：

// 任务调度器 - 将长任务分解为小任务
class TaskScheduler {
  constructor() {
    this.taskQueue = [];
    this.isProcessing = false;
    this.frameBudget = 16; // 每帧16ms预算
  }
  
  // 添加任务到队列
  addTask(task, priority = 'normal') {
    const taskItem = {
      task,
      priority,
      timestamp: Date.now()
    };
    
    this.taskQueue.push(taskItem);
    this.sortQueue();
    
    if (!this.isProcessing) {
      this.processQueue();
    }
  }
  
  sortQueue() {
    this.taskQueue.sort((a, b) => {
      const priorityWeight = {
        critical: 0,
        high: 1,
        normal: 2,
        low: 3
      };
      
      return priorityWeight[a.priority] - priorityWeight[b.priority] ||
             a.timestamp - b.timestamp;
    });
  }
  
  async processQueue() {
    this.isProcessing = true;
    
    while (this.taskQueue.length > 0) {
      const startTime = performance.now();
      
      // 处理当前任务
      const taskItem = this.taskQueue.shift();
      await this.executeTask(taskItem.task);
      
      const elapsed = performance.now() - startTime;
      
      // 如果任务执行时间过长，让出主线程
      if (elapsed > this.frameBudget) {
        await this.yieldToMain();
      }
    }
    
    this.isProcessing = false;
  }
  
  async executeTask(task) {
    // 使用requestIdleCallback在空闲时间执行
    if ('requestIdleCallback' in window) {
      return new Promise(resolve => {
        requestIdleCallback(() => {
          task();
          resolve();
        }, { timeout: 1000 });
      });
    } else {
      // 回退方案：使用setTimeout
      return new Promise(resolve => {
        setTimeout(() => {
          task();
          resolve();
        }, 0);
      });
    }
  }
  
  yieldToMain() {
    return new Promise(resolve => {
      setTimeout(resolve, 0);
    });
  }
}

// 使用示例
const scheduler = new TaskScheduler();

// 关键任务立即执行
scheduler.addTask(() => {
  initializeCoreComponents();
}, 'critical');

// 非关键任务可以延迟
scheduler.addTask(() => {
  initializeAnalytics();
}, 'low');

scheduler.addTask(() => {
  loadNonCriticalImages();
}, 'normal');

3.3 内存管理和垃圾回收优化

// 内存管理工具
class MemoryManager {
  constructor() {
    this.cache = new Map();
    this.cacheSize = 0;
    this.maxCacheSize = 50 * 1024 * 1024; // 50MB
    this.cleanupThreshold = 0.8; // 80%时开始清理
  }
  
  // 智能缓存
  setCache(key, value, options = {}) {
    const item = {
      value,
      size: this.estimateSize(value),
      timestamp: Date.now(),
      ttl: options.ttl || 5 * 60 * 1000, // 5分钟默认TTL
      priority: options.priority || 'normal'
    };
    
    // 检查缓存大小
    if (this.cacheSize + item.size > this.maxCacheSize * this.cleanupThreshold) {
      this.cleanup();
    }
    
    this.cache.set(key, item);
    this.cacheSize += item.size;
  }
  
  getCache(key) {
    const item = this.cache.get(key);
    if (!item) return null;
    
    // 检查是否过期
    if (Date.now() - item.timestamp > item.ttl) {
      this.cache.delete(key);
      this.cacheSize -= item.size;
      return null;
    }
    
    // 更新访问时间
    item.timestamp = Date.now();
    return item.value;
  }
  
  cleanup() {
    const now = Date.now();
    const entries = Array.from(this.cache.entries());
    
    // 按优先级和访问时间排序
    entries.sort(([, a], [, b]) => {
      const priorityWeight = {
        low: 0,
        normal: 1,
        high: 2
      };
      
      return priorityWeight[a.priority] - priorityWeight[b.priority] ||
             a.timestamp - b.timestamp;
    });
    
    // 清理低优先级和过期的项目
    let freedSize = 0;
    const targetSize = this.maxCacheSize * 0.5; // 清理到50%
    
    for (const [key, item] of entries) {
      if (this.cacheSize - freedSize <= targetSize) break;
      
      if (item.priority === 'low' || 
          now - item.timestamp > item.ttl) {
        this.cache.delete(key);
        freedSize += item.size;
      }
    }
    
    this.cacheSize -= freedSize;
  }
  
  estimateSize(obj) {
    // 简单的大小估算
    return new Blob([JSON.stringify(obj)]).size;
  }
  
  // 监控内存使用
  monitorMemoryUsage() {
    if ('memory' in performance) {
      setInterval(() => {
        const memory = performance.memory;
        const used = memory.usedJSHeapSize;
        const limit = memory.jsHeapSizeLimit;
        
        const usagePercent = (used / limit) * 100;
        
        if (usagePercent > 80) {
          this.aggressiveCleanup();
        }
      }, 30000); // 每30秒检查一次
    }
  }
  
  aggressiveCleanup() {
    // 强制清理更多缓存
    this.maxCacheSize = Math.floor(this.maxCacheSize * 0.7);
    this.cleanup();
  }
}

性能监控和持续优化

实时性能监控

// 性能监控系统
class PerformanceMonitor {
  constructor() {
    this.metrics = new Map();
    this.observers = [];
    this.setupPerformanceObserver();
  }
  
  setupPerformanceObserver() {
    // 监控长任务
    if ('PerformanceObserver' in window) {
      const longTaskObserver = new PerformanceObserver((list) => {
        list.getEntries().forEach(entry => {
          if (entry.duration > 50) { // 超过50ms的任务
            this.recordMetric('long-tasks', entry);
            this.analyzeLongTask(entry);
          }
        });
      });
      
      longTaskObserver.observe({ entryTypes: ['longtask'] });
    }
    
    // 监控布局偏移
    const layoutShiftObserver = new PerformanceObserver((list) => {
      list.getEntries().forEach(entry => {
        if (!entry.hadRecentInput) {
          this.recordMetric('layout-shifts', entry);
        }
      });
    });
    
    layoutShiftObserver.observe({ entryTypes: ['layout-shift'] });
  }
  
  recordMetric(name, data) {
    if (!this.metrics.has(name)) {
      this.metrics.set(name, []);
    }
    this.metrics.get(name).push({
      ...data,
      timestamp: Date.now()
    });
  }
  
  analyzeLongTask(entry) {
    // 分析长任务的来源
    console.warn('检测到长任务:', {
      duration: entry.duration,
      name: entry.name,
      startTime: entry.startTime
    });
    
    // 可以发送到分析服务
    this.sendToAnalytics('long-task', entry);
  }
  
  // 获取核心Web Vitals
  getCoreWebVitals() {
    return {
      FCP: this.getFirstContentfulPaint(),
      LCP: this.getLargestContentfulPaint(),
      FID: this.getFirstInputDelay(),
      CLS: this.getCumulativeLayoutShift(),
      TTFB: this.getTimeToFirstByte()
    };
  }
  
  getFirstContentfulPaint() {
    const paintEntries = performance.getEntriesByType('paint');
    const fcp = paintEntries.find(entry => entry.name === 'first-contentful-paint');
    return fcp ? fcp.startTime : null;
  }
  
  // 性能评分
  calculatePerformanceScore() {
    const vitals = this.getCoreWebVitals();
    let score = 100;
    
    // FCP评分 (权重10%)
    if (vitals.FCP > 3000) score -= 10;
    else if (vitals.FCP > 2000) score -= 5;
    
    // LCP评分 (权重25%)
    if (vitals.LCP > 4000) score -= 25;
    else if (vitals.LCP > 2500) score -= 15;
    
    // FID评分 (权重10%)
    if (vitals.FID > 300) score -= 10;
    else if (vitals.FID > 100) score -= 5;
    
    // CLS评分 (权重15%)
    if (vitals.CLS > 0.25) score -= 15;
    else if (vitals.CLS > 0.1) score -= 7;
    
    return Math.max(0, score);
  }
}

结果验证和持续改进

A/B测试性能优化

// 性能优化A/B测试框架
class PerformanceABTest {
  constructor() {
    this.variants = new Map();
    this.currentVariant = null;
    this.results = new Map();
  }
  
  // 定义优化变体
  defineVariant(name, optimizations) {
    this.variants.set(name, {
      optimizations,
      metrics: [],
      participants: 0
    });
  }
  
  // 分配用户到变体
  assignVariant() {
    const variants = Array.from(this.variants.keys());
    const randomIndex = Math.floor(Math.random() * variants.length);
    this.currentVariant = variants[randomIndex];
    
    // 应用优化
    this.applyOptimizations(this.currentVariant);
    
    return this.currentVariant;
  }
  
  applyOptimizations(variantName) {
    const variant = this.variants.get(variantName);
    
    variant.optimizations.forEach(optimization => {
      switch (optimization.type) {
        case 'resource-loading':
          this.applyResourceLoadingOptimizations(optimization.config);
          break;
        case 'rendering':
          this.applyRenderingOptimizations(optimization.config);
          break;
        case 'javascript':
          this.applyJavascriptOptimizations(optimization.config);
          break;
      }
    });
  }
  
  // 记录性能指标
  recordMetrics(variantName, metrics) {
    const variant = this.variants.get(variantName);
    if (variant) {
      variant.metrics.push(metrics);
      variant.participants++;
    }
  }
  
  // 分析测试结果
  analyzeResults() {
    const analysis = {};
    
    this.variants.forEach((variant, name) => {
      const metrics = variant.metrics;
      
      analysis[name] = {
        participants: variant.participants,
        averageFCP: this.calculateAverage(metrics, 'fcp'),
        averageLCP: this.calculateAverage(metrics, 'lcp'),
        averageCLS: this.calculateAverage(metrics, 'cls'),
        conversionRate: this.calculateConversionRate(metrics)
      };
    });
    
    return analysis;
  }
  
  calculateAverage(metrics, metricName) {
    const values = metrics.map(m => m[metricName]).filter(Boolean);
    return values.reduce((sum, val) => sum + val, 0) / values.length;
  }
  
  calculateConversionRate(metrics) {
    const conversions = metrics.filter(m => m.converted).length;
    return conversions / metrics.length;
  }
}

// 使用示例
const abTest = new PerformanceABTest();

// 定义变体
abTest.defineVariant('control', []); // 无优化

abTest.defineVariant('optimized-v1', [
  {
    type: 'resource-loading',
    config: { criticalCSS: true, fontPreload: true }
  }
]);

abTest.defineVariant('optimized-v2', [
  {
    type: 'resource-loading', 
    config: { criticalCSS: true, fontPreload: true, imageLazyLoad: true }
  },
  {
    type: 'javascript',
    config: { codeSplitting: true, taskScheduling: true }
  }
]);

// 分配变体并应用优化
const userVariant = abTest.assignVariant();