-
2020-07-18 23:15:34
由于项目不是加载到顶级域名的根目录映射
所以,每次访问其实是加了一个tp5的子目录但是问题来了。引入文件的时候。如果用/static/js那么其实是回到了跟项目平级的目录下,而不是public目录下。
所以找不到文件但是每次打特别长的目录很麻烦。所以想到了tpl_repace_string这个参数。
但是,注意这个参数可不是加载到app.con下的。是加载到template.php下面'tpl_replace_string' => [ '__PUBLIC__'=>'/tp5/public', '__JS__'=>'/tp5/public/static/js', '__CSS__'=>'/tp5/public/static/css', '__IMG__'=>'/tp5/public/static/img'],
因为修改的是配置文件。不是项目文件。所以,每次修改配置文件是要删掉runtime/temp里面的预编译文件。
如果不想每次都删,可以关闭app.con里面的request_cache
这样就可以/每次自动刷新runtime/temp文件,不用手动删了
// 是否开启请求缓存 true自动缓存 支持设置请求缓存规则/'request_cache' => false,
更多相关内容 -
HTML页面自动清理js、css文件的缓存(自动添加版本号)
2020-09-28 04:42:08主要介绍了HTML页面自动清理js、css文件的缓存(自动添加版本号),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
抓包工具-fiddler安装使用与替换js文件
2020-12-17 00:32:46目录一、Fiddler安装与使用二、利用Fiddler用本地js文件替换源网页的js文件 一、Fiddler安装与使用 Fiddler下载地址,可直接安装 安装证书:由于默认无法解析https请求,因此需要安装证书才行,在工具栏找到Tools&...一、Fiddler安装下载
- Fiddler下载地址,可直接安装
安装证书
:由于默认无法解析https请求,因此需要安装证书才行,在工具栏找到Tools>Options>HTTPS >勾选Decrypt HTTPS traffic选项,勾选后安装证书>点击yes>选择是>点击是>提示安装完成;点击右边的Actions按钮选择Trust Root Certificate选项
配置连接信息
:Tools > Options >Connections,勾选Allow remote computers to connect选项, 端口默认是8888,你可以进行修改,然后重启Fiddler
即可
二、Fiddler详细使用
三、Fiddler配置安卓抓包
-
首先电脑cmd窗口查看ipconfig获得ip,然后端口号默认8888 ;即ip:8888
-
然后打开fiddler,手机与fiddler在同一个网络下,
手机当前wifi设置手动代理 ip:8888
-
然后手机浏览器打开访问 ip:8888, 点击出现的页面中的
FiddlerRoot certificate下载证书,然后安装即可
-
安装完后再滑动app后,fiddler就正常抓包了
四、通过Fiddler用本地js文件替换源网页的js文件
- 首先,将网页端的js文件保存到本地,并修改js内容里面想要改的地方,比如保存为ticket.js;
- 其次,打开Fiddler,选择AutoResponder
- 第一步:勾选
Enable rules,Unmatched requests passthrough, Enable Latency
- 第二步:然后
Add Rule
- 第三步:修改对应的源js文件链接;此处的js文件链接,可以从左侧抓包直接点击生成;也可以是你从源网页右击js文件copy link address复制粘贴的;两种方式随便选一种
- 第四步:选择下拉找到
Find a file...
,导入你保存在本地已修改好的的js文件 - 第五步:save保存
- 第六步:重新刷新一下你的网页,即可看到js文件已经被替换
- 第一步:勾选
- 最后,刷新一下网页,查看js文件是否已经被替换成你想替换的内容,并做相应的测试;
注意
:刷新后fiddler替换js文件如果失败,可如下操作- 网页端谷歌开发者工具勾选Network>Disable cache;以防浏览器里面有js源文件的缓存,可能导致fiddler替换js文件失败;
- 源网页对js文件内容进行了检测,如果你本地是格式化的js文件,而源网页是压缩的js文件,那也有可能导致fiddler替换js文件失败,所以本地尽量与源网页格式一致,如压缩去空格等
- 网页端谷歌开发者工具勾选Network>Disable cache;以防浏览器里面有js源文件的缓存,可能导致fiddler替换js文件失败;
-
cache-memory:使用JavaScript的缓存实现
2021-05-25 11:43:03javascript中的缓存实现。 由Jozias Martini [1621100004]和Linka Sofia [1911100048]制造。 工作 中央信息: 集关联映射 作为回报 LRU 该算法必须通过以下方式完成: MP中的单元数:128; 块大小:4个单元格; ... -
解决静态资源文件js/css缓存问题(超详细总结版)
2019-11-18 20:25:29顾名思义,静态资源文件就是js、css、img等非服务器动态运行生成的文件,统称为静态 资源文件。 为什么要缓存静态资源文件 静态资源文件是基本不会改变的,没必要每次都从服务器中获取。也就是说,我们每次向 ...什么是静态资源文件
顾名思义,静态资源文件就是js、css、img等非服务器动态运行生成的文件,统称为静态 资源文件。
为什么要缓存静态资源文件
静态资源文件是基本不会改变的,没必要每次都从服务器中获取。也就是说,我们每次向 服务器发送请求得到的静态资源是相同的。所以我们可以把静态资源缓存再浏览器,也就 是客户端,来进行性能优化。
虽然绝大多数css和js文件都只有几百k,但有些时候会存在如字体文件等超过1MB的文件,加载时间会达到一秒以上,就会极大的影响网页的整体加载速度,这时候就必须要对静态资源文件进行缓存。
实现缓存的几种方法
一、修改html文件
第一种方法就是在html文件的最上面加上这样一行代码:<meta http-equiv="Cache-Control" content="max-age=7200" />
这句话的作用是修改服务器的响应该html文件的响应头,设置其中静态资源文件的缓存时间为7200秒。
说到这里首先要介绍一下服务器给浏览器的静态资源响应,按F12打开开发者调试工具,选择Network,如下图所示:
可以看到下面展示了许多js和css文件的加载信息,单击其中一条记录,可以看到他们的响应头信息。
可以看到,被红框圈上的部分,是和缓存有关的响应头信息。Cache-Control用于指定缓存机制,Expires用于声明缓存到期时间,Pragma则是为了兼容版本设置的,Http/1.1才可以识别Cache-Control,而Pragma对Http/1.0和Http1.1均生效。
因此我们之前做的操作就是修改这个响应头,让其由禁止缓存变为允许缓存。
然而我在做了这个操作之后并没用生效,响应头依旧没有改变。这是因为在页面进行设置的优先级是最低的,springboot内置的web服务器会将这个设置好的响应头进行覆盖。因此如果这个方法没有生效,我们就来使用第二种方法。
二、springboot配置
第二种方法原理相同,修改响应头。具体操作步骤见https://blog.csdn.net/m0_37845840/article/details/81382462,这篇文章介绍的很详细,简单来说分为修改响应头和设置版本号两部分。设置版本号是为了每次修改后的js和css文件都会被更新,也就是浏览器通过版本号来区分自己缓存的js与css文件是否为最新的版本。
然而发现,在springboot进行配置后,响应头并未发生任何变化,没有实现缓存。这里可能有两个原因,第一是本身项目的架构问题,在更高的层级配置了静态资源响应头信息,在当前项目内修改会被覆盖;第二是在nginx进行了配置,nginx的优先级比springboot高,因此设置的响应头信息也会被覆盖。所以我们需要进行第三种配置,在nginx进行设置。
三、修改nginx配置文件
这里首先说明一下为何nginx的优先级更高,nginx是一个实现反向代理和负载均衡的轻量级web服务器,许多项目都会使用到它来做代理。可以理解为它是所有web服务器的统一入口和出口,也就是说我们所有的数据都是从springboot中集成的web服务器出来后,再由nginx代理,作处理后响应给浏览器。如下图所示,nginx最后对响应头作处理,所以会对之前的所有处理进行覆盖。
找到nginx的配置文件nginx.conf,百度搜索相应操作系统命令即可,添加配置文件内容:location ~* \.(woff)$ { proxy_pass http://kubernetes; expires 1d; }
这里的woff可以替换为css|js,即匹配所有css和js文件,这里我需要缓存的为字体文件,后缀为woff。之前查找了很多资料,没有第一行proxy_pass,配置后会出现匹配到的静态资源文件报404,是因为没有设置正确的代理路径,参考自己nginx配置文件中其它部分设置正确的路径即可。这样设置之后,重启nginx,发现可以进行缓存了,如下图所示:
绿色框框圈的部分已经发生了改变,同时响应码由原来的200变为了304
下面两张图是缓存前后的差别:
大小由之前的6.9MB变为350B,时间也由8秒变为100ms。
可以说我们的目的达到了,加载静态资源文件的时间极大的缩短了。但还不够完美,因为多发了一次304请求。也就是说浏览器会再发一次304请求,去问服务器究竟要不要从缓存中获取静态资源文件,确认后再从浏览器的缓存中获取。也就是说这个请求对我们来说是完全多余的,可以进一步优化。
我们发现红框中的响应头Pragma:no-cache依旧存在,这里的no-cache并不是不缓存的意思:no-cache 可以在本地缓存,可以在代理服务器缓存,但是这个缓存要服务器验证才可以使用 no-store 彻底得禁用缓冲,本地和代理服务器都不缓冲,每次都从服务器获取
因此我们的304请求很可能是因为这个响应头造成的。我们要通过nginx去掉这个响应头。
nginx中清除响应头需要下载一个模块headers_more,这个模块可以实现响应头的清除功能。下载安装模块后需要对nginx重新编译才能生效。建议在运维的协助下完成。nginx中需要修改的配置如下:location ~* \.(woff)$ { proxy_pass http://kubernetes; expires 1d; more_clear_headers Pragma; }
将Pragma这个响应头清除,之后重启nginx,结果如下图所示:
状态码已经变为200了,同时后面的(from memory cache)表明是从缓存中获取的该静态资源文件。
可以看到,Size已经变为(from memory cache),时间为0ms,静态资源文件缓存配置完成。注意事项
最后的nginx配置我没有配置版本号,因为我缓存的是字体文件,也就是说是永远不会改变的。然而我们如果缓存的是js和css文件,每隔几周可能都会进行修改,这时候不设置版本号就是存在风险的,可能你浏览器端存有旧的css文件没有过期,这时候又没有版本号作区分,可能会导致无法获取最新的css文件。因此建议添加版本号,具体配置在springboot配置的链接中有详细说明,参考配置即可。
-
浅谈微信页面入口文件被缓存解决方案
2021-08-06 03:49:09缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式,一般情况1、添加版本号,在静态资源文件...缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式,
一般情况
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方法一起使用,才能保障毫无侧漏!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
-
通过nginx替换指纹文件服务器时,浏览器中的资产缓存过期
2021-08-11 05:46:28Matic Jurglič10assetsnginx我通过...因此,例如,当我用命名的文件替换服务器文件夹my-app-8e8faf9.js上的文件时my-app-eaea342.js,我不希望浏览器再次my-app-8e8faf9.js从其缓存中提取.但是当没有可用的新版本时,... -
使用fiddler本地代理替换js文件
2019-08-12 20:09:38针对JS,css,HTML等的前台修改 (1)测试环境:项目较大,本地启动麻烦,耗时 (2)生产环境:项目已经上线,其中某一部分出现问题, 线下又无法看到修改后的效果,不知道代码具体效果的情况鲁莽上线会造成的风险... -
tomcat替换.class文件并没有生效的原因(失效原因)(转)
2021-05-10 01:57:491、小心class内中的project 的类的后,替换文件需要加上 $classMapper这个类, 编译成class的时候,会把public class 中的protected class 编译为$.class , 所以替换的时候也要找到这个class替换上, 不过对于这中替换,... -
Yii2 assets清除缓存的方法
2020-10-22 08:42:29主要介绍了Yii2 assets清除缓存的方法,涉及Yii中assets相关函数调用与配置技巧,需要的朋友可以参考下 -
Vagrant下共享目录静态文件(js/jpg/png等)“缓存”问题
2021-06-19 09:01:45之前提到说通过Vagrant部署开发环境,使用目录共享模式,在本地磁盘进行开发,而通过虚拟机环境运行开发的页面。是的,一切看起来都是那么的顺利,首先基于...但接下来,你发现了一个神奇的事情,你修改替换了一个... -
nginx缓存不起作用问题解决方法
2020-09-30 17:25:44nginx代理做好了,缓存也配置好了,但是发现css、js、jpg这些静态文件统统都cached成功。但是偏偏页面文件依旧到源服务器取 -
【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存
2021-08-31 17:17:53缓存我们会从两个点出发,一个是对bable进行缓存,另一个是对整体的文件资源进行缓存 -
在Chrome中拦截替换远程js资源
2022-04-29 11:01:03如何使用Chrome工具替换和修改远程脚本 -
为什么清空了缓存,重启了项目,甚至重新配置了tomcat,js和jsp文件的修改不生效
2022-03-04 16:11:25最近在项目开发中遇到一个问题,在启动项目之后,修改的js代码一直不生效,浏览器里看还是修改前的代码。 浏览器加载的js代码[在这里插入图片描述](https://img-blog.csdnimg.cn/ b799c444f3204cee8101498e34d02483... -
Charles劫持修改JS文件
2022-01-25 10:54:21Charles抓取劫持修改JS文件,抓取HTTPS请求 -
JavaScript基础之缓存机制:HTTP缓存机制
2020-08-10 10:53:29说到前端的缓存机制,无非就是俩中,一种是浏览器缓存机制,一种就是我们今天要说的HTTP缓存机制。那么接下来就说说这HTTP缓存机制。 什么是HTTP缓存? HTTP缓存指的是,当客户端向服务器请求资源时,会先抵达... -
fiddler本地代理替换js文件
2017-07-28 10:01:08这个也是第一次使用,只是单纯的为了在本地代理测试一下修改的文件是否正常显示,功能是否完善; ============================================================================== 工作中难免遇到很大的一个项目且... -
关于js/css修改文件后浏览器缓存不更新的探讨
2020-07-22 10:49:10使用场景: 每次修改了js/css文件,重新发版后,用户访问时,浏览器总是会缓存了发版前的样式,想要获取最新的样式,需要Ctr+F5清除缓存并刷新,用户体验不好。所以,我们希望每次发版,用户正常访问就能获取最新的... -
linux替换目录下所有文件中的某字符串
2021-05-10 07:49:22比如,要将目录/modules下面所有文件中的zhangsan都修改成lisi,这样做:sed -i "s/zhangsan/lisi/g" `grep zhangsan -rl /modules`解释一下:-i 表示inplace edit,就地修改文件-r 表示搜索子目录-l 表示输出匹配的... -
web页面自动更新版本号清理js、css文件的缓存
2019-04-16 09:54:18在web项目开发过程中,我们经常会引用css、js文件,更新文件后常出现缓存问题(明明更改了代码,在浏览器上访问的时候却没有发生变化),这种情况我们通常采用以下两种解决方案: 1、手动清除浏览器缓存,开发人员... -
grunt-forcemin:无意识地更新对源代码中修订文件的引用以破坏浏览器缓存
2021-07-07 16:38:48假设您有一堆经过修订的文件,每个文件看起来都类似于ae35dd05.app.js ,但在您的源代码中,您实际上是通过它们的原始名称app.js引用这些文件的。 作为构建过程的一部分,您如何自动更新源代码引用? 这个 Grunt ... -
页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存...
2018-11-14 16:53:00一、CSS和JS为什么带参数(形如.css?t=与.js?t=)怎样获取代码 css和js带参数(形如.css?t=与.js?t=)使用参数有两种...第二、客户端会缓存这些css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏... -
无需用户 清浏览器缓存,替换js后自动生效
2018-11-02 10:22:45使用pom自动build工程,会给js和css打上版本号,如果只更改了js,替换上文件后,再更改一下引入该js的文件的版本号,就可以不清缓存,直接生效(很多用户根本不知道怎么清缓存。) ... -
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
2018-08-27 14:28:56iOS8是采用清除js本地文件方法刷新缓存,iOS9及以后调用WKWebView清除缓存接口按照制定时间戳清楚缓存(由于是批量清除缓存可以用在用户登出清除数据,设置页面缓存数据清理)。最佳解决方案是js中对每一个网址,js... -
js清除浏览器缓存
2018-11-13 10:35:38浏览器缓存 所有的数据都可以存到服务器中,但这样并不高效,当我们访问网页... 如何通过js清除缓存? 随机数 1、脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示区别。 即路径或者文件名后的随... -
JS清除缓存的几种方法
2019-06-19 15:44:40一、CSS和JS为什么带参数(形如.css?t=与.js?t=)怎样获取代码 css和js带参数(形如.css?t=与.js?...第二、客户端会缓存这些css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏览器就... -
weblogic JSP缓存问题
2022-01-04 08:59:24weblogic jsp缓存 -
通过fiddler用本地的js文件替换生产上的js文件,测试本地代码
2019-09-30 17:14:30利用fiddler捕获到我当前这个页面所有的请求,包括js,接口,图片等,因为页面可能存在缓存,所以请求的时候有可能不会重新获取这些文件,所以要清一次缓存,一定要让fiddler捕获到你要替换的js文件 这个是我...