FE-12-网络与性能优化：HTTP 缓存、CDN、懒加载

字数统计: 2.3k字   |   阅读时长≈ 11分

FE-12-网络与性能优化：HTTP 缓存、CDN、懒加载

本节目标：理解 HTTP 缓存体系、CDN 原理、懒加载策略、Web Vitals 指标，能用 Chrome DevTools 诊断性能问题。

1. 性能指标

1.1 经典指标

1
2
3
4
5
6
7
8
TTFB (Time To First Byte)        服务器响应时间
FCP (First Contentful Paint)     首次内容绘制
LCP (Largest Contentful Paint)   最大内容绘制 ← Core Web Vital
TTI (Time To Interactive)         可交互时间
TBT (Total Blocking Time)        总阻塞时间
CLS (Cumulative Layout Shift)    累积布局偏移 ← Core Web Vital
FID (First Input Delay)          首次输入延迟
INP (Interaction to Next Paint)  下一次绘制交互 ← 替代 FID

Core Web Vitals（2024+）：

  • LCP < 2.5s（优秀）
  • INP < 200ms（优秀）
  • CLS < 0.1（优秀）

1.2 测量工具

1
2
3
4
5
Lighthouse（Chrome DevTools）        单页综合评分
PageSpeed Insights                    在线测试
web-vitals 库                        真实用户监控（RUM）
Chrome Performance 面板              详细火焰图
WebPageTest                          多地点测试

2. HTTP 缓存机制

2.1 强缓存（不发送请求）

1
2
3
4
5
6
7
8
服务器响应：
Cache-Control: max-age=3600, public
ETag: "abc123"      （可选）
Last-Modified: Mon, 01 Jan 2024 ...（可选）

浏览器后续请求：
If-None-Match: "abc123"      （强缓存命中则不发此请求）
If-Modified-Since: ...       （同上）

Cache-Control 指令：

1
2
3
4
5
6
7
8
9
Cache-Control: max-age=3600          # 缓存 1 小时
Cache-Control: no-cache              # 每次都要回源校验（不是不缓存！）
Cache-Control: no-store              # 完全不缓存
Cache-Control: public                # 共享缓存（CDN 可缓存）
Cache-Control: private               # 私有缓存（仅浏览器）
Cache-Control: s-maxage=3600         # 共享缓存覆盖 max-age
Cache-Control: must-revalidate      # 过期必须回源
Cache-Control: immutable            # 永不过期（带 hash 资源）
Cache-Control: stale-while-revalidate=60  # 过期后 60s 内用旧值

实战设置：

1
2
3
4
5
6
7
8
9
10
# 带 hash 的静态资源（永久缓存）
location ~* \.(js|css|woff2|jpg|png|svg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# HTML（每次校验）
location / {
  add_header Cache-Control "no-cache";
}

2.2 协商缓存（304 Not Modified）

强缓存过期后：

1
2
3
4
5
6
7
8
9
10
11
请求头：
If-None-Match: "abc123"
If-Modified-Since: Mon, 01 Jan 2024 ...

服务器响应（资源未变）：
HTTP/1.1 304 Not Modified
ETag: "abc123"

或者（资源已变）：
HTTP/1.1 200 OK
+ 新内容

ETag vs Last-Modified：

  • ETag：内容哈希，更准确
  • Last-Modified：修改时间，可能误判（内容没变但时间变了）

最佳实践：两者都设置。

2.3 Vary 响应头

根据不同请求返回不同内容时使用：

1
2
3
4
Vary: Accept-Encoding         # 不同压缩格式缓存不同
Vary: User-Agent             # 移动端/PC 端不同
Vary: Accept-Language        # 不同语言
Vary: Origin                 # CORS

3. CDN 工作原理

3.1 什么是 CDN

CDN = Content Delivery Network，把内容缓存到全球边缘节点，让用户从最近的节点获取。

3.2 流程

1
2
3
4
5
6
7
8
用户（上海）请求 example.com/static/app.js
   ↓
1. DNS 解析：返回最近的 CDN 节点 IP（如 上海电信节点）
   ↓
2. 请求到 CDN 边缘节点
   ↓
3. 节点有缓存 → 直接返回
   没有缓存 → 回源站拉取 → 缓存 → 返回

3.3 常见 CDN

厂商 特点
Cloudflare 全球最大、免费档可用
阿里云 CDN 国内快
腾讯云 CDN 国内快
AWS CloudFront AWS 生态
Fastly Vercel 默认
Vercel Edge Next.js 默认

3.4 资源 URL 加 hash

1
2
3
4
5
<!-- ❌ 旧资源被缓存 -->
<script src="/app.js"></script>

<!-- ✓ 带内容 hash，永久缓存 -->
<script src="/app.a1b2c3d4.js"></script>

Webpack/Vite 自动处理：输出 app.[contenthash:8].js。

4. 懒加载（Lazy Loading）

4.1 图片懒加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 原生属性 -->
<img src="placeholder.jpg" data-src="real.jpg" loading="lazy" alt="...">

<!-- 兼容性更好：用 IntersectionObserver -->
<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
</script>

4.2 路由懒加载

1
2
3
4
5
6
7
8
9
10
// React
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

<Suspense fallback={<Loading />}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Suspense>

4.3 组件懒加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// React: 可见时才加载
import { useState, useRef, useEffect } from 'react';

function LazyComponent({ children, threshold = 0.1 }) {
  const ref = useRef(null);
  const [isVisible, setVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => entry.isIntersecting && setVisible(true),
      { threshold },
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return <div ref={ref}>{isVisible ? children : null}</div>;
}

4.4 虚拟列表

1
npm install react-window
1
2
3
4
5
6
7
8
9
10
11
12
import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={50}
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>Row {index}: {items[index].name}</div>
  )}
</FixedSizeList>

5. 资源优化

5.1 图片

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 现代格式 + 响应式 -->
<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg"
       alt="..."
       width="800" height="400"
       loading="lazy"
       decoding="async"
       srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"
       sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px">
</picture>

工具：

  • 压缩：imagemin、sharp、squoosh
  • 格式转换：cwebp、cavif

5.2 字体

1
2
3
4
5
6
7
/* 关键：font-display */
@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap;        /* 先用回退字体，字体加载完替换 */
  unicode-range: U+26;      /* 子集化：只加载需要的字符 */
}

Google Fonts 优化：

1
2
3
4
<!-- preload 关键字体 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 内联 critical CSS 里的 @font-face -->

5.3 JS Bundle

Tree-shaking：

1
2
3
4
5
// ✓ 命名导入，能 tree-shake
import { debounce } from 'lodash-es';

// ✗ 默认导入整个库
import _ from 'lodash';

动态导入：

1
2
// 按需加载
const chart = await import('./chart.js');

Bundle 分析：

1
npx vite-bundle-visualizer

6. 关键资源预加载

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
  <!-- 高优先级 -->
  <link rel="preload" href="/critical.css" as="style">
  <link rel="preload" href="/hero.jpg" as="image">
  <link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>

  <!-- 下一页预测 -->
  <link rel="prefetch" href="/next-page.html">

  <!-- 跨域预连接 -->
  <link rel="preconnect" href="https://api.example.com">
  <link rel="dns-prefetch" href="//cdn.example.com">
</head>

优先级：

1
2
3
preload > prefetch
preload 让浏览器立即请求（页面渲染前）
prefetch 浏览器空闲时再请求（下一页）

7. Service Worker / PWA

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/app.js',
        '/image.jpg',
      ]);
    }),
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    }),
  );
});

// 注册
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

应用场景：

  • 离线访问
  • 后台同步
  • 推送通知
  • 资源预缓存

8. Web Vitals 优化实战

8.1 LCP 优化

1
2
3
4
5
6
7
8
<!-- 1. 预加载 LCP 图片 -->
<link rel="preload" href="hero.jpg" as="image">

<!-- 2. 内联 critical CSS -->
<style>/* 关键样式 */</style>

<!-- 3. SSR/SSG（首屏 HTML 直出） -->
<!-- 4. 字体 display: swap 避免阻塞 -->

8.2 INP 优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. 长任务拆分
async function process() {
  for (const item of items) {
    await processItem(item);
    await new Promise(r => setTimeout(r, 0));  // 让出主线程
  }
}

// 2. Web Worker 跑重计算
const worker = new Worker('compute.js');
worker.postMessage(bigData);
worker.onmessage = (e) => updateUI(e.data);

// 3. 避免同步 layout
// 用 transform 代替 left/top

8.3 CLS 优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 1. 图片/视频必须有 width/height -->
<img src="x.jpg" width="800" height="400" alt="...">

<!-- 2. 字体回退调整 -->
@font-face {
  font-family: 'Inter';
  size-adjust: 100%;
  ascent-override: 90%;
  /* 调整回退字体的尺寸匹配 */
}

<!-- 3. 动态内容预留空间 -->
<div style="min-height: 200px">...</div>

<!-- 4. 避免在已有内容上方插入元素 -->

9. 实战：性能优化 checklist

1
2
3
4
5
6
7
8
9
10
□ HTML 体积 < 50KB（首屏）
□ 关键 CSS 内联
□ 字体用 woff2 + swap + 子集
□ 图片用 AVIF/WebP + 响应式 srcset
□ JS 用 code splitting（路由级）
□ 长列表用虚拟滚动
□ 设置合适的 Cache-Control
□ 用 CDN 加速静态资源
□ 第三方脚本加 defer/async
□ 监控 Core Web Vitals（web-vitals 库）

10. DevTools 实战

Performance 面板：

1
2
3
4
5
1. Ctrl+Shift+E 录制
2. 刷新页面或操作
3. 看 Main 线程火焰图
4. 找长任务（红色三角）
5. 看 Network 瀑布图

Coverage 面板：

1
2
3
4
- 显示每个 JS/CSS 文件的未使用比例
- 红色 = 没执行
- 蓝色 = 执行了
- 配合代码分割优化

Lighthouse 面板：

1
2
3
- Performance / Accessibility / Best Practices / SEO / PWA
- 每项 0-100 分
- 点击"Learn more"看具体建议

小结

优化 措施
减少请求 合并、雪碧图、inline SVG、icon font
减小体积 Tree-shake、压缩、gzip/brotli
延迟加载 路由懒加载、图片 lazy、虚拟列表
缓存 Cache-Control、Service Worker、HTTP 缓存
CDN 静态资源全走 CDN
预加载 preload、prefetch、preconnect
渲染 SSR/SSG、流式响应、Suspense
监控 RUM、web-vitals、Performance API

性能预算（参考）：

  • JS bundle < 200KB gzipped
  • LCP < 2.5s
  • TTI < 3.8s
  • Lighthouse Performance > 90

下一节讲前端测试：单元/集成/E2E（Vitest/Playwright）。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
Java后端开发、Linux开发、
公众号开发、开源爱好者、Linux

联系QQ:562054870