专栏首页大闲人柴毛毛架构高性能网站秘笈(三)——浏览器缓存

架构高性能网站秘笈(三)——浏览器缓存

什么是浏览器缓存?

《架构高性能网站秘笈(二)——动态内容缓存》中我们知道,当不同用户请求相同数据时,动态内容缓存能够避免服务器的重复计算,从而降低用户的等待时间。但如果是同一个用户请求相同的数据,即使服务器能避免重复计算,但仍需将重复的数据传递给浏览器。若使用浏览器缓存,则同一个用户请求相同的数据时,浏览器只需从自己本地读取,无需从服务器上获取。从而大大降低用户的等待时间,减少了服务器的压力,可谓一箭双雕!

浏览器是如何处理缓存的?

是否启用浏览器缓存是通过HTTP协议控制的。 浏览器在接收服务器传来的页面后,会将页面存入本地缓存。如果响应头中包含了页面的过期时间,那么当用户请求相同的页面时,浏览器会询问服务器是否可以使用缓存页面,若服务器同意使用缓存,则返回304状态码;若服务器不同意,则将新的页面返回给浏览器,并携带200状态码。

此外,如果响应头中未包含启用浏览器缓存属性的话,浏览器仍然会缓存当前页,但下次请求相同页面时浏览器会直接向服务器请求新的页面,而不会询问是否使用缓存页面。

如何实现浏览器缓存?

1. last-modified

如果服务器向浏览器返回的响应头中包含last-modified属性,那么浏览器会将该属性与页面一起存入本地缓存。 当用户请求相同的页面时,浏览器发送的请求头中会携带属性:

If-Modified-Since:XXXXX

服务器会根据该值判断是否可以使用缓存页面,若可以使用缓存,则返回304状态码,若不可以使用缓存,则返回最新的页面,并携带200状态码。

注意:如果服务器的响应头中未包含last-modified属性,那么用户在请求相同页面时,浏览器中也不会包含If-Modified-Since:XXXXX属性,从而服务器也不会判断是否使用浏览器缓存,而是直接返回页面。

2. 采用ETag属性

ETag属性和Last-Modified属性类似。ETag属性值是一串字符串。 若服务器的响应头中包含了ETag属性,那么浏览器会将页面和ETage属性值一起缓存;当用户请求相同的页面时,浏览器会读区缓存的ETag值,并作为请求头的If-None-Match:”xxxxx”属性发送给服务器;服务器收到该属性后,判断是否允许浏览器使用缓存页面,若允许则返回304状态码,若不允许直接返回新的页面,并携带200状态码。

如何彻底实现浏览器缓存?

刚才的浏览器缓存还会涉及到浏览器与服务器的通信,因为浏览器需要向服务器询问是否使用本地缓存,而这些通信仍然需要消耗较多的用户等待时间。能否避免浏览器的这种询问呢?

1.采用Expires属性

Expires属性表示过期时间。 服务器只需在响应头中添加Expires属性,浏览器会将该属性与页面一起缓存。当用户再次请求相同的页面时,浏览器会将该页面的Expires与当前系统时间进行比较,判断是否过期;若尚未过期,则直接使用本地页面。

但是,如果用户的本地时间是错误的,那么Expires属性无法发挥它的作用,此时需要使用Cache-Control属性。

2.采用Cache-Control属性

Cache-Control:max-age=3600表示页面从当前时间开始3600秒后过期。从而能解决用户本地时间错误的问题。

浏览器缓存的优点

  1. 浏览器缓存能够大大降低(甚至消除)服务器的网络IO,从而服务器能够租用更廉价的带宽。
  2. 浏览器缓存能减少(甚至消除)服务器查询缓存的操作、数据库操作,从而减小服务器压力,提高并发数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 架构高性能网站秘笈(四)——反向代理缓存

    什么是反向代理? 在介绍“反向代理”之前,首先要介绍一下“正向代理”的概念。 1.什么是正向代理? 在NAT技术(Network Address Transla...

    大闲人柴毛毛
  • 架构高性能网站秘笈(二)——动态内容缓存

    什么是动态内容缓存? 浏览器向服务器发送请求后,服务器会根据浏览器的要求做相应的处理(如:数据库操作),然后将处理后的结果注入JSP页面生成HTML,最后将生...

    大闲人柴毛毛
  • java处理高并发高负载类网站的优化方法

    一:高并发高负载类网站关注点之数据库 没错,首先是数据库,这是大多数应用所面临的首个SPOF。尤其是Web2.0的应用,数据库的响应是首先要解决的。   ...

    大闲人柴毛毛
  • 大型网站架构演化

    1.1 高并发,大流量 1.2 海量数据 存储及管理海量数据,需要大量服务器 1.3 高可用: 7 * 24 小时服务 1.4 用户分布广泛,网络环境复杂 1....

    柳公子
  • 掌握缓存,不再让你蓝瘦香菇 —— 祝各位程序员节日快乐!

    本文内容概要: 1 Web缓存是什么?为什么要使用它? 2 Web缓存的类型 3 浏览器缓存的基本知识 3.1 Expires 3.2 Last-modifie...

    HTML5学堂
  • tp中遇到的相关方法

    getDbFields 这个方法在tp手册的字段定义中 通常每个模型类是操作某个数据表,在大多数情况下,系统会自动获取当前数据表的字段信息。 系统会在模型...

    仇诺伊
  • 关于浏览器后退键遇到的一些问题

    事情是这样的,用户登陆后进入首页,点击退出,然后使用浏览器的后退按钮进入了首页,这时候首页走本地缓存,并且一些动态内容和登陆页混在了一起,样式乱了(具体原因没有...

    小柒2012
  • 大型网站技术架构 读书笔记

    应用和数据分离后整个网站使用三台服务器:应用服务器(更快更大的CPU),文件服务器(更大的硬盘)和数据库服务器(更快的硬盘和更大的内存)。

    lilugirl
  • 浅谈大型Web系统架构

    动态应用,是相对于网站静态内容而言,是指以c/c++、php、Java、perl、.net等服务器端语言开发的网络应用软件,比如论坛、网络相册、交友、BLOG等...

    用户1257215
  • Web 开发人员需知的 Web 缓存知识

    今天踩着前辈们的肩膀,再次把这篇文章翻译整理下。一来让自己对web缓存的理解更深刻些,二来让大家注意力稍稍转移下,不要整天HTML5, 面试题啊叨啊叨的~~

    后端技术探索

扫码关注云+社区

领取腾讯云代金券