浅谈微信页面入口文件被缓存解决方案


Posted in Javascript onSeptember 29, 2018

缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式,

一般情况

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" />

ps,网上很多答案都提供了添加在head处的meta,但是有的人说没有用。目测是因为meta只能保障js和css等资源不会被缓存,但是无法保障html不被缓存。所以,要和url参数方法于meta方法一起使用,才能保障毫无侧漏!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取url链接字符串 location.href
Dec 23 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
微信小程序用户信息encryptedData详解
Aug 24 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 #Javascript
vue使用v-for实现hover点击效果
Sep 29 #Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 #Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 #Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 #Javascript
iview同时验证多个表单问题总结
Sep 29 #Javascript
浅谈关于iview表单验证的问题
Sep 29 #Javascript
You might like
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
javascript 获取图片颜色
2009/04/05 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
Django自定义分页效果
2017/06/27 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python函数的万能参数传参详解
2019/07/26 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
2015届本科毕业生自我鉴定
2014/09/27 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2014年科协工作总结
2014/12/09 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers