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


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 相关文章推荐
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
js实现圆盘记速表
Aug 03 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
详解javascript函数写法大全
Mar 25 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
JS函数式编程实现XDM一
Jun 16 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
全面了解js中的script标签
2016/07/04 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
解读Python中degrees()方法的使用
2015/05/18 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python快排算法详解
2019/03/04 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
小学教师师德感言
2014/02/10 职场文书
给校长的建议书600字
2014/05/15 职场文书
担保书格式
2015/01/20 职场文书
检讨书范文
2015/01/27 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
担保书格式范文
2015/09/22 职场文书
听课评课活动心得体会
2016/01/15 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Python源码解析之List
2021/05/21 Python