缓存静态和动态内容:它是如何工作的?

与静态内容不同,动态内容对于每个用户而言都是不同的,这也意味着无法将其提供给多个用户,并且很难进行高速缓存。但是,使用正确的技术可以高速缓存动态内容。

学习目标

阅读本文后,您将能够:

  • 区分静态内容与动态内容
  • 了解为何难以缓存动态内容,以及新技术如何使缓存动态内容成为可能
  • 了解动态内容缓存和动态内容压缩之间的区别
  • 了解Edge Side Includes标签如何使缓存动态网页的静态部分成为可能

相关内容


想要继续学习吗?

订阅 TheNET,这是 Cloudflare 每月对互联网上最流行见解的总结!

参阅 Cloudflare 的隐私政策,了解我们如何收集和处理您的个人数据。

复制文章链接

静态内容和动态内容有什么区别?

静态内容是存储在服务器中的任何文件,并且每次交付给用户时都是相同的。HTML文件和图像就是此类内容的示例。静态内容就像报纸:发行一期报纸后,无论日后有什么新进展,它都只会为所有索取副本的人提供相同的文章和照片。

动态内容是根据用户特定的因素(例如访问时间,位置和设备)而变化的内容。一个动态的网页对于每个人来说看起来都不一样,并且可以随着用户与之交互而改变,就像一张可以在有人阅读时重新书写的报纸一样。这使网页更加个性化和更具交互性。

静态网页 动态网页

现代新闻网站是动态内容的一个很好的例子:与报纸不同,文章是全天更新的,并且首页可能会根据站点访问者的位置或登录状态显示不同的标题。社交媒体页面是另一个示例:Facebook 新闻提要对于每个用户而言看起来完全不同,用户能够与内容进行交互以更改内容(通过喜欢,分享或评论帖子)。

动态网页不存储为静态 HTML 文件。相反,服务器端脚本生成 HTML 文件以响应事件,例如用户交互或用户登录,并将 HTML 文件发送到 Web 浏览器。由于动态内容是在服务器端生成的,它通常是从源服务器而非缓存提供的。

长期以来,动态内容被认为是不可缓存的。但新技术允许网站从缓存提供动态内容,在维持用户体验交互的同时显著减少延迟

如何缓存静态内容?

通常情况下,web 缓存过程是在提供内容是由缓存保存静态文件(例如图像)的副本,以便下次能在更接近该用户的地方更快地提供。浏览器和内容分发网络(CDN)能在设定的时间段内缓存静态内容,并在继续收到对内容的请求时向用户提供。这是因为静态内容不会随着时间而变化;相同的文件可以反复提供给用户。

动态内容缓存如何工作?

动态内容由更改页面内容的脚本生成。通过在 CDN 缓存中而不是在远程原始服务器中运行脚本,可以生成动态内容并从缓存中传递动态内容。因此,动态内容本质上被"缓存了" ,不必从源服务器提供,减少了对客户端请求的响应时间,并加快了动态网页的速度。

例如, Cloudflare Workers是在 Cloudflare CDN 上运行的无服务器 JavaScript 函数。它们可以响应各种事件和输入,包括设备类型、一天中的时间、用户位置或来自第三方 API 的数据。基于这些参数,服务器可以生成动态内容并将其提供给客户端设备,或者可以更改、缓存或从缓存中清除静态内容。

因为 Cloudflare Workers 是 JavaScript 代码,所以除了缓存动态内容外,开发人员还可以使用它们来构建各种功能或整个应用程序。此外,Cloudflare Workers 可以部署到 CDN 节点并几秒钟内传播到全球。

Cloudflare Workers 在轻量级执行环境中运行,以便代码能在在几毫秒内启动并执行。它们允许开发人员运行代码而无需费神配置后端。进一步了解无服务器计算

动态内容缓存和动态内容压缩之间有什么区别?

另一个加速动态网页的方式是压缩源服务器生成的动态内容并尽可能快速和高效地交付。借助动态压缩,内容依然来自源服务器而非缓存,但所产生的 HTML 文件被明显缩小,从而能更迅速地到达客户端设备。

使用 Edge Side Includes(ESI)如何加快动态网页的速度?

通常,动态网页上的大量内容对于所有用户而言都是一致的,页面上只有某些元素是动态的。这意味着在页面的每个动态副本中,许多 HTML 代码都是重复的。为了解决这种低效率问题,许多公司共同开发了 Edge Side Includes(ESI),这是一种标记语言,用于指定动态内容在网页上的显示位置。 (ESI 在某些 CDN 上使用,但尚未被管理 Web 标准的组织 W3C接受。)

带有 ESI 标签的内容是从其他地方获取的,而网页的其余内容可以被缓存。如果仅部分网页是动态生成的,而余下部分被缓存,那么网页加载速度将远远快于需要为每个用户生成整个网页。ESI 可与 Cloudflare Workers 结合使用,使这个过程更加高效。