头图

Client Side Cache 和 Server Side Cache 的区别

Cache me outside

缓存是一种优化网页加载时间并优化其使用的内存量的持久化机制。

Cache 的定义

出于篇幅限制,本文重点介绍 Web 缓存。 当您加载网站时,网站数据(如图像、视频和 html 文档)将被保存。 重新加载网站后,它不会调用数据库再次获取该数据。 它只是将数据从内存中读取。

缓存以容量换取速度,缓存通常会暂时存储数据的子集,而数据库的数据通常是完整且持久的。

Client Side Caching

客户端缓存通常称为浏览器缓存,尽管客户端缓存是一个稍微宽泛的术语。其运行原理如下图所示:

一旦浏览器从服务器请求数据,它就会将其存储到浏览器创建的文件夹中。 下次打开网页时,它不会调用服务器获取数据,而是从浏览器缓存文件夹中提取数据。

Server Side Caching

服务器端缓存是一个类似的概念,但稍微复杂一些。

一旦用户向网站发出请求,其数据就会存储在服务器上。 下次用户发出请求时,它只需从服务器取回保存的数据,无需从数据库中提取数据,从而节省时间。

这些缓存由站点管理员实现,充当浏览器和源服务器之间的中介。 它们通常也基于 HTTP 缓存指令。

Remote Caching

远程缓存类似于服务器端缓存,但它也可以运行应用程序来序列化和反序列化数据。 不同之处在于您可以控制远程服务器,而不是由其他人操作。

通常通过应用程序代码或使用可以利用内存中数据存储的应用程序框架来检索 Web 内容。

Server-Side vs Remote vs Client Side

主要区别在于网站的数据在本地保存在客户端缓存中,而在服务器端缓存中可以分发给所有用户,而在远程中,数据也得到处理。
大多数精心设计的网站或应用程序将同时使用服务器端和客户端。

Why caching?

通过减少后端资源的负载和网络拥塞,缓存 Web 内容有助于提高网站的响应能力。 - AWS

Downside

如果您尝试访问的网站已更新,则在清除缓存之前您可能看不到更新。 这可能发生在您之前,特别是如果您是一名 Web 开发人员并且您正在尝试更新您网站的设计。 如果缓存存储在您的客户端,解决方案很简单。

这适用于客户端缓存,如果服务器端缓存没有正确处理这种情况,可能会在服务器端缓存上返回错误。
如果您使用远程缓存,它可以处理该错误并为您清除缓存并为您加载新请求。

简而言之,client side cache:

您的网络浏览器(Chrome、Firefox、Safari 或任何您使用的浏览器)决定记住网页的外观,因此不必再次请求服务器发送网页。 这通过消除几乎整个网络通信来节省时间(和带宽)。 但是,如果服务器决定更改网页的外观,您就会遇到麻烦,因为浏览器对它认为页面应该是什么样子的“记忆”现在已经过时了,它会给您一个旧版本的页面而不是新的。 这就是为什么人们有时会告诉您“清除浏览器缓存” - 这会迫使您的浏览器“忘记”页面的外观。 这迫使它向服务器询问页面的新的、更新的版本。

server side cache:

负责生成网页(即,将网页放在一起)的服务器决定记住网页的外观,因此不必再次生成它。 这节省了时间(但不是带宽),因为现在服务器不必经历构建整个页面的麻烦——它可以重新发送上次浏览器请求时发送的任何内容。 但是,如果网页上的任何数据需要更改,服务器将被迫丢弃其对页面外观的“记忆”,并需要重新生成页面。 如果页面真的很复杂并且需要很多时间来生成,这种缓存很有用。

更多Jerry的原创文章,尽在:"汪子熙":


Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使
868 声望
1.6k 粉丝
0 条评论
推荐阅读
SAP Corbu Theme 在浏览器和 SAPGUI 应用中的使用场景
SAP Corbu Theme 是一种清新、现代且独特的视觉标识。 它以瑞士建筑师兼设计师 Charles-Édouard Jeanneret,又名 Le Corbusier 的名字命名。 该设计有意保持中立,以与各种遗留内容(Legacy content)融为一体。

JerryWang_汪子熙阅读 788

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan41阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
868 声望
1.6k 粉丝
宣传栏