跳到主要内容

性能优化最佳实践详解

1. 最小化资源大小​

原理​

最小化资源大小是通过删除未使用的代码、压缩资源、优化数据结构等方式，减小文件体积，从而减少网络传输时间和提高加载速度。

代码示例​

// 删除未使用的代码
// 优化前
function calculateTotal(a, b) {
  const sum = a + b;
  const product = a * b; // 未使用的代码
  return sum;
}

// 优化后
function calculateTotal(a, b) {
  return a + b;
}

// 使用Tree Shaking移除未使用的导出
// module.js
export function usedFunction() {
  return 'This function is used';
}

export function unusedFunction() {
  return 'This function is not used';
}

// app.js - 只导入使用的函数
import { usedFunction } from './module';
console.log(usedFunction());

方案对比​

优化方法适用场景优点缺点
Tree ShakingES模块代码自动移除未使用代码对CommonJS模块无效
代码压缩所有代码减小文件体积降低可读性
资源压缩图像、字体等显著减小体积可能有质量损失
手动清理所有代码针对性强耗时长

实际案例​

Google通过移除Google Search页面中未使用的CSS和JavaScript，将页面大小减小了30%，加载速度提升了25%。

2. 减少HTTP请求​

原理​

HTTP请求是前端性能的主要瓶颈之一。减少HTTP请求可以减少网络延迟和服务器负载，提高页面加载速度。

代码示例​

<!-- 合并CSS文件 -->
<!-- 优化前 -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="components.css">

<!-- 优化后 -->
<link rel="stylesheet" href="bundle.css">

<!-- CSS Sprite 合并图像 -->
<style>
  .icon {
    background-image: url('sprites.png');
    background-repeat: no-repeat;
    display: inline-block;
  }
  .icon-home {
    width: 24px;
    height: 24px;
    background-position: 0 0;
  }
  .icon-settings {
    width: 24px;
    height: 24px;
    background-position: -24px 0;
  }
</style>

<span class="icon icon-home"></span>
<span class="icon icon-settings"></span>

方案对比​

减少请求方法适用场景优点缺点
文件合并CSS、JavaScript减少请求数增加单个文件体积
CSS Sprite小图标减少图像请求维护困难，更新麻烦
内联资源小资源避免额外请求增加HTML体积
字体图标图标减少图像请求，可缩放兼容性问题

实际案例​

Amazon通过合并CSS文件和使用CSS Sprite，将首页的HTTP请求从100+减少到30+，页面加载速度提升了40%。

3. 优化关键渲染路径​

原理​

关键渲染路径是指浏览器从获取HTML、CSS和JavaScript到渲染出页面的过程。优化关键渲染路径可以减少首屏加载时间，提高用户体验。

代码示例​

<!-- 内联关键CSS -->
<style>
  /* 关键CSS - 首屏所需的样式 */
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .header {
    background-color: #333;
    color: white;
    padding: 1rem;
  }
  .hero {
    height: 50vh;
    background-image: url('hero.jpg');
    background-size: cover;
  }
</style>

<!-- 延迟加载非关键CSS -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

<!-- 异步加载JavaScript -->
<script async src="app.js"></script>

方案对比​

优化方法适用场景优点缺点
内联关键CSS首屏样式减少CSS阻塞增加HTML体积
延迟加载非关键CSS非首屏样式不阻塞渲染可能导致样式闪烁
异步加载JS非关键JS不阻塞渲染可能导致依赖问题
预加载关键资源关键资源提前加载可能浪费带宽

实际案例​

BBC通过优化关键渲染路径，将首屏加载时间从3秒减少到1秒，页面浏览量增加了20%。

4. 避免阻塞渲染​

原理​

CSS和JavaScript会阻塞页面渲染。避免阻塞渲染可以让页面更快地显示内容，提高用户体验。

代码示例​

<!-- 异步加载JavaScript -->
<script async src="analytics.js"></script>

<!-- 延迟加载JavaScript -->
<script defer src="app.js"></script>

<!-- 动态加载JavaScript -->
<script>
  // 页面加载完成后再加载非关键JS
  window.addEventListener('load', function() {
    const script = document.createElement('script');
    script.src = 'non-critical.js';
    document.head.appendChild(script);
  });
</script>

<!-- 媒体查询优化CSS加载 -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 769px)">

方案对比​

