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


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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
js实现炫酷光感效果
Sep 05 Javascript
Axios取消重复请求的方法实例详解
Jun 15 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 性能的检查和优化方法
2009/06/21 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
php微信开发之图片回复功能
2018/06/14 PHP
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
名人演讲稿范文
2013/12/28 职场文书
施工资料员岗位职责
2014/01/06 职场文书
消防演习通知
2015/04/25 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android