js打开服务器缓存文件夹路径,浅谈微信页面入口文件被缓存解决方案
缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式,
一般情况
1、添加版本号,在静态资源文件的引用链接后面添加版本号,这样每次发布的时候更新版本号,就能让叫客户端加载新的资源文件,避免再次使用缓存的老文件,如
2、文件名使用hash形式,webpack中打包文件可直接生成,这样每次打包发布的时候都会产生新的hash值,区别于原有的缓存文件
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标签添加缓存设置
微(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:
ps,网上很多答案都提供了添加在head处的meta,但是有的人说没有用。目测是因为meta只能保障js和css等资源不会被缓存,但是无法保障html不被缓存。所以,要和url参数方法于meta方法一起使用,才能保障毫无侧漏!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
js打开服务器缓存文件夹路径,浅谈微信页面入口文件被缓存解决方案相关推荐
- 微信html页面缓存问题,浅谈微信页面入口文件被缓存解决方案_简单_前端开发者...
缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式, 一般情况 1.添加版本号,在静态 l ...
- java缓存同步_浅谈JSON的数据交换、缓存问题和同步问题
JSON轻量级的数据交换格式 相对于XML来说,JSON的解析速度更快,文档更小. JSON的格式 {属性名:属性值,属性名:属性值,--} 属性名的类型可以是string,number,boolea ...
- 浅谈微信小程序对于房地产行业的影响
前几日,我们曾经整理过一篇文章是关于微信小程序对于在线旅游业的影响的一些反思(浅谈微信小程序对OTA在线旅游市场的影响),近日由于生活工作的需要走访了一些房地产的住宅商品房,突然想到微信小程序对于房地 ...
- 浅谈 举家搬迁静态文件到CDN
为什么80%的码农都做不了架构师?>>> 由于七牛CDN最近做活动,对于标准用户可以免费使用如下优惠 10 GB 存储空间 10 G/月 下载流量 10 万次/月 PUT/DE ...
- Android Studio 和 gradle 修改缓存文件夹路径
转载请标明出处:http://blog.csdn.net/xx326664162/article/details/52004676 文章出自:薛瑄的博客 你也可以查看我的其他同类文章,也会让你有一定的 ...
- 打开window桌面文件夹路径的方法
1win+e打开我的电脑控制面板 2然后鼠标右键点击桌面,选择属性选项: 3然后在弹出来的桌面属性界面中,切换到"快捷方式"选项卡,然后查看下面的目标,后面就是桌面文件夹路径了. ...
- 校园服务器系统的意义,浅谈校园网络建设的意义与作用.doc
PAGE PAGE 7 浅谈校园网络建设的意义和作用 摘要:本文围绕校园网建设的意义和作用.结合本校校园网建设的基本经验,运用大量具体实例阐述大力建设校园网络的必要性和可行性,供大家借鉴. 关键字:校 ...
- 微信平台第三方服务器,浅谈微信第三方服务平台的发展前景
伴随着移动端的普及,移动互联网也在飞速的发展,同时也有越来越多的小商家开始抓住了移动互联网的这个渠道开展营销活动.而随着微信的不断更新和发展,微信用户也越来越多,而如今如雨后春笋般出现的各类微信第三方 ...
- js跟php增加删除信息,浅谈JavaScript数组的添加和删除
本文给大家浅谈一下JavaScript数组的添加和删除 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 1.添加 (1)最简单的方法:为新索引赋值 (2)使用push()和unsh ...
最新文章
- PacBio软件总览 - 初级分析
- Nginx做web服务器linux内核参数优化
- 使用selenium控制滚动条(非整屏body)
- java文章上一篇下一篇_每个人都必须阅读的10篇Java文章
- 5902. 检查句子中的数字是否递增
- remmima 不能保存_Vue项目实现表单登录页保存账号和密码到cookie功能_婳祎_前端开发者...
- Javascript 给页面元素添加事件函数探讨
- yolov5-detect.py解析与重写
- xshell连接redhat注册显示中文乱码
- 系统集成项目管理工程师14 总结
- 智慧水利大屏可视化决策系统
- FPGA信号处理系列文章——用matlab理解CIC滤波器的原理
- el table 固定表头和首行_再谈table组件:固定表头和表列
- 安卓手机如何复制粘贴不重叠_多台电脑安卓手机跨设备复制粘贴利器——Clipbrd...
- 探索性测试方法讲解之一
- Leecode:数组中的最长山脉
- 计算机中文字转换为表格怎么弄,怎样将wps中的文字转化成表格?
- 解决Windows10更新后点击左下角开始图标无反应【报错0x800f081f】或点击个性化提示【ms-settings:personalisation-background】错误
- Tomcat,Servlet,JSP之间是什么关系?
- 电脑用户没有admin权限,如何配置node开发环境