前端性能优化实战：从加载到渲染的完整指南

网页加载速度直接影响用户体验和业务转化率。研究表明，页面加载时间每增加1秒，转化率就会下降7%。本文将系统地介绍前端性能优化的各个方面，帮助你构建飞速响应的Web应用。

性能指标详解

Core Web Vitals（核心Web指标）

Google定义的三个关键性能指标：

1. LCP（Largest Contentful Paint）最大内容绘制

目标：< 2.5秒
含义：页面主要内容加载完成的时间
优化方向：优化服务器响应时间、减小资源体积

// 监控LCP
new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
}).observe({ entryTypes: ['largest-contentful-paint'] });

2. FID（First Input Delay）首次输入延迟

目标：< 100毫秒
含义：用户首次交互到浏览器响应的时间
优化方向：减少JavaScript执行时间、代码分割

3. CLS（Cumulative Layout Shift）累积布局偏移

目标：< 0.1
含义：页面元素意外移动的程度
优化方向：为图片设置尺寸、避免动态插入内容

其他重要指标

// 使用Performance API获取性能数据
window.addEventListener('load', () => {
  const perfData = performance.timing;

  // DNS查询时间
  const dnsTime = perfData.domainLookupEnd - perfData.domainLookupStart;

  // TCP连接时间
  const tcpTime = perfData.connectEnd - perfData.connectStart;

  // 请求响应时间
  const requestTime = perfData.responseEnd - perfData.requestStart;

  // DOM解析时间
  const domTime = perfData.domComplete - perfData.domLoading;

  // 页面加载总时间
  const loadTime = perfData.loadEventEnd - perfData.navigationStart;

  console.log({
    dnsTime,
    tcpTime,
    requestTime,
    domTime,
    loadTime,
  });
});

资源加载优化

1. 减少HTTP请求

合并资源：

<!-- ❌ 多个小文件 -->
<script src="utils.js"></script>
<script src="helpers.js"></script>
<script src="api.js"></script>

<!-- ✅ 合并或使用模块打包 -->
<script src="bundle.js"></script>

使用雪碧图：

/* CSS Sprites */
.icon {
  background-image: url('sprites.png');
  background-repeat: no-repeat;
}

.icon-home {
  background-position: 0 0;
  width: 24px;
  height: 24px;
}

.icon-user {
  background-position: -24px 0;
  width: 24px;
  height: 24px;
}

内联关键CSS：

<head>
  <!-- 内联关键CSS，避免额外请求 -->
  <style>
    /* Critical CSS */
    body {
      margin: 0;
      font-family: sans-serif;
    }
    .header {
      background: #333;
      color: white;
    }
  </style>

  <!-- 非关键CSS异步加载 -->
  <link
    rel="preload"
    href="styles.css"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
  />
  <noscript><link rel="stylesheet" href="styles.css" /></noscript>
</head>

2. 使用CDN

<!-- 使用CDN加速静态资源 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

<!-- 预连接到CDN -->
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />

3. 资源预加载

<!-- preload: 高优先级，当前页面必需 -->
<link rel="preload" href="main.js" as="script" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

<!-- prefetch: 低优先级，未来可能需要 -->
<link rel="prefetch" href="next-page.js" />

<!-- preconnect: 提前建立连接 -->
<link rel="preconnect" href="https://api.example.com" />

<!-- dns-prefetch: 提前DNS解析 -->
<link rel="dns-prefetch" href="https://analytics.example.com" />

4. 懒加载

// 图片懒加载
const images = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      imageObserver.unobserve(img);
    }
  });
});

images.forEach((img) => imageObserver.observe(img));

// HTML写法
// <img data-src="real-image.jpg" src="placeholder.jpg" alt="...">

代码优化

1. 代码分割（Code Splitting）

// 动态import实现路由级代码分割
const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('./views/About.vue'),
  },
];

// React.lazy + Suspense
import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

2. Tree Shaking

