移動端商品詳情緩存

『壹』 移動端Vue界面緩存處理

大家可以桐毀攔看到當重新進入列表頁數據進行了刷新這明顯不符合需求

查網路問同事知道了一個東西叫keep-alive於是決定使用這個內置組件試試.

然後吧發現問題確實能夠得到結局但是出了個新問題如圖:

問題1:界面雖然被緩存但是當退出到前一個頁面再進入的時候界面還是被緩存狀態,我覺得這是不合理的.
問題2:被緩存的界面從上個頁面再次進入時動畫效果不對.

基於這兩個問題我也查了一些資料和博客,也總結了第二套方案

這個rank是用來判斷當前組件所在的級別.
比如A組件->B組件 ->C組件,那麼A的rank為1,B的rank為2,C的rank為3,
在beforeRouteLeave中

這個貌似能解決問題,但是!!!
問題1: 這個返回動畫就是不對...(圖片在瀏覽器可能看不出啥問題,在真機很明顯)因為這個框架是前端給的動畫我也不會弄...如果能解決跳轉動畫問題,我覺得這個方案基本可以符合要求..如果有大佬可以解決,方便的話指導下小弟.而且能解決這個動畫問題後面也不用看了...
問題二:有的時候會出現緩存了上一次的bug(也不知道咋回事...出現的還挺頻繁..).

在這里就是我自己總結的一個方案..雖然能完美解決這些問題不過對開發不友好,維護成本太高..不建議使用(如果實在沒辦法的話)

首先在vuex中定義需要緩存的界面的數據(先測試的滑動,所以分開寫的可以只寫一個data)

先說下高度的滑動吧這個滑動的高度也是需要保存的.界面中沃使用cube-ui的scroll組件

給data增加一個scrollHeight屬性緩存界面高度.還有需要緩存的數據model

當界面滑動停止調用scrollend方法對scrollHeight進行賦值

每次進入界面即在created 函數中取出緩存的高度,如果有高度那麼讓它自動滑動.並重新給scrollHeight進行賦值.

這邊是我封裝的一個js..實現是這樣的

這樣余並就可以局胡保證滑動的緩存(data與高度類似).
這是data的js

當界面進行跳轉對組件的rank進行判斷如下:

而在進入的時候

『貳』 移動端(h5)，緩存數據sessionStorage

在項目中遇到需要鄭戚緩存數據，後退時把數雹森據還原.
項目中源叢畝使用了angularJS v1.6.6

純javascript

『叄』 商品詳情頁局部靜態化實例分析以及技術點

流程簡述：
1.商品後台進行商品導入，導入後發非同步消息流生成局部靜態模板頁（圖文詳情介紹說明之類的----變化不大的內容）。

2.模板頁的生成，可以利用ob緩存渲染html模板之類的，然後將模板文件上傳到指定的伺服器，這里對文件名的規則有一定的要求( https://image-shop.chuchujie.com/culiu.cdn/shop_staticHtml/detail/18/67/1100240643278_detail.html )，基於商品id進行hash運算得到的/18/67目錄，所有調用端保持一致即可。

3.上傳到七牛伺服器需要注意的地方，七牛開啟cdn加速，在多個地區開啟多個節點，將文件上傳到源站進行分發，除了源站外的其他地方直接訪問的是cdn緩存，如果源站發生改變，需要主動提交刷新緩存請求或者通過攜帶隨機 URL 參數刷新。這里使用通過攜帶隨機 URL 參數刷新。

例如，如果 http://om9helk.qnssl.com/resource/gogopher.jpg 這個圖片資源沒有更新，可以在該 URL 後面加上問號隨機參數的形式來讓 CDN 強制刷新： http://om9helk.qnssl.com/resource/gogopher.jpg?v=1234567 ，CDN 拿到這個 URL 後會強制回源站中取回最新的資源。

如果域名沒有開啟忽略 URL 參數，那麼在 CDN 節點上，對於：
( http://om9helk.qnssl.com/resource/gogopher.jpg )
( http://om9helk.qnssl.com/resource/gogopher.jpg?v=1 )
( http://om9helk.qnssl.com/resource/gogopher.jpg?v=2 )
這三個 URL 是獨立緩存的。所以，如果攜帶之前沒用過的參數訪問，CDN 會強制回源站中取回最新的資源。

① 關閉忽略 URL 緩存的域名，才可以使用這種方法刷新。

本項目中採用nginx緩存一段時間的方法，來控制url的參數 https://image-shop.chuchujie.com/culiu.cdn/shop_staticHtml/detail/18/67/1100240643278_detail.html?v=15484108912&is_cct=0&is_oversea=0&delivery_type=0
參數v通過訪問介面的時間戳來變化，來強制CDN更新。
還有一種好的方法是，更新模板的時候，主動提交刷新緩存請求，來使CDN更新所有緩存內容和源站同步。

4.然後是商品詳情頁介面，裡面有需要的動態變化的數據，例如價格數量 sku,spu，活動時間以及優惠券等信息，也包含局部靜態模板文件地址，ios/安卓可以拿到相應的地址開啟web view進行展示，h5拿到地址進行get請求得到模板html,然後載入到商品詳情頁。

5.商品詳情頁介面里分多級緩存，這里使用memcache。然後使用nginx的fastcgi_cache緩存整個商品詳情頁介面，減少了nginx與php服務的請求，在高並發的情況下性能極佳。

6.這里需要注意的是更新商品內容時需要更新模板，以及nginx更新fastcgi_cache緩存的內容。（我的想法是，在知道更新了商品內容並且更新了模板後，則刪除之前在nginx緩存該商品詳情介面的內容，重新進行緩存，因為直接修改nginx的緩存比較困難，但是刪除比較方便，直接根據規則刪除對應的文件）

7.主要利用七牛上傳文件，使用裡面的刷新緩存功能來更新模板信息。
使其他的CDN緩存回源更新源站最新的內容然後進行緩存。

8.通過nginx配合lua，對特殊的fastcgi_cache緩存的內容進行實時修改數據，比如商品詳情頁里可能含有活動的倒計時時間，這個倒計時時間需要當前的服務時間與活動結束時間實時比較得到，這時候通過ngx.location.capture發起一個當前緩存頁的請求，如果拿到的是緩存的數據，則將數據進行對應的修改local currentTime = os.time()，最後再response響應，ngx.say(response.body);
ngx.exit(ngx.HTTP_OK)。
當然一些無需變化的數據，直接走fastcgi_cache緩存的數據即可。

『肆』 umi+antd-mobile開發移動端，使用KeepAlive頁面緩存功能（umi-plugin-keep-alive）

使用umi-plugin-keep-alive實現KeepAlive狀粗含態存儲，
並且譽核實現
進入岩虛笑下一個頁面時緩存，後退頁面時不緩存（卸載）
類似微信小程序的頁面緩存機制

1、安裝

2、使用

更詳細的可參考 React Activation