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

去年我接手一个电商落地页，老板天天问为什么投放进来的人转化这么差。我打开 Lighthouse 一看，LCP 6.2 秒——首屏那张 Banner 是设计师直接导出的 4MB PNG，没压缩、没转格式、没设宽高。换成 WebP 加上预加载，LCP 直接掉到 1.8 秒，那个月的转化率肉眼可见地涨了一截。

后来还踩过更离谱的：有个同事图省事 import moment from 'moment'，就为了格式化一个日期，结果整个语言包一起打进来，bundle 凭空胖了将近 300KB。还有一次列表加载完图片才回来撑开高度，用户正要点"加入购物车"，按钮被挤下去，手指点到了"删除"，客服那周收了一堆投诉——这就是 CLS 没控制好的代价。

这些坑我基本都亲手填过一遍。下面把我这几年攒下来的经验整理出来，从加载、代码到渲染，能省你不少时间。先说一句最重要的：别凭感觉优化，先打开 DevTools 测一遍再动手。

性能指标详解

Core Web Vitals（核心Web指标）

先把三个指标的"及格线"和我踩过的真实杀手列一张表，背都背下来——这是 Google 排名和用户体感共用的标尺：

指标	达标线	常见杀手（我亲历的）
LCP（最大内容绘制）	< 2.5s	没压缩的首屏大图、阻塞渲染的字体、慢吞吞的接口
FID / INP（交互延迟）	< 100ms	主线程被一大坨同步 JS 卡住、第三方脚本乱跑
CLS（累积布局偏移）	< 0.1	图片不写宽高、广告/弹窗动态插入、字体加载抖动

说句实话，三个里我最怕 CLS，因为它在本机开发时几乎感觉不到，全是真实用户在弱网下才暴露，最隐蔽。下面逐个拆。

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() {
    // 虚拟滚动逻辑...
  }
}

写在最后

唠叨这么多，我自己真正信的就一句话：先测量，再优化，别凭感觉。 我见过太多人上来就上虚拟滚动、上 SSR，结果一跑火焰图发现卡顿根本不在那儿。按我的经验，九成的卡顿就两个来源——图片体积和 JS 体积，把这两块抠干净，剩下的微优化大多是锦上添花。

还有个我吃过亏才明白的道理：优化要盯着真实用户的数据，别只看自己那台 M 系列 Mac 加千兆网。线上一堆人是中端安卓加弱网，你本机 LCP 1 秒，他们可能 5 秒。Lighthouse 跑出来的分数是参考，真正的真相在 RUM 数据里。

顺带提一句，文里压缩图片、格式化代码那几个工具我都放在这站上，纯浏览器本地处理，不上传你的文件，隐私这块可以放心。先把首屏大图和臃肿的 import 收拾了，回头再来抠细节，效果立竿见影。有问题评论区聊，祝你的 LCP 早日跌破 2.5 秒。

关键要点

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

优化清单

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

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

性能指标详解

Core Web Vitals（核心Web指标）

先把三个指标的"及格线"和我踩过的真实杀手列一张表，背都背下来——这是 Google 排名和用户体感共用的标尺：

指标	达标线	常见杀手（我亲历的）
LCP（最大内容绘制）	< 2.5s	没压缩的首屏大图、阻塞渲染的字体、慢吞吞的接口
FID / INP（交互延迟）	< 100ms	主线程被一大坨同步 JS 卡住、第三方脚本乱跑
CLS（累积布局偏移）	< 0.1	图片不写宽高、广告/弹窗动态插入、字体加载抖动

说句实话，三个里我最怕 CLS，因为它在本机开发时几乎感觉不到，全是真实用户在弱网下才暴露，最隐蔽。下面逐个拆。

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. 错误监控

实战案例

案例：优化大型列表渲染

写在最后

关键要点

优化清单

相关工具