// ❌ 导入整个库
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ 只导入需要的函数
import debounce from 'lodash/debounce';
debounce(fn, 300);

// 或使用 lodash-es
import { debounce } from 'lodash-es';

webpack配置：

// webpack.config.js
module.exports = {
  mode: 'production', // 自动启用Tree Shaking
  optimization: {
    usedExports: true,
    minimize: true,
  },
};

3. 压缩代码

// 使用Terser压缩JavaScript
// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除console
            drop_debugger: true, // 移除debugger
          },
        },
      }),
    ],
  },
};

4. 防抖和节流

// 防抖：延迟执行，频繁触发只执行最后一次
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 使用场景：搜索输入、窗口resize
const handleSearch = debounce((query) => {
  fetchSearchResults(query);
}, 300);

// 节流：固定时间内只执行一次
function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// 使用场景：滚动事件、鼠标移动
const handleScroll = throttle(() => {
  console.log('Scroll event');
}, 100);

渲染性能优化

1. 减少重排和重绘

// ❌ 多次修改样式，触发多次重排
element.style.width = '100px';
element.style.height = '100px';
element.style.border = '1px solid black';

// ✅ 批量修改，只触发一次重排
element.style.cssText = 'width: 100px; height: 100px; border: 1px solid black;';

// 或使用class
element.className = 'new-style';

// ❌ 读取layout属性导致强制同步布局
const height = element.offsetHeight;
element.style.height = height + 10 + 'px';

// ✅ 批量读取，批量写入
const heights = elements.map((el) => el.offsetHeight);
elements.forEach((el, i) => {
  el.style.height = heights[i] + 10 + 'px';
});

2. 使用DocumentFragment

// ❌ 逐个添加，多次重排
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  list.appendChild(li); // 每次都触发重排
}

// ✅ 使用DocumentFragment，只重排一次
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment); // 只触发一次重排

3. 使用requestAnimationFrame

// ❌ 直接操作可能不流畅
function animate() {
  element.style.left = parseFloat(element.style.left) + 1 + 'px';
  setTimeout(animate, 16); // 约60fps
}

// ✅ 使用requestAnimationFrame
function animate() {
  element.style.left = parseFloat(element.style.left) + 1 + 'px';
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

// 实用动画函数
function animateValue(obj, prop, start, end, duration) {
  const startTime = performance.now();

  function update(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);

    obj[prop] = start + (end - start) * progress;

    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

// 使用
const obj = { value: 0 };
animateValue(obj, 'value', 0, 100, 1000);

4. 虚拟滚动

// 大列表虚拟滚动
class VirtualScroller {
  constructor(container, items, itemHeight) {
    this.container = container;
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleCount = Math.ceil(container.clientHeight / itemHeight);
    this.startIndex = 0;

    this.render();
    container.addEventListener('scroll', () => this.handleScroll());
  }

  handleScroll() {
    const scrollTop = this.container.scrollTop;
    this.startIndex = Math.floor(scrollTop / this.itemHeight);
    this.render();
  }

  render() {
    const endIndex = Math.min(this.startIndex + this.visibleCount + 1, this.items.length);

    const visibleItems = this.items.slice(this.startIndex, endIndex);

    this.container.innerHTML = `
      <div style="height: ${this.items.length * this.itemHeight}px; position: relative;">
        ${visibleItems
          .map(
            (item, i) => `
          <div style="position: absolute; top: ${(this.startIndex + i) * this.itemHeight}px; height: ${this.itemHeight}px;">
            ${item}
          </div>
        `
          )
          .join('')}
      </div>
    `;
  }
}

// 使用
const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
new VirtualScroller(document.getElementById('list'), items, 40);

图片优化

1. 选择正确的格式

<!-- 使用WebP，提供JPEG/PNG降级 -->
<picture>
  <source type="image/webp" srcset="image.webp" />
  <source type="image/jpeg" srcset="image.jpg" />
  <img src="image.jpg" alt="..." />
</picture>

<!-- SVG适合图标和简单图形 -->
<img src="icon.svg" alt="Icon" />

2. 响应式图片

<!-- 根据屏幕宽度加载不同尺寸 -->
<img
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="
    (max-width: 480px) 480px,
    (max-width: 800px) 800px,
    1200px
  "
  src="large.jpg"
  alt="Responsive image"
/>

3. 图片压缩

// 使用Canvas压缩图片
function compressImage(file, maxWidth, quality = 0.8) {
  return new Promise((resolve) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 计算缩放比例
        const scale = maxWidth / img.width;
        canvas.width = maxWidth;
        canvas.height = img.height * scale;

        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(resolve, 'image/jpeg', quality);
      };
      img.src = e.target.result;
    };

    reader.readAsDataURL(file);
  });
}

