91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2021-08-05 10:52:13 來源:億速云 閱讀:139 作者:小新 欄目:web開發

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

緩存對于前端頁面來說,是加速頁面加載的利器之一,但也同時帶來了很多問題,比如新版本發布之后,怎么替換客戶端上的緩存文件呢?大家一般的的解決方案主要有以下幾種形式,

一般情況

1、添加版本號,在靜態資源文件的引用鏈接后面添加版本號,這樣每次發布的時候更新版本號,就能讓叫客戶端加載新的資源文件,避免再次使用緩存的老文件,如

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

2、文件名使用hash形式,webpack中打包文件可直接生成,這樣每次打包發布的時候都會產生新的hash值,區別于原有的緩存文件

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

3、服務器及緩存頭設置,不使用緩存,如

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標簽添加緩存設置

<!-- 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)瀏覽器

微信瀏覽器下比較特殊,這個bug一樣的存在居然把入口文件html給緩存下來了,這就意味著通過版本號和hash號的形式避免緩存的方案失效了。同時html的meta設置依舊沒能生效。

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

理論上來說,這樣應該是可以的,但發現沒有用。分析原因可能是vue+nginx的形式下,所有的路由都被try_files解析到index.html

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

這個解析的過程中版本號已經失效了,因此沒能達到替換緩存的目的。至于其他的框架下,比如ftl、jsp那種模版編譯的有可能生效,不過需要大家自己去驗證了。

方案二(有效)

再換一種方案,更改服務器配置,強制不緩存入口文件,其他靜態正常緩存,比如在nginx中對靜態部分如下

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;
}

最終經過測試,這種方式可以解決微信下入口文件被緩存的問題,問題解決~~

題外話

說到這里,微信瀏覽器為什么要緩存html文件呢?
1、難道也是加速頁面加載?并不見得是這個原因,因為這可能帶來的問題大于帶來的優化效果。
2、緩存入口頁面和保留上次瀏覽位置是否有關聯呢?感覺關聯度也不是那么大

補充:微信瀏覽器取消緩存的方法

一、通過url參數避免html文件緩存

請求同一個頁面的時候,如果url后面的參數不一樣,則不會調用微信緩存中的html頁面,由此可以解決html頁面的緩存問題。例如加個版本號或時間戳

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

二、避免css和js的緩存

以上工作完成之后,我們解決了html的緩存問題,但是通過訪問nginx(或是其他工具)的日志發現,雖然帶上了不同的參數,html確實不會緩存了,但是卻沒有js和css文件的請求。

猜測在這里,微信發現我們所請求的js和css文件在他的緩存里面有了,所以就直接打開緩存中的文件返回給了頁面上。(所以這就坑爹了啊!!)

所以我們要在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" />

以上是“微信頁面入口文件被緩存的示例分析”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

梁山县| 祥云县| 邵阳市| 舞阳县| 十堰市| 大同县| 容城县| 庆元县| 邢台市| 姚安县| 崇义县| 朝阳区| 连州市| 武乡县| 濮阳市| 清水县| 洪湖市| 贡觉县| 灵丘县| 南召县| 双牌县| 凌云县| 荔波县| 镇雄县| 屏东县| 松桃| 文安县| 江山市| 巴彦淖尔市| 阳原县| 紫云| 竹山县| 辰溪县| 庆安县| 巴彦淖尔市| 澎湖县| 夏邑县| 临夏县| 禹城市| 望都县| 舒兰市|