精华内容
下载资源
问答
  • 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文件缓存(自动添加版本号),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 目录一、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文件失败,所以本地尽量与源网页格式一致,如压缩去空格等
    展开全文
  • javascript中的缓存实现。 由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配置的链接中有详细说明,参考配置即可。

    展开全文
  • 缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式,一般情况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方法一起使用,才能保障毫无侧漏!

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

    展开全文
  • Matic 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)生产环境:项目已经上线,其中某一部分出现问题, 线下又无法看到修改后的效果,不知道代码具体效果的情况鲁莽上线会造成的风险...
  • 1、小心class内中的project 的类的后,替换文件需要加上 $classMapper这个类, 编译成class的时候,会把public class 中的protected class 编译为$.class , 所以替换的时候也要找到这个class替换上, 不过对于这中替换,...
  • 主要介绍了Yii2 assets清除缓存的方法,涉及Yii中assets相关函数调用与配置技巧,需要的朋友可以参考下
  • 之前提到说通过Vagrant部署开发环境,使用目录共享模式,在本地磁盘进行开发,而通过虚拟机环境运行开发的页面。是的,一切看起来都是那么的顺利,首先基于...但接下来,你发现了一个神奇的事情,你修改替换了一个...
  • nginx代理做好了,缓存也配置好了,但是发现css、js、jpg这些静态文件统统都cached成功。但是偏偏页面文件依旧到源服务器取
  • 缓存我们会从两个点出发,一个是对bable进行缓存,另一个是对整体的文件资源进行缓存
  • 如何使用Chrome工具替换和修改远程脚本
  • 最近在项目开发中遇到一个问题,在启动项目之后,修改的js代码一直不生效,浏览器里看还是修改前的代码。 浏览器加载的js代码[在这里插入图片描述](https://img-blog.csdnimg.cn/ b799c444f3204cee8101498e34d02483...
  • Charles劫持修改JS文件

    2022-01-25 10:54:21
    Charles抓取劫持修改JS文件,抓取HTTPS请求
  • 说到前端的缓存机制,无非就是俩中,一种是浏览器缓存机制,一种就是我们今天要说的HTTP缓存机制。那么接下来就说说这HTTP缓存机制。 什么是HTTP缓存? HTTP缓存指的是,当客户端向服务器请求资源时,会先抵达...
  • fiddler本地代理替换js文件

    万次阅读 2017-07-28 10:01:08
    这个也是第一次使用,只是单纯的为了在本地代理测试一下修改的文件是否正常显示,功能是否完善; ============================================================================== 工作中难免遇到很大的一个项目且...
  • 使用场景: 每次修改了js/css文件,重新发版后,用户访问时,浏览器总是会缓存了发版前的样式,想要获取最新的样式,需要Ctr+F5清除缓存并刷新,用户体验不好。所以,我们希望每次发版,用户正常访问就能获取最新的...
  • 比如,要将目录/modules下面所有文件中的zhangsan都修改成lisi,这样做:sed -i "s/zhangsan/lisi/g" `grep zhangsan -rl /modules`解释一下:-i 表示inplace edit,就地修改文件-r 表示搜索子目录-l 表示输出匹配的...
  • 在web项目开发过程中,我们经常会引用css、js文件,更新文件后常出现缓存问题(明明更改了代码,在浏览器上访问的时候却没有发生变化),这种情况我们通常采用以下两种解决方案: 1、手动清除浏览器缓存,开发人员...
  • 假设您有一堆经过修订的文件,每个文件看起来都类似于ae35dd05.app.js ,但在您的源代码中,您实际上是通过它们的原始名称app.js引用这些文件的。 作为构建过程的一部分,您如何自动更新源代码引用? 这个 Grunt ...
  • 一、CSS和JS为什么带参数(形如.css?t=与.js?t=)怎样获取代码 css和js带参数(形如.css?t=与.js?t=)使用参数有两种...第二、客户端会缓存这些css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏...
  • 使用pom自动build工程,会给js和css打上版本号,如果只更改了js替换文件后,再更改一下引入该js文件的版本号,就可以不清缓存,直接生效(很多用户根本不知道怎么清缓存。) ...
  • iOS8是采用清除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:24
    weblogic jsp缓存
  • 利用fiddler捕获到我当前这个页面所有的请求,包括js,接口,图片等,因为页面可能存在缓存,所以请求的时候有可能不会重新获取这些文件,所以要清一次缓存,一定要让fiddler捕获到你要替换js文件 这个是我...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 68,460
精华内容 27,384
关键字:

替换缓存js文件

友情链接: testMail.rar