// 使用
const compressed = await compressImage(file, 800, 0.7);

缓存策略

1. HTTP缓存头

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

location ~* \.(html)$ {
  expires -1;
  add_header Cache-Control "no-cache";
}

2. Service Worker缓存

// sw.js
const CACHE_NAME = 'v1';
const urlsToCache = ['/', '/styles/main.css', '/script/main.js'];

// 安装Service Worker
self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(urlsToCache)));
});

// 拦截请求
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // 缓存命中，返回缓存
      if (response) {
        return response;
      }
      // 否则发起网络请求
      return fetch(event.request);
    })
  );
});

3. LocalStorage/IndexedDB缓存

// 简单的LocalStorage缓存封装
class Cache {
  static set(key, value, ttl = 3600000) {
    // 默认1小时
    const item = {
      value,
      expiry: Date.now() + ttl,
    };
    localStorage.setItem(key, JSON.stringify(item));
  }

  static get(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;

    const item = JSON.parse(itemStr);
    if (Date.now() > item.expiry) {
      localStorage.removeItem(key);
      return null;
    }

    return item.value;
  }
}

// 使用
Cache.set('user', { name: 'John' }, 60000); // 缓存1分钟
const user = Cache.get('user');

性能监控

1. 使用Performance API

// 性能监控工具类
class PerformanceMonitor {
  static measure(name, startMark, endMark) {
    performance.measure(name, startMark, endMark);
    const measure = performance.getEntriesByName(name)[0];
    console.log(`${name}: ${measure.duration}ms`);
    return measure.duration;
  }

  static async trackFunction(name, fn) {
    performance.mark(`${name}-start`);
    const result = await fn();
    performance.mark(`${name}-end`);
    this.measure(name, `${name}-start`, `${name}-end`);
    return result;
  }
}

// 使用
await PerformanceMonitor.trackFunction('fetchData', async () => {
  const data = await fetch('/api/data');
  return data.json();
});

2. 错误监控

// 全局错误监控
window.addEventListener('error', (event) => {
  console.error('Global error:', {
    message: event.message,
    source: event.filename,
    line: event.lineno,
    column: event.colno,
    error: event.error,
  });

  // 发送到监控服务
  sendToMonitoring('error', {
    message: event.message,
    stack: event.error?.stack,
  });
});

// Promise错误监控
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);

  sendToMonitoring('promise-error', {
    reason: event.reason,
  });
});

function sendToMonitoring(type, data) {
  // 使用navigator.sendBeacon确保数据发送
  const blob = new Blob([JSON.stringify({ type, data })], {
    type: 'application/json',
  });
  navigator.sendBeacon('/api/monitoring', blob);
}

实战案例

案例：优化大型列表渲染

// 优化前：一次性渲染10000条数据
function renderList(items) {
  const html = items.map((item) => `<li>${item}</li>`).join('');
  document.getElementById('list').innerHTML = html;
}

// 优化后：使用虚拟滚动 + 分批渲染
class OptimizedList {
  constructor(container, items) {
    this.container = container;
    this.items = items;
    this.batchSize = 20;
    this.currentBatch = 0;

    this.initVirtualScroll();
    this.renderBatch();
  }

