什么是 CDN？如何优化资源加载？

推荐答案

什么是 CDN？

CDN（Content Delivery Network，内容分发网络）是一种分布式网络架构，通过将内容分发到全球多个节点服务器上，使用户能够从离自己最近的节点获取资源，从而加快资源加载速度，降低延迟，并减轻源服务器的负载。

如何优化资源加载？

1. 使用 CDN 加速静态资源：将静态资源（如图片、CSS、JavaScript 文件）托管在 CDN 上，利用 CDN 的全球节点加速资源加载。
2. 合理设置缓存策略：通过设置 HTTP 缓存头（如 Cache-Control 和 Expires），让浏览器缓存静态资源，减少重复请求。
3. 资源压缩：对 CSS、JavaScript 和图片等资源进行压缩（如 Gzip、Brotli），减少传输体积。
4. 按需加载：使用懒加载（Lazy Loading）技术，延迟加载非关键资源（如图片、视频），优先加载首屏内容。
5. 减少 HTTP 请求：通过合并文件（如 CSS Sprites、合并 JS 文件）或使用 HTTP/2 多路复用技术，减少请求次数。
6. 预加载关键资源：使用 <link rel="preload"> 或 <link rel="prefetch"> 提前加载关键资源，提升页面渲染速度。

本题详细解读

CDN 的工作原理

CDN 通过在全球范围内部署多个边缘节点服务器，将内容缓存到离用户最近的节点。当用户请求资源时，CDN 会根据用户的地理位置，将请求路由到最优节点，从而减少数据传输距离，提升加载速度。

优化资源加载的具体方法

1. CDN 加速：

   • 将静态资源托管在 CDN 上，利用 CDN 的分布式网络加速资源加载。
   • 选择支持 HTTP/2 和 HTTPS 的 CDN 服务，进一步提升性能。

2. 缓存策略：

   • 设置 Cache-Control: max-age=31536000 对长期不变的资源进行强缓存。
   • 使用 ETag 或 Last-Modified 实现协商缓存，减少重复传输。

3. 资源压缩：

   • 使用 Gzip 或 Brotli 压缩文本资源（如 HTML、CSS、JS）。
   • 对图片使用 WebP 或 AVIF 格式，减少图片体积。

4. 按需加载：

   • 使用 Intersection Observer API 实现图片或组件的懒加载。
   • 将非关键 JavaScript 标记为 async 或 defer，避免阻塞页面渲染。

5. 减少 HTTP 请求：

   • 使用 CSS Sprites 合并小图标，减少图片请求。
   • 通过 Webpack 等工具合并 JavaScript 和 CSS 文件。

6. 预加载关键资源：

   • 使用 <link rel="preload"> 提前加载关键字体、CSS 或 JavaScript 文件。
   • 使用 <link rel="prefetch"> 预加载下一页可能用到的资源。