时间:2021-07-01 10:21:17 帮助过:146人阅读
200 from memory cache 不访问服务器,直接读缓存,从内存中读取缓存。此时的数据时缓存到内存中的,当kill进程后,也就是浏览器关闭以后,数据将不存在。但是这种方式只能缓存派生资源
200 from disk cache 不访问服务器,直接读缓存,从磁盘中读取缓存,当kill进程时,数据还是存在。这种方式也只能缓存派生资源
304 Not Modified 访问服务器,发现数据没有更新,服务器返回此状态码。然后从缓存中读取数据。
三级缓存原理
先去内存看,如果有,直接加载
如果内存没有,择取硬盘获取,如果有直接加载
如果硬盘也没有,那么就进行网络请求
加载到的资源缓存到硬盘和内存
一般浏览图片,如下流程:
访问-> 200 -> 退出浏览器
再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)
application cache和上面缓存有点区别,是离线缓存,就是资源可以从硬盘上读取而不用联网,即使断网,用户也可以浏览。
设置浏览器缓存
304是协商缓存还是要和服务器通信一次,要想断绝服务器通信,就要强制浏览器使用本地缓存(cache-control/expires),
一般有如下几种方式设置浏览器缓存。
1、通过HTTP的META设置expires和cache-control
<meta http-equiv="Cache-Control" content="max-age=7200" /> <meta http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" />
这样写的话仅对该网页有效,对网页中的图片或其他请求无效。
2、apache服务器配置图片,css,js,flash的缓存
这个主要通过服务器的配置来实现这个技术,如果使用apache服务器的话,可以使用mod_expires模块来实现:
编译mod_expires模块:
Cd /root/httpd-2.2.3/modules/metadata/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译
先打开httpd.conf文件,然后查找expires这个模块,找到后,删除左边的#号,表示打这个模块,并重启apache服务器
编辑httpd.conf配置:添加下面内容
<IfModule mod_expires.c>ExpiresActive on ExpiresDefault "access plus 1 month" ExpiresByType text/html "access plus 1 months" ExpiresByType text/css "access plus 1 months" ExpiresByType image/gif "access plus 1 months" ExpiresByType image/jpeg "access plus 1 months" ExpiresByType image/jpg "access plus 1 months" ExpiresByType image/png "access plus 1 months" EXpiresByType application/x-shockwave-flash "access plus 1 months" EXpiresByType application/x-javascript "access plus 1 months" #ExpiresByType video/x-flv "access plus 1 months"</IfModule>
3、php等设置
<?php header("Cache-Control: public"); header("Pragma: cache"); $offset = 30*60*60*24; // cache 1 month $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT"; header($ExpStr);?>
或者
$seconds_to_cache = 3600;$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";header("Expires: $ts"); header("Pragma: cache");header("Cache-Control: max-age=$seconds_to_cache");
缓存情况下前端代码部署
问题一:有了缓存,如何进行前端代码更新呢?
我们可以在资源文件或者图片后面添加版本号,如下图。
问题二:但是所有文件都加了版本号之后,我们只更改了一个文件,其他文件的缓存不是浪费了吗?
解决这个问题,我们可以用 数据摘要要算法,对文件求摘要信息,摘要信息与文件内容一一对应。如下图:
这样就解决了这个问题。
问题三:新的问题又来了,文件发布怎么办?
1、先部署页面,再部署资源:在二者部署的时间间隔内,如果有用户访问页面,就会在新的页面结构中加载旧的资源,并且把这个旧版本的资源当做新版本缓存起来,其结果就是:用户访问到了一个样式错乱的页面,除非手动刷新,否则在资源缓存过期之前,页面会一直执行错误。
2、先部署资源,再部署页面:在部署时间间隔之内,有旧版本资源本地缓存的用户访问网站,由于请求的页面是旧版本的,资源引用没有改变,浏览器将直接使用本地缓存,这种情况下页面展现正常;但没有本地缓存或者缓存过期的用户访问网站,就会出现旧版本页面加载新版本资源的情况,导致页面执行错误,但当页面完成部署,这部分用户再次访问页面又会恢复正常了。
好的,上面一坨分析想说的就是:先部署谁都不成!都会导致部署过程中发生页面错乱的问题。所以,访问量不大的项目,可以让研发同学苦逼一把,等到半夜偷偷上线,先上静态资源,再部署页面,看起来问题少一些。
如何解决这些问题呢?
这个问题,起源于资源的 覆盖式发布,用 待发布资源 覆盖 已发布资源,就有这种问题。解决它也好办,就是实现 非覆盖式发布
关于缓存的方方面面就这么多了,更多精彩请关注Gxl网其它相关文章!
相关阅读:
HTML怎么实现数字焦点图轮播代码
HTML里的最后一行文字显示不全怎么处理
怎样用canvas做出粒子喷泉动画的效果
以上就是前端浏览器缓存怎么使用的详细内容,更多请关注Gxl网其它相关文章!