  renderBatch() {
    const start = this.currentBatch * this.batchSize;
    const end = Math.min(start + this.batchSize, this.items.length);

    const fragment = document.createDocumentFragment();
    for (let i = start; i < end; i++) {
      const li = document.createElement('li');
      li.textContent = this.items[i];
      fragment.appendChild(li);
    }

    this.container.appendChild(fragment);

    if (end < this.items.length) {
      this.currentBatch++;
      requestIdleCallback(() => this.renderBatch());
    }
  }

  initVirtualScroll() {
    // 虚拟滚动逻辑...
  }
}

总结

前端性能优化是一个持续的过程，需要关注：

关键要点

测量优先：先测量，再优化
用户感知：优化用户可感知的性能
渐进增强：保证基本功能，逐步优化
持续监控：建立性能监控体系

优化清单

✅ 优化Core Web Vitals指标
✅ 减少HTTP请求数量
✅ 启用代码分割和懒加载
✅ 优化图片和静态资源
✅ 实施缓存策略
✅ 监控性能数据

前端性能优化实战：从加载到渲染的完整指南

性能指标详解

Core Web Vitals（核心Web指标）

Google定义的三个关键性能指标：

1. LCP（Largest Contentful Paint）最大内容绘制

目标：< 2.5秒
含义：页面主要内容加载完成的时间
优化方向：优化服务器响应时间、减小资源体积

// 监控LCP
new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
}).observe({ entryTypes: ['largest-contentful-paint'] });

2. FID（First Input Delay）首次输入延迟

目标：< 100毫秒
含义：用户首次交互到浏览器响应的时间
优化方向：减少JavaScript执行时间、代码分割

3. CLS（Cumulative Layout Shift）累积布局偏移

目标：< 0.1
含义：页面元素意外移动的程度
优化方向：为图片设置尺寸、避免动态插入内容

其他重要指标

// 使用Performance API获取性能数据
window.addEventListener('load', () => {
  const perfData = performance.timing;

  // DNS查询时间
  const dnsTime = perfData.domainLookupEnd - perfData.domainLookupStart;

  // TCP连接时间
  const tcpTime = perfData.connectEnd - perfData.connectStart;

  // 请求响应时间
  const requestTime = perfData.responseEnd - perfData.requestStart;

  // DOM解析时间
  const domTime = perfData.domComplete - perfData.domLoading;

  // 页面加载总时间
  const loadTime = perfData.loadEventEnd - perfData.navigationStart;

  console.log({
    dnsTime,
    tcpTime,
    requestTime,
    domTime,
    loadTime,
  });
});

资源加载优化

1. 减少HTTP请求

合并资源：

<!-- ❌ 多个小文件 -->
<script src="utils.js"></script>
<script src="helpers.js"></script>
<script src="api.js"></script>

<!-- ✅ 合并或使用模块打包 -->
<script src="bundle.js"></script>

使用雪碧图：

/* CSS Sprites */
.icon {
  background-image: url('sprites.png');
  background-repeat: no-repeat;
}

.icon-home {
  background-position: 0 0;
  width: 24px;
  height: 24px;
}

.icon-user {
  background-position: -24px 0;
  width: 24px;
  height: 24px;
}

内联关键CSS：

<head>
  <!-- 内联关键CSS，避免额外请求 -->
  <style>
    /* Critical CSS */
    body {
      margin: 0;
      font-family: sans-serif;
    }
    .header {
      background: #333;
      color: white;
    }
  </style>

  <!-- 非关键CSS异步加载 -->
  <link
    rel="preload"
    href="styles.css"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
  />
  <noscript><link rel="stylesheet" href="styles.css" /></noscript>
</head>

2. 使用CDN

<!-- 使用CDN加速静态资源 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

<!-- 预连接到CDN -->
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />

3. 资源预加载

<!-- preload: 高优先级，当前页面必需 -->
<link rel="preload" href="main.js" as="script" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

