跳到主要内容

交付与缓存✅

本主题覆盖 CDN/LB、渲染形态与缓存、浏览器与边缘缓存策略。

前端如何利用 CDN 与负载均衡？​

答案

核心概念:

  • 命中率/预热/回源保护；四/七层 LB

延伸阅读:

  • HTTP 缓存

SSR/SSG/ISR 的缓存如何取舍？​

答案

核心概念:

  • 动态/静态/增量再生与新鲜度

将静态资源缓存在本地的方式？​

答案

核心概念:

  • 强/协商缓存：Cache-Control、ETag/If-None-Match、Last-Modified/If-Modified-Since
  • 本地存储：IndexedDB/Cache Storage（推荐）、LocalStorage（仅小体积非关键）
  • Service Worker：拦截请求、预缓存、离线；策略如 Stale-While-Revalidate

示例说明:

// LocalStorage 示例（演示用，生产建议用 Cache Storage/IndexedDB）
const resources = [
  'https://example.com/css/style.css',
  'https://example.com/js/main.js',
  'https://example.com/images/logo.png'
]
resources.forEach(async (url) => {
  const res = await fetch(url)
  if (!res.ok) throw new Error('Request failed: ' + res.status)
  const text = await res.text()
  localStorage.setItem(url, text)
})
// IndexedDB 示例（简化）
const request = indexedDB.open('myDatabase', 1)
request.onupgradeneeded = (event) => {
  const db = event.target.result
  const store = db.createObjectStore('resources', { keyPath: 'url' })
  store.createIndex('url', 'url', { unique: true })
}
request.onsuccess = async (event) => {
  const db = event.target.result
  const tx = db.transaction('resources', 'readwrite')
  const store = tx.objectStore('resources')
  for (const url of resources) {
    const res = await fetch(url)
    if (!res.ok) throw new Error('Request failed: ' + res.status)
    const blob = await res.blob()
    await store.put({ url, data: blob })
  }
}

面试官视角:

  • 是否区分 Cache Storage/IndexedDB 与 LocalStorage 的适用性；是否考虑 SW 更新与失效

延伸阅读:

  • MDN: HTTP Caching / Service Worker API

SPA History 路由 Nginx 配置？​

答案

核心概念:

  • History 路由需将所有请求回退到入口页面，由前端决定渲染

示例说明:

server {
  listen 80;
  server_name example.com;
  location / {
    root /path/to/your/app;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

面试官视角:

  • 是否理解 try_files 的回退作用；静态资源与 API 前缀的区分

如何解决页面请求与资源下载的大规模并发？​

答案

核心概念:

  • 后端聚合/BFF；HTTP/2+ 多路复用；浏览器缓存与 SW；CDN 缓存与预热
  • 资源合并与指纹；服务端渲染/首屏直出；WebSocket 降低往返

延伸阅读:

  • RUM 与回源/命中指标，结合压测评估瓶颈

如何设计缓存失效与预热策略？​

答案

核心概念:

  • 指纹+长缓存、目录切换、预热

如何防止缓存穿透/击穿/雪崩？​

答案

核心概念:

  • 热点保护、随机过期、队列缓冲

边缘计算与函数如何参与渲染？​

答案

核心概念:

  • 边缘重写/注入、个性化与隐私

前端资源优先级与连接策略？​

答案

核心概念:

  • preload/prefetch、HTTP2/3

图片与媒体的多级缓存策略？​

答案

核心概念:

  • 变体/裁剪/格式协商

A/B 与灰度对缓存的一致性影响？​

答案

核心概念:

  • Vary/Key 设计

端到端缓存观测与告警？​

答案

核心概念:

  • 命中率、回源比例、延迟