首先缓存的优点是:缓解服务端压力;快。

强缓存和协商缓存

强缓存是从本地缓存数据表中去取资源,不向服务端发送请求;协商缓存意思是每次使用缓存前都要和服务端进行确认。
从Response Header的Cache-Control的值看缓存规则(HTTP/1.1):
max-age=xxx 过期时间(重要),过期了走协商缓存(expire是HTTP1.0的产物,采用绝对时间,已废弃)
no-cache:不进行强缓存(重要),走协商缓存
no-store 不强缓存,也不协商缓存,基本不用
public:浏览器和代理服务器都可以缓存
private:资源只能给浏览器缓存,不能给代理服务器缓存
强缓存
强缓存步骤

  • 第一次请求 a.js ,缓存表中没该信息,直接请求后端服务器。
  • 后端服务器返回了 a.js ,且 http Response Header中 cache-control 为 max-age=xxxx,所以是强缓存规则,存入缓存表中。
  • 第二次请求 a.js ,缓存表中是max-age, 那么命中强缓存,然后判断是否过期,如果没过期,直接读缓存的a.js,如果过期了,则执行协商缓存的步骤了。

max-age=0和no-cache的区别:max-age是进行强缓存,但过期了,走协商缓存;no-cache是直接走协商缓存。两者效果一样。
协商缓存
协商缓存无论如何都是会向服务器发送请求的,只不过,资源未更改时,返回的只是header信息,所以size很小;而资源有更改时,还要返回body数据,所以size会大。
触发条件:1,强缓存(max-age)过期;2,Cache-Control值为no-cache(不强缓存)
每次http返回来 response header 中的 (每个文件都有一个,改动文件时ETag会变)和 Last-Modified(文件的修改时间),在下次请求时在 request header 就把这两个标识带上(但是名字变了ETag–>If-None-Match,Last-Modified–>If-Modified-Since ),服务端把带过来的标识,资源目前的标识,进行对比,然后判断资源是否更改了。 如果资源没更改,返回304,浏览器读取本地缓存;如果资源有更改,返回200,返回最新的资源和最新的标识。

协商缓存步骤:


有了Last-Modified,为什么还要有ETag?
主要是为了解决几个Last-Modified比较难解决的问题:

  • 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变了修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET;
  • 某些文件修改非常频繁,比如在以下的时间内进行修改,(比方说1s内修改了N次),Last-Modified能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);
  • 某些服务器不能精确的得到文件的最后修改时间。

用户行为对缓存的影响?
F5 会跳过强缓存规则,直接走协商缓存;Ctrl+F5 ,跳过所有缓存规则,和第一次请求一样,重新获取资源。

为什么很多站点第二次打开速度会很快?

如果第二次页面打开很快,主要原因是第一次加载页面过程中,缓存了一些耗时的数据。
那么,哪些数据会被缓存呢?从上面介绍的核心请求路径可以发现,DNS 缓存和页面资源缓存这两块数据是会被浏览器缓存的。DNS 缓存主要就是在浏览器本地把对应的 IP 和域名关联起来。
简要来说,很多网站第二次访问能够秒开,是因为这些网站把很多资源都缓存在了本地,浏览器缓存直接使用本地副本来回应请求,而不会产生真实的网络请求,从而节省了时间。同时,DNS 数据也被浏览器缓存了,这又省去了 DNS 查询环节。

如果一个页面的网络加载时间过久,你是如何分析卡在哪个阶段的?

1 首先猜测最可能的出问题的地方,网络传输丢包比较严重,需要不断重传。然后通过ping curl看看对应的时延高不高。
2 然后通过wireshake看看具体哪里出了问题。
3 假如别人访问很快,自己电脑很慢,就要看看自己客户端是否有问题了。

