前端之浏览器缓存机制

2019/09/14 20:28
阅读数 57

很早就想梳理一下浏览器的缓存机制了,一直没有时间,实际是上懒啦(*^▽^*),你知道的,人都有惰性,本大神只是个假神o(´^`)o,也不例外。

难得今天较为清闲,还是借鉴一下成功人的经验,梳理一下吧,好记性不如烂笔头,说不定哪次面试遇到了呢

在前端开发中,性能是一个永恒的话题,没有最好,只有更好。判断一个网站性能好坏,一个直入眼观的即是网页的反应速度,有一个方式就是使用缓存,一个优秀的缓存策略可以缩短网页请求的时间,减少延迟,并且网页可以重复利用,还可以减少带宽,降低网络负荷。

 1:为什么需要缓存?

a:缓存可以减少用户等待时间,提升用户体验

b:减少网络带宽消耗

c:降低服务器压力

Note:缓存使用不当,也会造成‘脏数据’问题

2:常见的缓存类型

强缓存 -

Expires服务器端设置,表示该资源的过期时间,会有弊端,客户端时间和服务器时间不一致的问题。

Cache-Control:max-age表示缓存资源的最大生命周期,单位是秒

所以Expires  结合 Cache-Control 一起使用,大型网站中一般比较适用

协商缓存-

Last-Modified:值为资源的最后更新时间,随服务器response返回

If-Modified-Since:通过比较两个时间来判断资源在两次请求期间是否有过修改,如果没有,则命中协商缓存

Etag:表示资源内容的唯一标识,即资源的消息摘要

If-None-Match:服务器通过比较请求头中的If-None-Match与当前资源的Etag是否一致来判断资源是否在两次请求期间有过修改

3:缓存流程图示:

 

 

图示解析

a:浏览器会先检测强缓存类型(Cache-Control 或者 Expires)是否有效;命中直接浏览器本地获取缓存资源

b:未命中。服务器会根据请求头Request Header验证这个资源是否命中协商缓存,称之为HTTP二次验证,命中,服务器返回请求,但返回资源,而是告诉客户端直接中直接从浏览器缓存中获取

Note:

1.强缓存不会发生请求,协商缓存存在服务器请求

2.当协商缓存也未命中时,则服务器会将资源发送到客户端

3.F5刷新页面,会跳过强缓存

4.Ctrl+F5刷新页面,跳过强缓存和协商缓存

5.不会缓存的情况

HTTPS POST请求 根据Cookie获取认证信息 Request Header Cache-Control:no-cache, max-age=0

6.小故事大道理

上文对整个概念做了阐述,还是不够形象,我们来通过几个小故事生动理解一下:

故事一:Last-Modified

浏览器:Hi,我需要 jartto.min.js 这个文件,如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之后修改过的,请发给我。

服务器:(检查文件的修改时间)

服务器:Oh,这个文件在那个时间之后没有被修改过,你已经有最新的版本了。

浏览器:太好了,那我就显示给用户了。

故事二:ETag

浏览器:Hi,我需要 jartto.css 这个文件,有没有不匹配 3c61f-1c1-2aecb436 这个串的

服务器:(检查 ETag…)

服务器:Hey,我这里的版本也是 3c61f-1c1-2aecb436,你已经是最新的版本了

浏览器:好,那就可以使用本地缓存了

看完这两个小故事,是否对协商缓存有了更清晰的认识了。有了,确实很形象

参考链接:

https://www.toutiao.com/i6719737927439483400/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1&timestamp=1568456352&app=news_article&utm_source=weixin&utm_medium=toutiao_ios&req_id=201909141819110100140470141C9477FF&group_id=6719737927439483400 

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部