<!-- prefetch: 低优先级，未来可能需要 -->
<link rel="prefetch" href="next-page.js" />

<!-- preconnect: 提前建立连接 -->
<link rel="preconnect" href="https://api.example.com" />

<!-- dns-prefetch: 提前DNS解析 -->
<link rel="dns-prefetch" href="https://analytics.example.com" />

4. 懒加载

// 图片懒加载
const images = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      imageObserver.unobserve(img);
    }
  });
});

images.forEach((img) => imageObserver.observe(img));

// HTML写法
// <img data-src="real-image.jpg" src="placeholder.jpg" alt="...">

代码优化

1. 代码分割（Code Splitting）

// 动态import实现路由级代码分割
const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('./views/About.vue'),
  },
];

// React.lazy + Suspense
import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

2. Tree Shaking

// ❌ 导入整个库
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ 只导入需要的函数
import debounce from 'lodash/debounce';
debounce(fn, 300);

// 或使用 lodash-es
import { debounce } from 'lodash-es';

webpack配置：

// webpack.config.js
module.exports = {
  mode: 'production', // 自动启用Tree Shaking
  optimization: {
    usedExports: true,
    minimize: true,
  },
};

3. 压缩代码

// 使用Terser压缩JavaScript
// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除console
            drop_debugger: true, // 移除debugger
          },
        },
      }),
    ],
  },
};

4. 防抖和节流

// 防抖：延迟执行，频繁触发只执行最后一次
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 使用场景：搜索输入、窗口resize
const handleSearch = debounce((query) => {
  fetchSearchResults(query);
}, 300);

// 节流：固定时间内只执行一次
function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// 使用场景：滚动事件、鼠标移动
const handleScroll = throttle(() => {
  console.log('Scroll event');
}, 100);

渲染性能优化

1. 减少重排和重绘

// ❌ 多次修改样式，触发多次重排
element.style.width = '100px';
element.style.height = '100px';
element.style.border = '1px solid black';

// ✅ 批量修改，只触发一次重排
element.style.cssText = 'width: 100px; height: 100px; border: 1px solid black;';

// 或使用class
element.className = 'new-style';

// ❌ 读取layout属性导致强制同步布局
const height = element.offsetHeight;
element.style.height = height + 10 + 'px';

// ✅ 批量读取，批量写入
const heights = elements.map((el) => el.offsetHeight);
elements.forEach((el, i) => {
  el.style.height = heights[i] + 10 + 'px';
});

2. 使用DocumentFragment

// ❌ 逐个添加，多次重排
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  list.appendChild(li); // 每次都触发重排
}

// ✅ 使用DocumentFragment，只重排一次
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment); // 只触发一次重排

3. 使用requestAnimationFrame

// ❌ 直接操作可能不流畅
function animate() {
  element.style.left = parseFloat(element.style.left) + 1 + 'px';
  setTimeout(animate, 16); // 约60fps
}

