强缓存和协商缓存

1.缓存的好处

减少了不必要的网络请求次数,减轻了服务器的压力,加快了浏览器打开网页的速度;

2.强缓存和协商缓存策略的区别

强缓存:浏览器不会向服务器发送请求,直接根据max-age和Expires首部字段判断是否使用本地缓存;

协商缓存:浏览器会向服务器发送请求,请求携带首部字段If-None-match和If-Modified-Since,和请求资源的ETag和Last-Modified字段比较,根据结果判断是否使用本地缓存;

3.本地缓存分类

memory cache:内存缓存,一般脚本,图片,字体会缓存在内存中;

disk cache:硬盘缓存,一般非脚本文件(如css文件)会缓存在硬盘中;

4.浏览器缓存的详细过程

1.浏览器第一次加载资源文件,会将服务器返回的资源文件和响应首部字段一并缓存下来;

2.浏览器下一次请求该资源文件的时候,先比较当前时间和上一次响应的时间差是否小于Cache-Control字段的max-age值,如果小于则命中强缓存,直接从本地缓存加载文件;否则浏览器会向服务器发送携带If-None-match和If-Modified-Since首部字段的请求(如果浏览器不支持http1.1会用Expires进行判断);

3.服务器接收到请求后,会比较资源文件的ETag和请求首部字段If-None-match,不一致则表示资源文件有改动,返回新的资源文件和ETag,一致则进入下一步;

4.比较资源文件的Last-Modified和请求首部字段If-Modified-Since,不一致则表示资源文件有改动,返回新的资源文件和Last-Modified,一致则命中协商缓存,返回403 Not Modified,浏览器从本地缓存加载文件;

5.ETag和Last-Modified区别

1.ETag根据资源文件的内容记录了资源文件的每一次改动,Last-Modified记录了资源文件上一次改动的时间,精确度为秒;

2.服务器校验时ETag的优先级高于Last-Modified,但是ETag更加耗费服务器性能;

6.用户行为对于浏览器缓存的影响

点击页面刷新按钮和F5刷新:向服务器发送请求,会走协商缓存;

Ctrl+F5强制刷新:不走强缓存和协商缓存,服务器每次都返回最新的资源文件;

7.浏览器缓存流程图

浏览器缓存流程图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。