微信頁(yè)面入口文件被緩存的示例分析

小編給大家分享一下微信頁(yè)面入口文件被緩存的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的饒陽(yáng)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

緩存對(duì)于前端頁(yè)面來(lái)說(shuō)，是加速頁(yè)面加載的利器之一，但也同時(shí)帶來(lái)了很多問(wèn)題，比如新版本發(fā)布之后，怎么替換客戶端上的緩存文件呢？大家一般的的解決方案主要有以下幾種形式，

一般情況

1、添加版本號(hào)，在靜態(tài)資源文件的引用鏈接后面添加版本號(hào)，這樣每次發(fā)布的時(shí)候更新版本號(hào)，就能讓叫客戶端加載新的資源文件，避免再次使用緩存的老文件，如

<script src="//m.test.com/build/activity/js/commons.js?v=20170608"></script>

2、文件名使用hash形式，webpack中打包文件可直接生成，這樣每次打包發(fā)布的時(shí)候都會(huì)產(chǎn)生新的hash值，區(qū)別于原有的緩存文件

<script src="//m.test.com/build/activity/js/activity/201807/schoolbeauty/main.19315e5.js"></script>

3、服務(wù)器及緩存頭設(shè)置，不使用緩存，如

location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js)$ {
  root  /mnt/dat1/test/tes-app;
  #### kill cache
  add_header Last-Modified $date_gmt;
  add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
  if_modified_since off;
  expires off;
  etag off;
}

4、在html的meta標(biāo)簽添加緩存設(shè)置

<!-- cache control: no cache -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

微（keng）信（die）瀏覽器

微信瀏覽器下比較特殊，這個(gè)bug一樣的存在居然把入口文件html給緩存下來(lái)了，這就意味著通過(guò)版本號(hào)和hash號(hào)的形式避免緩存的方案失效了。同時(shí)html的meta設(shè)置依舊沒能生效。

方案一（部分框架無(wú)效）
最開始碰到這個(gè)問(wèn)題，我在想是不是可以給入口文件的html加一個(gè)版本號(hào)，比如https://m.test.com/views/index?v=1538208193491

理論上來(lái)說(shuō)，這樣應(yīng)該是可以的，但發(fā)現(xiàn)沒有用。分析原因可能是vue+nginx的形式下，所有的路由都被try_files解析到index.html

location / {
  root  /mnt/dat1/test/tes-app;
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
}

這個(gè)解析的過(guò)程中版本號(hào)已經(jīng)失效了，因此沒能達(dá)到替換緩存的目的。至于其他的框架下，比如ftl、jsp那種模版編譯的有可能生效，不過(guò)需要大家自己去驗(yàn)證了。

方案二（有效）

再換一種方案，更改服務(wù)器配置，強(qiáng)制不緩存入口文件，其他靜態(tài)正常緩存，比如在nginx中對(duì)靜態(tài)部分如下

location / {
  root  /mnt/dat1/test/tes-app;
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
  #### kill cache
  add_header Last-Modified $date_gmt;
  add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
  if_modified_since off;
  expires off;
  etag off;
}

location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js)$ {
  root  /mnt/dat1/test/tes-app;
  access_log off;
  expires 30d;
}

最終經(jīng)過(guò)測(cè)試，這種方式可以解決微信下入口文件被緩存的問(wèn)題，問(wèn)題解決～～

題外話

說(shuō)到這里，微信瀏覽器為什么要緩存html文件呢？
1、難道也是加速頁(yè)面加載？并不見得是這個(gè)原因，因?yàn)檫@可能帶來(lái)的問(wèn)題大于帶來(lái)的優(yōu)化效果。
2、緩存入口頁(yè)面和保留上次瀏覽位置是否有關(guān)聯(lián)呢？感覺關(guān)聯(lián)度也不是那么大

補(bǔ)充：微信瀏覽器取消緩存的方法

一、通過(guò)url參數(shù)避免html文件緩存

請(qǐng)求同一個(gè)頁(yè)面的時(shí)候，如果url后面的參數(shù)不一樣，則不會(huì)調(diào)用微信緩存中的html頁(yè)面，由此可以解決html頁(yè)面的緩存問(wèn)題。例如加個(gè)版本號(hào)或時(shí)間戳

www.xxx.com/home.html?v=1.0

二、避免css和js的緩存

以上工作完成之后，我們解決了html的緩存問(wèn)題，但是通過(guò)訪問(wèn)nginx（或是其他工具）的日志發(fā)現(xiàn)，雖然帶上了不同的參數(shù)，html確實(shí)不會(huì)緩存了，但是卻沒有js和css文件的請(qǐng)求。

猜測(cè)在這里，微信發(fā)現(xiàn)我們所請(qǐng)求的js和css文件在他的緩存里面有了，所以就直接打開緩存中的文件返回給了頁(yè)面上。（所以這就坑爹了啊?。。?/p>

所以我們要在html文件的頭部（head）處加上一些meta：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

<meta http-equiv="Pragma" content="no-cache" />

<meta http-equiv="Expires" content="0" />

以上是“微信頁(yè)面入口文件被緩存的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：微信頁(yè)面入口文件被緩存的示例分析
URL網(wǎng)址：http://muchs.cn/article42/ijcshc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、企業(yè)建站、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站