// ✅ 使用requestAnimationFrame
function animate() {
  element.style.left = parseFloat(element.style.left) + 1 + 'px';
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

// 实用动画函数
function animateValue(obj, prop, start, end, duration) {
  const startTime = performance.now();

  function update(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);

    obj[prop] = start + (end - start) * progress;

    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

// 使用
const obj = { value: 0 };
animateValue(obj, 'value', 0, 100, 1000);

4. 虚拟滚动

// 大列表虚拟滚动
class VirtualScroller {
  constructor(container, items, itemHeight) {
    this.container = container;
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleCount = Math.ceil(container.clientHeight / itemHeight);
    this.startIndex = 0;

    this.render();
    container.addEventListener('scroll', () => this.handleScroll());
  }

  handleScroll() {
    const scrollTop = this.container.scrollTop;
    this.startIndex = Math.floor(scrollTop / this.itemHeight);
    this.render();
  }

  render() {
    const endIndex = Math.min(this.startIndex + this.visibleCount + 1, this.items.length);

    const visibleItems = this.items.slice(this.startIndex, endIndex);

    this.container.innerHTML = `
      <div style="height: ${this.items.length * this.itemHeight}px; position: relative;">
        ${visibleItems
          .map(
            (item, i) => `
          <div style="position: absolute; top: ${(this.startIndex + i) * this.itemHeight}px; height: ${this.itemHeight}px;">
            ${item}
          </div>
        `
          )
          .join('')}
      </div>
    `;
  }
}

// 使用
const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
new VirtualScroller(document.getElementById('list'), items, 40);

图片优化

1. 选择正确的格式

<!-- 使用WebP，提供JPEG/PNG降级 -->
<picture>
  <source type="image/webp" srcset="image.webp" />
  <source type="image/jpeg" srcset="image.jpg" />
  <img src="image.jpg" alt="..." />
</picture>

<!-- SVG适合图标和简单图形 -->
<img src="icon.svg" alt="Icon" />

2. 响应式图片

<!-- 根据屏幕宽度加载不同尺寸 -->
<img
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="
    (max-width: 480px) 480px,
    (max-width: 800px) 800px,
    1200px
  "
  src="large.jpg"
  alt="Responsive image"
/>

3. 图片压缩

// 使用Canvas压缩图片
function compressImage(file, maxWidth, quality = 0.8) {
  return new Promise((resolve) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 计算缩放比例
        const scale = maxWidth / img.width;
        canvas.width = maxWidth;
        canvas.height = img.height * scale;

        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(resolve, 'image/jpeg', quality);
      };
      img.src = e.target.result;
    };

    reader.readAsDataURL(file);
  });
}

// 使用
const compressed = await compressImage(file, 800, 0.7);

缓存策略

1. HTTP缓存头

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

location ~* \.(html)$ {
  expires -1;
  add_header Cache-Control "no-cache";
}

2. Service Worker缓存

// sw.js
const CACHE_NAME = 'v1';
const urlsToCache = ['/', '/styles/main.css', '/script/main.js'];

// 安装Service Worker
self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(urlsToCache)));
});

// 拦截请求
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // 缓存命中，返回缓存
      if (response) {
        return response;
      }
      // 否则发起网络请求
      return fetch(event.request);
    })
  );
});

3. LocalStorage/IndexedDB缓存

// 简单的LocalStorage缓存封装
class Cache {
  static set(key, value, ttl = 3600000) {
    // 默认1小时
    const item = {
      value,
      expiry: Date.now() + ttl,
    };
    localStorage.setItem(key, JSON.stringify(item));
  }

  static get(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;

    const item = JSON.parse(itemStr);
    if (Date.now() > item.expiry) {
      localStorage.removeItem(key);
      return null;
    }

    return item.value;
  }
}

// 使用
Cache.set('user', { name: 'John' }, 60000); // 缓存1分钟
const user = Cache.get('user');

性能监控

1. 使用Performance API

// 性能监控工具类
class PerformanceMonitor {
  static measure(name, startMark, endMark) {
    performance.measure(name, startMark, endMark);
    const measure = performance.getEntriesByName(name)[0];
    console.log(`${name}: ${measure.duration}ms`);
    return measure.duration;
  }

  static async trackFunction(name, fn) {
    performance.mark(`${name}-start`);
    const result = await fn();
    performance.mark(`${name}-end`);
    this.measure(name, `${name}-start`, `${name}-end`);
    return result;
  }
}

// 使用
await PerformanceMonitor.trackFunction('fetchData', async () => {
  const data = await fetch('/api/data');
  return data.json();
});

2. 错误监控

// 全局错误监控
window.addEventListener('error', (event) => {
  console.error('Global error:', {
    message: event.message,
    source: event.filename,
    line: event.lineno,
    column: event.colno,
    error: event.error,
  });

  // 发送到监控服务
  sendToMonitoring('error', {
    message: event.message,
    stack: event.error?.stack,
  });
});

// Promise错误监控
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);

  sendToMonitoring('promise-error', {
    reason: event.reason,
  });
});

