首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在下一代js静态版本中停止缓存消耗本地json文件的页面?

在下一代JS静态版本中停止缓存消耗本地JSON文件的页面,可以采取以下几种方法:

  1. 使用版本号或时间戳:在引用JSON文件的URL后添加一个版本号或时间戳参数,确保每次请求的URL都是唯一的。例如:
代码语言:txt
复制
fetch('data.json?v=1.0')

代码语言:txt
复制
fetch('data.json?t=' + new Date().getTime())

这样可以避免浏览器缓存JSON文件,每次请求都会获取最新的数据。

  1. 设置响应头:在服务器端设置JSON文件的响应头,指示浏览器不缓存该文件。可以通过在服务器端的响应中添加以下头部信息实现:
代码语言:txt
复制
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

这样浏览器会在每次请求时都向服务器发送请求,而不会使用缓存的JSON文件。

  1. 使用POST请求:将JSON文件的请求方式从GET改为POST,因为POST请求默认不会被浏览器缓存。例如:
代码语言:txt
复制
fetch('data.json', {
  method: 'POST'
})

这样每次请求都会发送一个新的POST请求,避免使用缓存的JSON文件。

  1. 修改JSON文件的URL:如果以上方法无效,可以尝试修改JSON文件的URL,使其在每次请求时都是一个新的URL。可以通过在URL中添加随机数或其他唯一标识符来实现:
代码语言:txt
复制
fetch('data_' + Math.random() + '.json')

这样每次请求都会使用一个新的URL,避免使用缓存的JSON文件。

腾讯云相关产品推荐:

  • CDN(内容分发网络):用于加速静态资源的传输,可以通过配置缓存策略来控制缓存行为。详情请参考:腾讯云CDN产品介绍
  • COS(对象存储):用于存储和管理静态文件,可以通过设置HTTP头部来控制缓存行为。详情请参考:腾讯云COS产品介绍
  • SCF(云函数):可以将业务逻辑封装为函数,并通过触发器来触发执行,可以在函数中动态获取最新的JSON数据。详情请参考:腾讯云SCF产品介绍
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

性能调优--gzip、缓存、content-download、逐针渲染、Queueing、动态延迟加载、最小化主线程工作

在开发环境下运行(本地)也会出现类似情况,且更重要是 chunk-7182b1fa.js 933kB 才用了 35ms。因此可以排除网络坏境导致。 怀疑二:缓存导致?...---- 问题有了方向,后续就是针对问题出各种优化方案 ---- 优化方式 通用:开启缓存 Nginx 开启静态资源(css、js缓存配置: 在 server location / 配置增加如下配置...可选:动态延迟加载 页面存在好多 Dialog 等下钻需要组件,可以通过 webpack import() 动态加载,避免进入页面全部发起请求。 import() 可以动态加载模块。.../locale/${language}.json) 会把 .locale 目录每个 .json 文件打包到新 chunk 。...在运行时,计算完变量 language 后,就可以使用像 english.json 或 german.json 任何文件

4.7K40

70%以上业务由H5开发,手机QQ Hybrid 架构如何优化演进?

还有一点是每次打开H5都涉及到网络交互、文件下载,这些操作会消耗用户流量,如果流量消耗大用户也会不高兴。...如何统一数据 如何快速把四个版本数据全部统一?我们针对静态直出这种模式做了小型自动构建系统,产品经理在管理端配置数据要同步dataServer时,我们会立刻启动我们内部称为vnues构建系统。...这套系统是基于Node.js搭建,会把开发所编写代码文件和UI素材图片等等数据实时生成最新版本HTML,然后发布到CDN以及同步到offlineServer上,这可以解决CDN文件与最新数据不一致问题...这里可能有疑问,为什么静态直出在离线包情况下网络耗时还需要800多毫秒,本地缓存不应该是零耗时吗?...事实上动态页面和之前提到静态页面离线缓存机制我们仍在使用,因为我们业务页面还有大量公用JS,比如QQ提供JS API封装,还有一些共用CSS也是通过离线包策略做预推,这也是大家每次登录时候都会进行下载

