安泥分享

个人前端学习与分享 · JavaScript / TypeScript / React

前端性能排查清单（入门版）

2023-12-09 · 性能 · 学习笔记

性能优化往往被视为“玄学”，但实际上它是一门精密测量的工程学科。 在 2025 年的今天，我们不再仅仅关注“页面加载完了吗”，而是关注“用户觉得页面顺畅吗”。 这份清单基于 Google Web Vitals 及现代浏览器特性，旨在提供一套可执行、系统化的排查路径。

1. 核心指标（Core Web Vitals）的精准诊断

不要只看 Lighthouse 的总分，要拆解核心指标。Google 已经明确将 Core Web Vitals 纳入搜索排名因素， 这意味着性能优化不仅是技术追求，更是商业价值的直接体现。

LCP 优化的深层技巧

LCP 不仅仅是"图片要快"这么简单。需要优化的是整个资源加载链路： 

<!-- 错误示例：LCP 图片被懒加载 -->
<img src="hero.jpg" loading="lazy" alt="Hero Image" />

<!-- 正确示例：预加载并设置高优先级 -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high" />
<img src="hero.jpg" alt="Hero Image" fetchpriority="high" />

更进一步，如果 LCP 元素是背景图，使用内联的关键 CSS 而非外部样式表： 

<style>
  .hero {
    background-image: url('hero.jpg');
    width: 100%;
    aspect-ratio: 16/9;
  }
</style>

INP 的常见陷阱

INP 取代了旧的 FID（First Input Delay），更全面地衡量页面的交互响应性。它不仅看首次交互，而是监控整个生命周期中最差的交互延迟。

典型的 INP 杀手包括： 

// 优化前：长任务阻塞主线程
function processLargeData(items) {
  items.forEach(item => heavyComputation(item));
}

// 优化后：使用 scheduler.yield() 切片任务
async function processLargeData(items) {
  for (const item of items) {
    heavyComputation(item);
    await scheduler.yield();  // 让出主线程，允许浏览器处理用户交互
  }
}

CLS 的隐蔽来源

布局偏移往往来自这些意想不到的地方： 

<!-- 防止 Web Font 导致的 CLS -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap;  /* 先显示系统字体，加载完成后切换 */
  }
</style>

2. 关键渲染路径（Critical Rendering Path）优化

浏览器渲染页面的步骤是线性的，任何阻塞都会导致白屏。理解关键渲染路径的每个环节，是优化的前提：

  1. 解析 HTML，构建 DOM 树
  2. 解析 CSS，构建 CSSOM 树
  3. 合并 DOM 和 CSSOM，生成渲染树（Render Tree）
  4. 布局（Layout）：计算每个元素的几何信息
  5. 绘制（Paint）：将像素绘制到屏幕

CSS 和 同步 JavaScript 都会阻塞渲染。优化的核心是：减少阻塞资源，提前加载关键资源。

Critical CSS 内联策略

<!-- 内联关键 CSS -->
<style>
  /* 只包含首屏可见区域的样式 */
  body { margin: 0; font-family: sans-serif; }
  .header { height: 60px; background: #fff; }
</style>

<!-- 异步加载完整样式 -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="styles.css" /></noscript>

Resource Hints 的正确使用

浏览器提供了多种资源提示（Resource Hints）来优化加载： 

<!-- 预连接到 CDN -->
<link rel="preconnect" href="https://cdn.example.com" />

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

<!-- 预取下一页可能用到的资源 -->
<link rel="prefetch" href="/page2.html" />

3. 资源体积与加载策略

网络传输是物理瓶颈，体积越小越好。在 3G/4G 网络环境下，每 100KB 的资源都可能导致数百毫秒的加载延迟。

响应式图片的完整方案

<picture>
  <!-- 现代浏览器：优先使用 AVIF -->
  <source srcset="image.avif" type="image/avif" />
  <!-- 降级到 WebP -->
  <source srcset="image.webp" type="image/webp" />
  <!-- 最终降级到 JPEG -->
  <img src="image.jpg" alt="Responsive Image"
       width="800" height="600"
       loading="lazy"
       decoding="async" />
</picture>

Tree Shaking 的边界

很多开发者以为现代打包工具会自动 Tree Shake，但实际上只有 ES Modules 且标记为 "sideEffects": false 的包才能被充分优化。 

// ❌ 错误：导入整个 lodash（体积 ~70KB gzipped）
import _ from 'lodash';

// ✅ 正确：只导入需要的函数
import debounce from 'lodash-es/debounce';

// 或者使用现代替代品
import { debounce } from 'es-toolkit';  // 仅 2KB

4. 主线程解放：React/Vue 框架层优化

在现代 SPA 中，React Hydration 往往是主线程的杀手。Hydration 是指服务端渲染的 HTML 在客户端被 React "激活"的过程， 需要重新执行所有组件逻辑来重建虚拟 DOM 树。对于大型应用，这可能阻塞主线程数百毫秒。

React 19 的新优化特性

React 19 引入了 use Hook 和改进的 Suspense，允许更细粒度的流式渲染： 

import { use, Suspense } from 'react';

function Comments({ commentsPromise }) {
  // use() 可以在组件中解包 Promise
  const comments = use(commentsPromise);
  return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul>;
}

function Page() {
  const commentsPromise = fetchComments();  // 不需要 await
  return (
    <Suspense fallback={<Skeleton />}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

虚拟滚动的实现要点

使用 react-window 或 @tanstack/react-virtual： 

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList({ items }) {
  const parentRef = useRef(null);
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,  // 每项预估高度
    overscan: 5  // 可见区域外额外渲染的项数
  });

  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div key={virtualRow.index} style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            transform: `translateY(${virtualRow.start}px)`
          }}>
            {items[virtualRow.index].name}
          </div>
        ))}
      </div>
    </div>
  );
}

5. 网络协议与缓存策略

如果服务器响应慢，前端做再多也是徒劳。

6. 观测与监控体系

优化不是一次性的工作。必须建立RUM (Real User Monitoring) 体系。 不要只信赖开发机的 Lighthouse 分数，真实用户的设备网络千差万别。 接入 Sentry、Datadog 或自研监控，实时收集用户的 Web Vitals 数据，设置告警阈值。 无法度量，就无法优化。

小结

前端性能优化已经从“奇技淫巧”转变为体系化的工程实践。 先建立指标（Metrics），再定位瓶颈（Profiling），最后实施优化（Optimization）并持续监控（Monitoring）。 永远记住：最快的请求是不用发送的请求，最快的渲染是不需要执行的 JS。