function sendToMonitoring(type, data) {
  // 使用navigator.sendBeacon确保数据发送
  const blob = new Blob([JSON.stringify({ type, data })], {
    type: 'application/json',
  });
  navigator.sendBeacon('/api/monitoring', blob);
}

实战案例

案例：优化大型列表渲染

// 优化前：一次性渲染10000条数据
function renderList(items) {
  const html = items.map((item) => `<li>${item}</li>`).join('');
  document.getElementById('list').innerHTML = html;
}

// 优化后：使用虚拟滚动 + 分批渲染
class OptimizedList {
  constructor(container, items) {
    this.container = container;
    this.items = items;
    this.batchSize = 20;
    this.currentBatch = 0;

    this.initVirtualScroll();
    this.renderBatch();
  }

  renderBatch() {
    const start = this.currentBatch * this.batchSize;
    const end = Math.min(start + this.batchSize, this.items.length);

    const fragment = document.createDocumentFragment();
    for (let i = start; i < end; i++) {
      const li = document.createElement('li');
      li.textContent = this.items[i];
      fragment.appendChild(li);
    }

    this.container.appendChild(fragment);

    if (end < this.items.length) {
      this.currentBatch++;
      requestIdleCallback(() => this.renderBatch());
    }
  }

  initVirtualScroll() {
    // 虚拟滚动逻辑...
  }
}

总结

前端性能优化是一个持续的过程，需要关注：

关键要点

测量优先：先测量，再优化
用户感知：优化用户可感知的性能
渐进增强：保证基本功能，逐步优化
持续监控：建立性能监控体系

优化清单

✅ 优化Core Web Vitals指标
✅ 减少HTTP请求数量
✅ 启用代码分割和懒加载
✅ 优化图片和静态资源
✅ 实施缓存策略
✅ 监控性能数据

前端性能优化实战：从加载到渲染的完整指南

前端性能优化实战：从加载到渲染的完整指南

目录

性能指标详解

Core Web Vitals（核心Web指标）

其他重要指标

资源加载优化

1. 减少HTTP请求

2. 使用CDN

3. 资源预加载

4. 懒加载

代码优化

1. 代码分割（Code Splitting）

2. Tree Shaking

3. 压缩代码

4. 防抖和节流

渲染性能优化

1. 减少重排和重绘

2. 使用DocumentFragment

3. 使用requestAnimationFrame

4. 虚拟滚动

图片优化

1. 选择正确的格式

2. 响应式图片

3. 图片压缩

缓存策略

1. HTTP缓存头

2. Service Worker缓存

3. LocalStorage/IndexedDB缓存

性能监控

1. 使用Performance API

2. 错误监控

实战案例

案例：优化大型列表渲染

总结

关键要点

优化清单

相关工具

相关阅读

时间戳与时区处理完全指南：从Unix时间到全球化应用

浏览器API完全指南：FileReader、Canvas、Web Workers深度解析

哈希算法与数据安全实践：MD5、SHA家族完全指南

前端性能优化实战：从加载到渲染的完整指南

前端性能优化实战：从加载到渲染的完整指南

目录

性能指标详解

Core Web Vitals（核心Web指标）

其他重要指标

资源加载优化

1. 减少HTTP请求

2. 使用CDN

3. 资源预加载

4. 懒加载

代码优化

1. 代码分割（Code Splitting）

2. Tree Shaking

3. 压缩代码

4. 防抖和节流

渲染性能优化

1. 减少重排和重绘

2. 使用DocumentFragment

3. 使用requestAnimationFrame

4. 虚拟滚动

图片优化

1. 选择正确的格式

2. 响应式图片

3. 图片压缩

缓存策略

1. HTTP缓存头

2. Service Worker缓存

3. LocalStorage/IndexedDB缓存

性能监控

1. 使用Performance API

2. 错误监控

实战案例

案例：优化大型列表渲染

总结

关键要点

优化清单

相关工具