避免阻塞方法适用场景优点缺点
async属性独立JS文件立即下载，不阻塞HTML解析执行顺序不确定
defer属性有依赖的JS文件保持执行顺序，不阻塞解析不支持IE9以下
动态加载非关键JS完全控制加载时机实现复杂
媒体查询针对不同设备的CSS只加载当前设备需要的CSS增加文件数量

实际案例​

LinkedIn通过异步加载非关键JavaScript，将首屏加载时间缩短了1.2秒，用户停留时间增加了15%。

5. 使用适当的缓存策略​

原理​

缓存策略是通过在客户端或服务器端存储已加载的资源，避免重复下载，从而减少网络请求次数和带宽消耗。

代码示例​

// 服务器端缓存配置 (Nginx)
location ~* \.(js|css|png|jpg|jpeg|gif|svg)$ {
  expires 1y;  # 缓存1年
  add_header Cache-Control "public, max-age=31536000";
  add_header ETag "$entity_body";
  add_header Last-Modified "$date_gmt";
}

// 版本控制策略
<script src="app.js?v=1.2.3"></script>
<link rel="stylesheet" href="style.css?v=1.2.3">

// 文件指纹策略
<script src="app.abc123.js"></script>
<link rel="stylesheet" href="style.def456.css">

方案对比​

缓存策略适用场景优点缺点
长期缓存不变资源减少重复请求更新困难
版本控制频繁更新资源便于更新URL变更导致缓存失效
文件指纹所有资源自动管理缓存构建复杂
条件请求动态内容只在内容变化时下载需要服务器支持

实际案例​

Facebook通过优化缓存策略，将静态资源的缓存命中率提升到95%以上，减少了40%的网络流量。

6-11. 其他最佳实践​

后续章节将详细介绍优化图像、使用SVG图标、避免字体闪烁、优化动画性能、减少DOM节点数量和使用虚拟滚动等最佳实践。

6. 优化图像​

原理​

图像通常是网页中最大的资源，优化图像可以显著减少页面加载时间和带宽消耗。通过选择合适的图像格式、压缩图像、使用响应式图像等方式来优化。

代码示例​

<!-- 响应式图像 -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图像" loading="lazy">
</picture>

<!-- 使用WebP格式 -->
<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="WebP图像" loading="lazy">
</picture>

<!-- 懒加载图像 -->
<img src="placeholder.jpg" data-src="actual-image.jpg" 
     alt="懒加载图像" loading="lazy" class="lazy-image">

<script>
  // 懒加载实现
  const lazyImages = document.querySelectorAll('.lazy-image');
  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy-image');
        observer.unobserve(img);
      }
    });
  });
  
  lazyImages.forEach(img => imageObserver.observe(img));
</script>

方案对比​

图像优化方法适用场景优点缺点
响应式图像多设备适配为不同设备提供合适尺寸增加HTML复杂度
WebP格式现代浏览器压缩率高，质量好兼容性问题
懒加载长页面减少初始加载时间实现复杂
图像压缩所有图像减小文件体积可能影响质量

实际案例​

Pinterest通过优化图像和实现懒加载，将页面加载时间减少了40%，用户参与度提升了15%。

7. 使用SVG图标​

原理​

SVG图标是矢量图形，可以无损缩放，文件体积小，支持CSS样式控制，是现代Web应用中图标的理想选择。

代码示例​

<!-- 内联SVG图标 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

<!-- SVG Sprite -->
<svg style="display: none;">
  <defs>
    <symbol id="icon-home" viewBox="0 0 24 24">
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </symbol>
    <symbol id="icon-settings" viewBox="0 0 24 24">
      <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.5-0.24,0.97-0.56,1.39-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
    </symbol>
  </defs>
</svg>

<!-- 使用SVG Sprite -->
<svg class="icon"><use xlink:href="#icon-home"></use></svg>
<svg class="icon"><use xlink:href="#icon-settings"></use></svg>

<style>
  .icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }
  
  .icon:hover {
    fill: #007bff;
    transform: scale(1.1);
    transition: all 0.2s ease;
  }
</style>

方案对比​

SVG使用方式适用场景优点缺点
内联SVG少量图标完全可控，支持动画增加HTML体积
SVG Sprite大量图标复用性好，易于维护需要额外HTTP请求
外部SVG文件复杂图标独立维护，可缓存增加HTTP请求
字体图标简单图标兼容性好，体积小不支持多色，样式限制

实际案例​

GitHub通过将图标系统从字体图标迁移到SVG，提高了图标的清晰度和可定制性，同时减少了字体文件的加载。

