BUG, Web前端

网站问题怎么也解决不掉?也许是浏览器缓存搞的鬼!

昨天,我在为博客安装ssl证书时改动了网站的一些配置,访问网站首页时无法显示并且会弹出一个php的下载页面(应该是php解析出的问题),结果这两天又是查资料,又是改配置,重装了nginx,php-fpm也是于事无补,最后迫不得已重建了vps和wp(这里吐槽一下digital ocean的新加坡主机,感觉换了地点以后速度大不如从前的旧金山主机),但是在导入原网站的时候仍然出现和原来一样的问题。被逼无奈之下进群里找大佬帮忙。没想到大佬告诉我,网站能正常访问,没毛病啊。当时我是一脸懵逼???
自己又在edge上面试了一下发现确实能正常访问,但在chrome上仍然不行,忽然想到该不是浏览器缓存的问题吧,结果清空chrome的缓存之后问题果然解决了。所以,自己的网站除了问题,Bug不一定在服务器上,也有可能在萧墙之内。
既然是浏览器缓存的问题,那我们就来看看浏览器缓存的原理是什么,为什么会让你的毛病久治不愈呢?

一、什么是浏览器缓存?

浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。
浏览器缓存主要有两类:缓存协商:Last-modified ,Etag 和强缓存:cache-control,Expires。

二、两类缓存有什么区别?

1)浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器;
2)当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源;
3)强缓存与协商缓存的共同点是:如果命中,都是从客户端缓存中加载资源,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器。
4)当协商缓存也没有命中的时候,浏览器直接从服务器加载资源数据。

三、怎么分辨强缓存还是协商缓存?

当浏览器对某个资源的请求命中了强缓存时,返回的http状态为200,在chrome的开发者工具的network里面size会显示为from cache。
当浏览器对某个资源的请求没有命中强缓存,就会发一个请求到服务器,验证协商缓存是否命中,如果协商缓存命中,请求响应返回的http状态为304并且会显示一个Not Modified的字符串。
在chrome中按F12查看network面板可以看到chrome加载网页时的请求返回情况,可以看到全部都是http状态为200的强缓存命中,难怪问题一直解决不了了,一直加载的都是浏览器保留的问题网页!

四、如何避免缓存给开发带来的麻烦?

常用的有以下几种:
1)直接ctrl+f5,这个办法能解决页面直接引用的资源更新的问题;
2)使用浏览器的隐私模式开发;
3)如果用的是chrome,可以f12在network那里勾选Disable cache把缓存给禁掉(这是个非常有效的方法)

参考资料

本文主要参考以下资料,因为我并不从事前端工作,所以只是摘取了部分对自己有用的内容,详细的讲解可以阅读这位大神的文章:浏览器缓存知识小结及应用