浏览器缓存Cache相关推荐

  1. js html 图片 缓存问题,如何防止浏览器缓存CACHE?将CSS、JS、图片加上参数

    什么是浏览器缓存 浏览器缓存功能是网页性能优化的项目之一 使用浏览器缓存功能如果用户再次来到您的网站,缓存css.js.jpg.png图档等静态资源将能使网页打开速度加快,同时也能减少服务器负担. 更 ...

  2. 每次都要清理cache?强制不让浏览器缓存!

    调试网页flash程序,总需要强力缓存是不是很恶心. 看看这篇文章: 做过网页方面工作的朋友一定知道浏览器缓存(cache)这个机制,但是在开发中是一个比较烦人功能,每次修改了代码,想刷新看结果,这时 ...

  3. 缓存系列之一:buffer、cache与浏览器缓存

    缓存系列之一:buffer.cache与浏览器缓存 一:缓存是为了调节速度不一致的两个或多个不同的物质的速度,在中间对速度较快的一方起到一个加速访问速度较慢的一方的作用,比如CPU的一级.二级缓存是保 ...

  4. chrome浏览器缓存 from disk cache

    今天遇到个问题,同样的两个前端项目,服务器也一样,但是有一个项目的接口出现status:200 (from disk cache),之前从没遇见过,在此记录一下.解决办法:只要清除浏览器缓存(更多工具 ...

  5. 浏览器Disk Cache磁盘缓存及其协商缓存、及原生App和浏览器实现缓存的差异

    浏览器Disk Cache磁盘缓存及其协商缓存.及原生App和浏览器实现缓存的差异 目录 浏览器Disk Cache磁盘缓存及其协商缓存.及原生App和浏览器实现缓存的差异 1.Memory Cach ...

  6. 浏览器缓存(一):强缓存 MEMORY CACHE 和 DISK CACHE

    关于memory cache 和 disk cache 随便浏览一个网站: 首次打开,或者开启浏览器的 Disable Cache(浏览器的Network下, 与Preserve log同级别),在s ...

  7. HTTP请求中的缓存(cache)机制

    当资源第一次被访问的时候,HTTP头部如下 (Request-Line) GET /a.html HTTP/1.1 Host    127.0.0.1 User-Agent  Mozilla/5.0 ...

  8. 浏览器缓存浅解--记录备复习

    最近在学习前端优化的问题,正好看到浏览器缓存.看别人的感觉都会,等到自己说出个所以然来可能就有卡壳了.好记性不如烂笔头,记录下来加深下印象. 前端缓存 一个数据流程:前端请求.后台处理.浏览器响应.第 ...

  9. 版本更新带来的缓存问题_浏览器缓存原理总结

    作者: Poetry 来源:http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识 分为强缓存和协商缓存 1.浏览器在加载资源时, ...

最新文章

  1. 当Docker遇到Intellij IDEA,再次解放了生产力~
  2. 神了!阿里资深大牛熬夜整理Python学习路线,终于开放了
  3. 亚马逊首席技术官预测2021年将改变世界的八大技术趋势
  4. 2.2. php://stdin php://stdout
  5. 【祝贺】norains同志在这里开《Windows CE大排档》书友会
  6. str字符串 encoding( ) 方法
  7. 2.0 自动梯度 - PyTorch学习笔记
  8. 【Python】Python入门:4000字能把元组tuple讲透吗?
  9. 【翻译】从Store生成Checkbox Group
  10. 年轻人,在公司混日子,伤害的是自己!
  11. 杂(三)-The type java.lang.Object cannot be resolved It is indirectly referenced ...
  12. windows7 系统下载(2)
  13. 终于!疫情之下,第一批企业没能熬住面临倒闭,员工被遣散,没能等来春暖花开!
  14. 程序员被裁员失业有哪些软件众包外包平台可以接单?
  15. linux u盘 引导修复工具下载,win7+ubuntu双系统引导修复工具boot repair disk 32+64位ISO版...
  16. 图-介绍(intro-Graph)
  17. 数字IC设计----MOS管与逻辑门
  18. PHP.ini配置文件[中文]
  19. 01.分布式框架-Dubbox
  20. idea 插件开发一些异常处理

热门文章

  1. 【技术分享】python web 安全总结
  2. 音频和视频的基础知识
  3. ffmpeg 截取视频片段 - python
  4. matlab实现进退法、0.618法、牛顿法
  5. Java 第十一届 蓝桥杯 省模拟赛 小明的城堡
  6. 安卓实现仿微信点赞好友昵称列表,中间用逗号隔开
  7. 求矩阵的逆的三种方法
  8. CDM是什么,和CDP的区别?
  9. 有哪些适合幼儿园小朋友学英语的软件?3款十分优秀的儿童免费学英语软件来喽!
  10. BZOJ1057: [ZJOI2007]棋盘制作