8. 避免字体闪烁​

原理​

字体闪烁（FOUT/FOIT）是指网页字体在加载过程中出现的闪烁现象。通过预加载字体、使用字体显示策略等方式来避免。

代码示例​

<!-- 预加载字体 -->
<link rel="preload" href="fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 字体显示策略 -->
<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('fonts/custom-font.woff2') format('woff2');
    font-display: swap; /* 避免字体闪烁 */
  }
  
  body {
    font-family: 'CustomFont', Arial, sans-serif;
  }
</style>

<!-- 字体加载检测 -->
<script>
  // 检测字体是否加载完成
  if ('fonts' in document) {
    document.fonts.load('1em CustomFont').then(() => {
      document.body.classList.add('fonts-loaded');
    });
  }
</script>

方案对比​

避免字体闪烁方法适用场景优点缺点
font-display: swap现代浏览器立即显示备用字体兼容性问题
预加载字体关键字体提前加载，减少闪烁增加带宽消耗
字体加载检测需要精确控制完全控制字体显示实现复杂
内联字体小字体文件避免额外请求增加HTML体积

实际案例​

Medium通过优化字体加载策略，将字体闪烁时间从2秒减少到0.1秒，提升了阅读体验。

9. 优化动画性能​

原理​

动画性能优化是通过使用GPU加速、避免重排重绘、优化动画帧率等方式，确保动画流畅运行，提升用户体验。

代码示例​

