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.浏览器缓存流程图
