Edge Cache边缘缓存

什么是边缘缓存？ 🔗︎

边缘缓存是一种将内容缓存在靠近用户的网络边缘节点上的技术。通过将数据存储在离用户更近的地方，边缘缓存能够显著减少延迟并提高页面加载速度。

• 核心原理：利用 CDN（内容分发网络）中的边缘节点缓存静态或动态内容，缩短用户与内容之间的物理距离。
• 优势：
  • 减少网络延迟，提升用户体验。
  • 减轻源服务器的负载，提高系统整体性能。

它解决了什么问题？ 🔗︎

1. 首次访问网页无法利用缓存
   在 PWA（渐进式 Web 应用）等场景中，用户首次访问时无法利用客户端缓存或连接复用，导致页面加载速度较慢。

2. 客户端缓存不可用
   当用户首次访问某个网站时，客户端缓存尚未建立，因此无法加速页面加载。

3. 动态内容的缓存难题
   对于个性化内容较多的场景，直接缓存整个 HTML 并不现实，需要一种既能缓存又能动态生成内容的解决方案。

边缘缓存节点在请求链中的位置 🔗︎

边缘缓存节点通常位于用户和源服务器之间的 CDN（内容分发网络） 中。它充当一个中间层，负责缓存和提供静态或动态内容，从而减少源服务器的负载并加快响应速度。

• 工作流程：
  1. 用户发起请求。
  2. 请求首先到达最近的边缘节点。
  3. 如果边缘节点有缓存的内容，则直接返回给用户；否则，向源服务器请求内容并缓存。

边缘缓存与 SSR、CSR/CDN 的区别 🔗︎

SSR（服务端渲染） 🔗︎

• 问题：
  • 由于服务端渲染需要较长的处理时间，页面的白屏时间会变长。
• 特点：
  • 所有 HTML 内容由服务器生成，适合 SEO 优化。
  • 首次加载速度较慢，但对搜索引擎友好。

CSR/CDN（客户端渲染/内容分发网络） 🔗︎

• 问题：
  • 虽然可以通过 CDN 缓存所有 HTML，但由于每个用户的页面视图可能不同，直接缓存整个 HTML 并不现实。
• 解决方案：
  • 将静态 HTML 缓存到 CDN，并使用 CSR（客户端渲染）来请求动态数据。
  • 这种方法解决了白屏问题，但有意义的内容显示时间比 SSR 更晚。
• 特点：
  • 适合个性化内容较多的场景。
  • 首次加载体验不如 SSR，但可以灵活支持动态内容。

ESR（边缘服务器渲染） 🔗︎

• 优势：
  • 并行处理：CSR/CDN 是串行处理方式（先请求 HTML，然后下载 JS 和 CSS 等资源），而 ESR 采用并行处理方式：CDN 返回缓存的首字节，同时加载动态内容。
  • 连接复用：边缘服务器像 Service Worker 一样处理请求，支持连接复用，进一步减少延迟。
  • 性能提升：相比无 ESR 的方案，页面加载速度可提升约 200ms。
• 特点：
  • 结合了 SSR 和 CSR 的优点。
  • 既减少了白屏时间，又支持动态内容的快速加载。

总结 🔗︎

边缘缓存（尤其是结合 ESR 的方案）为现代 Web 应用提供了更高效的解决方案，能够在保证性能的同时支持动态内容的快速加载，是未来 Web 性能优化的重要方向。