/* 使用transform和opacity进行动画 */
.optimized-animation {
  /* 启用GPU加速 */
  transform: translateZ(0);
  will-change: transform, opacity;
  
  /* 使用transform代替left/top */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.optimized-animation:hover {
  transform: translateX(100px) scale(1.1);
  opacity: 0.8;
}

/* 避免重排重绘的动画 */
.bad-animation {
  /* 避免使用会触发重排的属性 */
  transition: width 0.3s ease, height 0.3s ease, left 0.3s ease;
}

.good-animation {
  /* 使用transform进行动画 */
  transition: transform 0.3s ease;
}

.good-animation:hover {
  transform: scale(1.2) translateX(50px);
}
// 使用requestAnimationFrame优化动画
function smoothScroll(target) {
  const startPosition = window.pageYOffset;
  const targetPosition = target.offsetTop;
  const distance = targetPosition - startPosition;
  const duration = 1000;
  let startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, startPosition, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

方案对比​

动画优化方法适用场景优点缺点
GPU加速复杂动画性能好，流畅度高增加内存消耗
requestAnimationFrame自定义动画与浏览器刷新率同步实现复杂
CSS动画简单动画性能好，易于实现控制能力有限
避免重排重绘所有动画性能提升明显需要重新设计动画

实际案例​

Apple官网通过优化动画性能，将页面滚动和交互动画的帧率稳定在60fps，提供了流畅的用户体验。

10. 减少DOM节点数量​

原理​

减少DOM节点数量可以降低内存消耗、提高渲染性能、减少重排重绘，从而提升页面整体性能。

代码示例​

<!-- 优化前：过多的DOM节点 -->
<div class="container">
  <div class="item">
    <div class="item-header">
      <div class="item-title">
        <span class="title-text">标题</span>
      </div>
    </div>
    <div class="item-content">
      <div class="content-text">
        <span>内容描述</span>
      </div>
    </div>
  </div>
</div>

<!-- 优化后：精简的DOM结构 -->
<div class="container">
  <div class="item">
    <h3 class="item-title">标题</h3>
    <p class="item-content">内容描述</p>
  </div>
</div>
// 使用DocumentFragment减少DOM操作
function createItems(count) {
  const fragment = document.createDocumentFragment();
  
  for (let i = 0; i < count; i++) {
    const item = document.createElement('div');
    item.className = 'item';
    item.textContent = `Item ${i}`;
    fragment.appendChild(item);
  }
  
  // 一次性添加到DOM
  document.getElementById('container').appendChild(fragment);
}

// 使用虚拟DOM减少实际DOM节点
class VirtualList {
  constructor(container, itemHeight, visibleCount) {
    this.container = container;
    this.itemHeight = itemHeight;
    this.visibleCount = visibleCount;
    this.items = [];
    this.scrollTop = 0;
    this.startIndex = 0;
    this.endIndex = visibleCount;
    
    this.init();
  }
  
  init() {
    this.setupContainer();
    this.bindEvents();
    this.render();
  }
  
  setupContainer() {
    // 设置容器样式
    this.container.style.position = 'relative';
    this.container.style.overflow = 'auto';
    
    // 创建内容容器
    this.content = document.createElement('div');
    this.content.style.position = 'relative';
    this.content.style.height = `${this.items.length * this.itemHeight}px`;
    this.container.appendChild(this.content);
  }
  
  bindEvents() {
    this.container.addEventListener('scroll', this.handleScroll.bind(this));
    window.addEventListener('resize', this.handleResize.bind(this));
  }
  
  handleScroll() {
    this.scrollTop = this.container.scrollTop;
    this.updateVisibleRange();
    this.render();
  }
  
  handleResize() {
    this.visibleCount = Math.ceil(this.container.clientHeight / this.itemHeight);
    this.updateVisibleRange();
    this.render();
  }
  
  updateVisibleRange() {
    this.startIndex = Math.floor(this.scrollTop / this.itemHeight);
    this.endIndex = Math.min(
      this.startIndex + this.visibleCount + 2, // 添加缓冲区
      this.items.length
    );
  }
  
  render() {
    // 清空现有内容
    this.content.innerHTML = '';
    
    // 渲染可见区域
    for (let i = this.startIndex; i < this.endIndex; i++) {
      const item = this.createItem(this.items[i], i);
      this.content.appendChild(item);
    }
  }
  
  createItem(data, index) {
    const item = document.createElement('div');
    item.className = 'virtual-item';
    item.style.position = 'absolute';
    item.style.top = `${index * this.itemHeight}px`;
    item.style.height = `${this.itemHeight}px`;
    item.style.width = '100%';
    item.style.borderBottom = '1px solid #eee';
    item.style.padding = '10px';
    item.style.boxSizing = 'border-box';
    
    // 根据数据类型渲染内容
    if (typeof data === 'string') {
      item.textContent = data;
    } else if (typeof data === 'object') {
      item.innerHTML = this.renderObject(data);
    }
    
    return item;
  }
  
  renderObject(data) {
    return `
      <div class="item-header">
        <strong>${data.title || 'Untitled'}</strong>
      </div>
      <div class="item-content">
        ${data.content || 'No content'}
      </div>
    `;
  }
  
  // 更新数据
  updateItems(newItems) {
    this.items = newItems;
    this.content.style.height = `${this.items.length * this.itemHeight}px`;
    this.updateVisibleRange();
    this.render();
  }
  
  // 滚动到指定索引
  scrollToIndex(index) {
    const scrollTop = index * this.itemHeight;
    this.container.scrollTop = scrollTop;
  }
}

方案对比​

减少DOM节点方法适用场景优点缺点
精简HTML结构所有页面简单有效可能影响语义化
DocumentFragment批量DOM操作减少重排重绘只适用于JavaScript操作
虚拟滚动长列表显著减少DOM节点实现复杂
组件化复杂界面结构清晰，易于维护需要框架支持

实际案例​

Twitter通过优化DOM结构，将首页的DOM节点数量从10,000+减少到3,000+，页面渲染性能提升了60%。

11. 使用虚拟滚动​

原理​

虚拟滚动是一种只渲染可见区域内容的滚动技术，可以处理大量数据而不会影响性能，特别适用于长列表、表格等场景。

代码示例​

// 完整的虚拟滚动实现
class VirtualScroller {
  constructor(options) {
    this.container = options.container;
    this.itemHeight = options.itemHeight;
    this.items = options.items || [];
    this.visibleCount = Math.ceil(options.container.clientHeight / options.itemHeight);
    this.scrollTop = 0;
    this.startIndex = 0;
    this.endIndex = this.visibleCount;
    
    this.init();
  }
  
  init() {
    this.setupContainer();
    this.bindEvents();
    this.render();
  }
  
  setupContainer() {
    // 设置容器样式
    this.container.style.position = 'relative';
    this.container.style.overflow = 'auto';
    
    // 创建内容容器
    this.content = document.createElement('div');
    this.content.style.position = 'relative';
    this.content.style.height = `${this.items.length * this.itemHeight}px`;
    this.container.appendChild(this.content);
  }
  
  bindEvents() {
    this.container.addEventListener('scroll', this.handleScroll.bind(this));
    window.addEventListener('resize', this.handleResize.bind(this));
  }
  
  handleScroll() {
    this.scrollTop = this.container.scrollTop;
    this.updateVisibleRange();
    this.render();
  }
  
  handleResize() {
    this.visibleCount = Math.ceil(this.container.clientHeight / this.itemHeight);
    this.updateVisibleRange();
    this.render();
  }
  
  updateVisibleRange() {
    this.startIndex = Math.floor(this.scrollTop / this.itemHeight);
    this.endIndex = Math.min(
      this.startIndex + this.visibleCount + 2, // 添加缓冲区
      this.items.length
    );
  }
  
  render() {
    // 清空现有内容
    this.content.innerHTML = '';
    
    // 渲染可见区域
    for (let i = this.startIndex; i < this.endIndex; i++) {
      const item = this.createItem(this.items[i], i);
      this.content.appendChild(item);
    }
  }
  
  createItem(data, index) {
    const item = document.createElement('div');
    item.className = 'virtual-item';
    item.style.position = 'absolute';
    item.style.top = `${index * this.itemHeight}px`;
    item.style.height = `${this.itemHeight}px`;
    item.style.width = '100%';
    item.style.borderBottom = '1px solid #eee';
    item.style.padding = '10px';
    item.style.boxSizing = 'border-box';
    
    // 根据数据类型渲染内容
    if (typeof data === 'string') {
      item.textContent = data;
    } else if (typeof data === 'object') {
      item.innerHTML = this.renderObject(data);
    }
    
    return item;
  }
  
  renderObject(data) {
    return `
      <div class="item-header">
        <strong>${data.title || 'Untitled'}</strong>
      </div>
      <div class="item-content">
        ${data.content || 'No content'}
      </div>
    `;
  }
  
  // 更新数据
  updateItems(newItems) {
    this.items = newItems;
    this.content.style.height = `${this.items.length * this.itemHeight}px`;
    this.updateVisibleRange();
    this.render();
  }
  
  // 滚动到指定索引
  scrollToIndex(index) {
    const scrollTop = index * this.itemHeight;
    this.container.scrollTop = scrollTop;
  }
}

// 使用示例
const container = document.getElementById('virtual-scroll-container');
const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);

const virtualScroller = new VirtualScroller({
  container,
  itemHeight: 50,
  items
});

// 动态更新数据
setTimeout(() => {
  const newItems = Array.from({ length: 5000 }, (_, i) => ({
    title: `Updated Item ${i}`,
    content: `This is the content for item ${i}`
  }));
  virtualScroller.updateItems(newItems);
}, 5000);

方案对比​

虚拟滚动实现方式适用场景优点缺点
原生JavaScript简单场景无依赖，性能好实现复杂
React虚拟化React应用集成度高，生态丰富依赖React
Vue虚拟化Vue应用集成度高，易于使用依赖Vue
第三方库复杂需求功能完整，稳定可靠增加包体积

实际案例​

Facebook通过实现虚拟滚动，成功处理了包含数万条评论的帖子，页面性能提升了80%，用户体验显著改善。

12. 性能监控与分析​

原理​

性能监控是通过收集和分析页面性能指标，识别性能瓶颈，指导优化方向，确保性能优化的持续改进。

代码示例​

// 性能监控工具
class PerformanceMonitor {
  constructor() {
    this.metrics = {};
    this.init();
  }
  
  init() {
    this.observeNavigationTiming();
    this.observeResourceTiming();
    this.observeUserTiming();
    this.observeLongTasks();
  }
  
  // 监控页面加载性能
  observeNavigationTiming() {
    if ('performance' in window) {
      window.addEventListener('load', () => {
        setTimeout(() => {
          const navigation = performance.getEntriesByType('navigation')[0];
          const paint = performance.getEntriesByType('paint');
          
          this.metrics.navigation = {
            DNS查询时间: navigation.domainLookupEnd - navigation.domainLookupStart,
            TCP连接时间: navigation.connectEnd - navigation.connectStart,
            首字节时间: navigation.responseStart - navigation.requestStart,
            DOM解析时间: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
            页面加载时间: navigation.loadEventEnd - navigation.loadEventStart,
            首次绘制: paint.find(p => p.name === 'first-paint')?.startTime,
            首次内容绘制: paint.find(p => p.name === 'first-contentful-paint')?.startTime
          };
          
          this.logMetrics('页面加载性能', this.metrics.navigation);
        }, 0);
      });
    }
  }
  
  // 监控资源加载性能
  observeResourceTiming() {
    if ('PerformanceObserver' in window) {
      const resourceObserver = new PerformanceObserver((list) => {
        list.getEntries().forEach((entry) => {
          if (entry.initiatorType === 'img' || entry.initiatorType === 'script') {
            this.metrics.resources = this.metrics.resources || [];
            this.metrics.resources.push({
              名称: entry.name,
              类型: entry.initiatorType,
              大小: entry.transferSize,
              加载时间: entry.duration,
              开始时间: entry.startTime
            });
          }
        });
      });
      
      resourceObserver.observe({ entryTypes: ['resource'] });
    }
  }
  
  // 监控用户交互性能
  observeUserTiming() {
    // 监控点击响应时间
    document.addEventListener('click', (e) => {
      const startTime = performance.now();
      
      // 使用setTimeout模拟异步操作
      setTimeout(() => {
        const responseTime = performance.now() - startTime;
        this.metrics.userInteractions = this.metrics.userInteractions || [];
        this.metrics.userInteractions.push({
          类型: 'click',
          响应时间: responseTime,
          目标: e.target.tagName
        });
        
        if (responseTime > 100) {
          console.warn(`点击响应时间过长: ${responseTime.toFixed(2)}ms`);
        }
      }, 0);
    });
  }
  
  // 监控长任务
  observeLongTasks() {
    if ('PerformanceObserver' in window) {
      const longTaskObserver = new PerformanceObserver((list) => {
        list.getEntries().forEach((entry) => {
          if (entry.duration > 50) {
            this.metrics.longTasks = this.metrics.longTasks || [];
            this.metrics.longTasks.push({
              持续时间: entry.duration,
              开始时间: entry.startTime,
              名称: entry.name
            });
            
            console.warn(`检测到长任务: ${entry.duration.toFixed(2)}ms - ${entry.name}`);
          }
        });
      });
      
      longTaskObserver.observe({ entryTypes: ['longtask'] });
    }
  }
  
  // 输出性能指标
  logMetrics(title, data) {
    console.group(`📊 ${title}`);
    Object.entries(data).forEach(([key, value]) => {
      if (typeof value === 'number') {
        console.log(`${key}: ${value.toFixed(2)}ms`);
      } else {
        console.log(`${key}: ${value}`);
      }
    });
    console.groupEnd();
  }
  
  // 获取性能报告
  getReport() {
    return this.metrics;
  }
  
  // 发送性能数据到服务器
  sendToServer() {
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/performance', JSON.stringify(this.metrics));
    } else {
      // 降级方案
      fetch('/api/performance', {
        method: 'POST',
        body: JSON.stringify(this.metrics),
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }
}

// 使用性能监控
const monitor = new PerformanceMonitor();

// 页面卸载时发送数据
window.addEventListener('beforeunload', () => {
  monitor.sendToServer();
});

方案对比​

性能监控方法适用场景优点缺点
Navigation Timing API页面加载性能标准API，兼容性好信息有限
Performance Observer实时性能监控实时性好，信息丰富兼容性问题
自定义性能标记业务逻辑性能针对性强，灵活度高需要手动添加
第三方监控工具企业级应用功能完整，易于使用成本高，隐私问题

实际案例​

Google通过Chrome DevTools的性能分析工具，帮助开发者识别和解决性能问题，提升了整个Web生态的性能水平。

总结​

性能优化最佳实践是前端开发中积累的经验总结，通过遵循这些实践，可以有效提升页面性能和用户体验。在实际项目中，应根据具体情况选择合适的优化策略，并持续监控和调整。

关键要点回顾​

  1. 资源优化: 最小化资源大小、减少HTTP请求、使用适当的缓存策略
  2. 渲染优化: 优化关键渲染路径、避免阻塞渲染、减少DOM节点数量
  3. 交互优化: 优化动画性能、使用虚拟滚动、避免字体闪烁
  4. 监控分析: 持续监控性能指标、识别瓶颈、指导优化方向

优化建议​

  • 渐进式优化: 从影响最大的问题开始，逐步优化
  • 数据驱动: 使用性能监控工具收集数据，基于数据做决策
  • 用户体验优先: 在优化性能的同时，保持功能的完整性和易用性
  • 持续改进: 性能优化是一个持续的过程，需要定期评估和调整

注意事项​

  • 避免过度优化，平衡性能与开发效率
  • 考虑不同设备和网络环境下的性能表现
  • 关注核心Web指标（Core Web Vitals）
  • 在优化过程中保持代码的可维护性

通过系统性地应用这些最佳实践，可以显著提升Web应用的性能，为用户提供更好的体验，同时为业务增长奠定坚实的基础。