实例演示页面刷新时浏览器不同的缓存处理策略

前言

平时我们通过浏览器访问网页，在刷新页面时，其实不同的刷新方式，会改变浏览器对缓存的处理策略。

不同的刷新方式及其缓存处理策略说明

1. 浏览器地址栏回车

   浏览器地址栏输入一个网址，然后按回车键 Enter，浏览器会“直接使用有效的缓存”，不会发送 HTTP 请求去服务器验证缓存，专业术语称之为“缓存命中”。

2. F5 快捷键

   直接按 F5 快捷键刷新页面，浏览器会去Web服务器验证缓存。

3. Ctrl + F5 快捷键

   按快捷键 Ctrl +F5 刷新页面，会强制刷新浏览器，浏览器不使用缓存。

实例演示

演示准备工具

• Fiddler 一款Web调试工具，能够记录客户端和服务端的 HTTP/HTTPS 请求。
• Firefox 一款浏览器客户端

1. 启动Fiddler，打开Firefox，访问博客园主页 https://www.cnblogs.com/ ，发现Fiddler会话列表中有50多个session（这里是57个会话），且由于是首次成功访问，所以 HTTP/HTTPS 的响应码都是200。
   
2. 切换到Fiddler，按 Ctrl + X 快捷键将Fiddler会话列表中的所有session删除，以便方便对比查看
   
3. 切换到Firefox，新打开一个标签页，在浏览器地址栏输入网址 https://www.cnblogs.com/，然后按回车，转到Fiddler，可以发现，Fiddler会话列表少了很多session，所有这些少了的session是因为浏览器会“直接使用有效的缓存”，不会发送HTTP请求，故会话列表当然不会有相关记录了。
   
4. 清除Fiddler会话列表后，切换到Firefox，直接按 F5 刷新博客园主页，又切换回Fiddler，发现跟“地址栏输入网址回车”这种方式相比，会话列表的session个数比较多（跟首次访问博客园主页的个数相差无几），因为此时浏览器会去Web服务器验证缓存，也就是发了HTTP/HTTPS请求，故Fiddler当然会记录并显示在会话列表中。又由于服务端验证缓存时发现客户端有缓存，就响应客户端304状态码。
   
5. 清除Fiddler会话列表后，切换到Firefox，按 Ctrl +F5 ,强制刷新浏览器，又切换到Fiddler，发现跟“首次访问博客园”相比，无论是session个数以及响应码都为200的情形，都是一致的。点击选择一个session，通过Fiddler界面右边的Header标签页，可以发现浏览器发送的请求头中设置了Cache-Control: no-cache，即明确告知服务端，浏览器我不使用缓存，给我最新的响应。另外，Pragma: no-cache 的作用跟Cache-Control: no-cache一模一样，只不过前者是在HTTP1.0中定义的，此处浏览器为了兼容才同时使用两者。