1.8K10
  • 这些node开源工具你值得拥有(下)

    Bundleless 模式是利用浏览器能够自主加载特性,通过跳过打包环节,使得我们在项目启动时可以直接获取到极快启动速度,而在本地更新时只需要重新编译单个文件 3.缓存 3.1 应用场景1:...虽然后来出了Uglify-ES支持处理ES6文件,但也因为存在bug太多,目前该项目也停止维护了。...anywhere: 随时随地将你的当前目录变成一个静态文件服务器根目录。 json-server: 在不到30秒时间内获得具有零编码完整伪造REST API。...模版引擎 模板引擎是一个通过结合页面模板、要展示数据生成HTML页面的工具,本质上是后端渲染(SSR)需求,加上Node渲染页面本身是纯静态,当我们需要页面多样化、更灵活,我们就需要使用模板引擎来强化页面...ncp: 使用Node.js进行异步递归文件复制。 rimraf: 递归删除文件,类似 rm -rf。 9.2 应用场景2: 如何监控文件变更?

    1.7K30

    前端性能优化常用方案

    ,当页面加载完,并且图片在可视区域内我们再去做图片加载 7.利用浏览器和服务器端缓存技术(304缓存),把一些不经常更新静态资源文件缓存处理(例如:JS、CSS、静态图片等都可以做缓存) 原理是为了减少...,避免由于递归导致栈内存嵌套(建议使用尾递归) 27.避免使用iframe(不仅不好管控样式,而且相当于在A页面中加载了其它页面消耗较大) 28.利用H5提供localstorage本地存储或者是...manifest离线缓存,做一些信息本地存储,下一次加载页面的时候直接从本地获取,减少HTTP请求次数 29.基于SCRIPT调取JS时候,可已使用 defer或者async 来异步加载 重量级优化...,而JS一般都是用来操作DOM元素,需要等到元素加载完再操作) 2.能用CSS搞定绝对不用JS,能用原生JS搞定绝对不用插件,绝对不使用FLASH(除了音视频版本浏览器播放) =>CSS处理动画等功能性能优于...JS,而且CSStransform变形还开起了硬件加速 3.JS尽量减少对EVAL使用,因为JS合并压缩时候,可能出现由于符号不完善,导致代码执行优先级错乱问题,EVAL处理起来消耗性能也是偏大一点

    71620

    PWA - 令人惊奇web用户体验新方法

    , 这样之后打开页面都会使用版本更新缓存。...接下来看一下sw.js 主要做这几件事情: 首先安装时会触发 install 事件,监听该事件可执行安装时要做事情。示例缓存用于离线时使用静态资源,这也是最常见行为....版本更新 更新静态资源:缓存资源随着版本更新会过期, 所以会根据缓存字符串名称(这里变量为 cacheStorageKey, 值用了 "minimal-pwa-1")清除旧缓存, 可以遍历所有的缓存名称逐一判断决决定是否清除...如果 /sw.js 内容有更新,当访问网站页面时浏览器获取了新文件,逐字节比对 /sw.js 文件发现不同时它会认为有更新启动 更新算法,于是会安装新文件并触发 install 事件。...() 取得页面的控制权, 这样之后打开页面都会使用版本更新缓存

    2.6K10

    PWA 入门: 写个非常简单 PWA 页面

    准备一个 HTML 文件, 以及相应 CSS 等: 添加 manifest.json 文件 为了让 PWA 应用被添加到主屏幕, 使用 manifest.json 定义应用名称, 图标等等信息。...waiting 状态脚本进入 activate 状态 clients: 表示 Service Worker 接管页面 处理静态缓存 首先定义需要缓存路径, 以及需要缓存静态文件列表, 这个列表也可以通过...处理动态缓存 网页抓取资源过程, 在 Service Worker 可以捕获到 fetch 事件, 可以编写代码决定如何响应资源请求: 真实项目当中, 可以根据资源类型, 站点特点, 可以专门设计复杂策略...: 在新安装 Service Worker 通过调用 self.clients.claim() 取得页面的控制权, 这样之后打开页面都会使用版本更新缓存。...比如在 HTML 当中更新版本到 2: 同时 sw.js 文件当中也要进行一次修改, 保证文件发生改变, 同时缓存名称也变改变了: 然后重新打开一次页面, 这个时候渲染页面依然是旧, 不过可以从

    2.8K50

    H5开发在QQ钱包应用实践

    而这些有效请求,又有9个是JS请求,有8个是IMG,还有一些其它请求。 我们大概可以评估出一个页面可能有77%静态资源。...稳定和快速:社区里框架大多会包含类似静态文件处理,json数据处理等额外功能,这并不是我们想要。 ? 服务平滑重启 ? 我们把服务器平滑重启逻辑内置到框架里面。...通过在发布系统上配置一个后置脚本来通知node.js子进程有新文件要发布,并在子进程接收到消息之后把这些消息通知发送给旧子进程,它就会停止对外服务。...页面缓存 sonic支持对h5页面级进行本地缓存,将返回页面分别拆分成数据层以及模版层层分开来缓存,生成本地缓存文件,且缓存时长为永久缓存,如果页面是没有任何变化,这时候会完全显示缓存数据。...增量更新 对于页面更新情况,sonic会去对比和计算客户端缓存页面的变更地方,封装成json数据结构返回给客户端进行页面更新以及缓存更新,这样可以大大减小了回包大小,特别对于移动网络而言可以大幅度为用户节省了请求流量

    1.1K90

    《QQ音乐小电台》小程序开发

    mina框架 js:逻辑层开发 WXML:页面布局 WXSS:页面的样式 整个系统分为两块视图层(View)和逻辑层(App Service)。 页面js,data数据是需要约定为只读。...其中,app由三个文件构成,公共设置app.json 、公共样式app.wxss、主体逻辑app.js 。...每个page由四部分组成,页面设置page.json页面文件page.wxml、页面样式page.wxss、页面主体逻辑page.js。 逻辑层 App() 函数用来注册一个小程序。...2、本地资源无法通过WXSS获取,所以WXSS样式都是用网络图片,或者base64 api wx.request wx.request发起是 HTTPS 请求。...会触发wx.onBackgroundAudioStop() 2、wx.onBackgroundAudioStop() 监听音乐停止 数据缓存 微信小程序没有Cookie、sessionStorage和localStorage

    4.7K10

    Gulp 定制专属提速“外挂”(下)

    所以今天要和大家一起探讨如何解决静态资源版本更新问题和package.json作用。...相关阅读:前端工程化 | 定制专属提速“外挂”(上)| 前端工程化 | 揭秘程序员提速“外挂” 本文内容概要 Gulp解决静态资源版本更新问题 package.json作用 Gulp小结 静态资源缓存更新问题...但是,又出现了一个新问题,当我们需要对网站做改版升级时候,如何缓存静态资源失效。...如果网站静态资源做了修改,如何保证用户访问是最新静态资源而不是缓存起来静态资源?具体先来看看下面的几种解决方案。...因为在覆盖过程静态资源和页面文件部署有一定时间间隔,对于一个大型网站来说即使时间间隔很小,都有可能出现新用户访问。那在这个时间间隔内,用户访问网站会发生什么情况呢?

    1.1K80

    Carson带你学Android:手把手构建WebView缓存机制及资源预加载方案

    缓存机制:如何将加载过网页数据保存到本地 b....应用场景 静态资源文件存储,如JS、CSS、字体、图片等 Android Webview会将缓存文件记录及文件内容会存在当前 app data 目录。 d....应用场景 存储静态文件(如JS、CSS、字体文件) 应用场景 同 浏览器缓存机制 但AppCache 是对 浏览器缓存机制 补充,不是替代。 d....2.3.1 需求场景 2.3.2 实现步骤 事先将更新频率较低、常用 & 固定H5静态资源 文件(如JS、CSS文件、图片等) 放到本地 拦截H5页面的资源网络请求 并进行检测 如果检测到本地具有相同静态资源...WIFI环境时让服务器推送到本地 很多著名App(如微信)就是采用小范围更新本地资源 这种缓存机制好处 有效解决 H5页面静态资源 加载速度慢 & 流量消耗问题 开发成本低 没有改变前端

    2.3K10

    《前端工程化》-- 1. 前端工程简史

    SPA有以下优点: 1)减轻了服务器资源消耗; 2)与HTML文档比起来,JSON数据体积小很多,减少了网络请求时间消耗; 3)页面路由控制更快速灵活; 4)可以离线使用。...SPA带来新问题: 1)“白屏时间”,浏览器需要等待JavaScript文件加载完成之后才可以渲染后续HMTL文档内容,用户在等待过程页面是空白; 2)由于客户端和服务器端编程语言不同,可能会存在一些诸如数据格式差异...,前后端分离将静态文件和动态文件分离部署并结合回滚策略,简化了部署流程,增强了应用程序健壮性。...从部署角度衡量工程化主要体现在“稳”: 部署并不是简单地把文件“放到”线上就可以了,还需要考虑用户客户端缓存是否影响了新版本展现、考虑测试用例没有覆盖100%情况下危机处理、考虑不同地区开放不同版本等...不论前端工程化功能如何完备,规范如何严谨,需要谨记是,前端工程化必须是整个Web工作流中间一个子集方案。前端工程化最终完美形态,必然与整体工作流结合,作为持续集成方案一环。

    1.2K10

    雅虎优化最佳实践

    添加Expires或Cache-Control在header 这是强制缓存。 对于静态组件,在header设置expires一个尽量长值,以使之接近永不过期。...所以比如首页,可以将js与css内联,因为速度第一。而比较公用css与js则单独拎出来,放在缓存里,能提高所有用这些文件页面加载速度。...就如果这个页面用到某js文件。然后更新了js文件a方法,但是页面没用到a方法,所以这个页面仍然不更新缓存) (这里提一下webpackhash。...避免css过滤器 在ie7以下,为了实现渐变,有AlphaImageLoader,但是它在下载图片时会阻止渲染并冻结页面,增加内存消耗,并且应用在每个div而不是图片上,更加浪费性能。...附200(cache)与304区别: 200(cache)即浏览器使用本地缓存版本,最快,因为不用向web服务器发请求。

    1.5K20

    H5缓存机制浅析

    分析:Cache-Control 和 Last-Modified 一般用在 Web 静态资源文件上,如 JS、CSS 和一些图像文件。...通过设置资源文件缓存属性,对提高资源文件加载速度,节省流量很有意义,特别是移动网络环境。但问题是:缓存有效时长该如何设置?...在实际应用,为了解决 Cache-Control 缓存时长不好设置问题,以及为了”消灭304“,Web前端采用方式是: 在要缓存资源文件名中加上版本号或文件 MD5值字串,如 common.d5d02a02...要更新缓存文件,需要更新包含它 manifest 文件,那怕只加一个空格。常用方法,是修改 manifest 文件注释版本号。...结论:综合各种缓存机制比较,对于静态文件,如 JS、CSS、字体、图片等,适合通过浏览器缓存机制来进行缓存,通过缓存文件可大幅提升 Web 加载速度,且节省流量。

    1.8K80

    Hybris平台Web架构模式演变:前后端分离

    View通过服务端完成后,视图页面包含CSS, JS等资源,这些资源需要重新请求(虽然可能已经进行了缓存) Hybris平台前后端协作痛点 由于Hybris平台基于传统服务端MVC(Model-View-Controller...在模式二下,首先带来是时间、成本消耗静态原型对于用户来说不是最终产品,只是开发过程一个过渡品。...其二,将静态原型转换到服务端View过程,后端开发人员需要了解前端设计,比如:如何找到正确切分点将一个完整静态页面切分成若干小片断,并应用于服务端。在比如:如何正确地使用前端第三方库?...由于前端内容是完全静态内容,在初次获取以后大部分时间内,浏览器使用就是本地缓存,也就是说,服务器压力主要来自于承载数据Restful API调用。...如上图所示(Promotion detail为例),一套完整渲染流程包含以上步骤,其中不乏一些技巧,比如:前端如何利用Hybris Page Type属性来完成JS/CSS文件查找,从而避免不相关JS

    1.6K60

    localStorage黑科技-js和css缓存机制

    一般做法就是尽量延长资源有效期,也就是设置 Cache-Control里max-age,使页面资源请求返回码为304,让浏览器直接使用本地缓存。  ...虽然pc端协商缓存(304)很快,但手机端因为网络原因,协商缓存效果就没pc端那么好了。而且,手机会经常清除本地缓存,所以文件缓存时间也不会很长。  ...所以,如果把js资源和css资源存储在localStorage,则可以省去发送http请求所消耗时间,大大提高用户浏览体验。...我在一个js缓存代码,插入alert("hehe");,看页面刷新时候,是否会出现该弹窗,来验证是否存在攻击漏洞。 ? 刷新页面后,结果如下图: ? 可以看出,微信也没有解决这类问题。...这里,我修改文件名为***587.js(原来文件名为***586.js)。接着F5刷新页面。  结果为:report.js代码更新了,版本号也恢复回 ***586.js。 ?

    4.3K20

    双11主会场性能体验提升 - 秒开优化

    页面配置‍‍ Web应用样式和页面的内容,是依赖JSON配置下载和动态JS脚本解析执行。...由于会场业务特殊性,除了JSON配置之外,还有一大部分动态JS执行,内涵页面降级、页面展示、样式信息等信息。加速JSON配置下载和提前解析执行,能减少或去除容器白屏时间。...资源加载提速 资源加载加速 资源加载加速,依赖ZCache提供能力,对于业务依赖一些通用、固定、很少变动静态资源文件(html/js/css等),在使用之前提前加载放到本地缓存,并做好版本管理和动态下发能力...同时为了保证读写稳定性,仅将首屏相关数据、模块等写入缓存。 默认静态数据 快照数据依赖用户访问,初次访问用户本地一定是没有快照。...为了优化初次访问体验,会场前端将主会场模块列表、资源版本静态信息,直接托管到CDN。在没有快照时,优先拉取这份静态数据来提前加载模块,减少模块加载耗时。

    2.1K20

    网站前端性能优化

    减少HTTP请求 终端用户响应时间80%消耗在前端,而大部分时间都是在下页面的资源:图片,脚本,flash等等,减少请求资源简化页面设计成为了性能提升关键。...但是实际上我们会遇到一个挑战:如果版本更新导致原来CSS或JS有改动,如何确保终端用户是下载最新资源文件呢?...第一次访问url时,用户从服务器段获取页面内容,并把相关文件(images,css,js…)放在高速缓存,也会把文件头中expired time,last modified, ETags等相关信息也一同保留下来...用户重复访问url时,浏览器首先看高速缓存是否有本站同名文件,如果有,则检查文件过期时间;如果尚未过期,则直接从缓存读取文件,不再访问服务器。 c....如果缓存文件过期时间不存在或已超出,则浏览器会访问服务器获取文件头信息,检查last modifed或ETags等信息,如果发现本地缓存文件在上次访问后没被修改,则使用本地缓存文件;如果修改过

    2.1K20

    PWA:可能是成本最低站点加速方式

    模板化   由于 manifest.json 文件我们不想要每个用户都来复制一遍,所以可以将这个文件内容模板化,即把 manifest.json 文件放置在 _layouts 文件。...' 链接到页面   当上面的内容都设置好后,我们还需将 manifest.json 声明配置加入到网站所有页面,内容如下所示。... 离线缓存   Service Worker 功能定义文件实际上也是一个 JS 文件(这里命名为 sw.js),参考内容如下: // sw.js const CACHE =...如果首次从缓存没有找到想要文件,则会请求更新缓存获取该文件。...CDN 化:虽然 PWA 应用有缓存能力,但是只是本地缓存,对于大多数第一次请求缓存时间还是取决于用户客户端到源站之间网络,CDN 能够很好地弥补这一点。

    1.1K30
    领券