全部缓存<keep-alive> <router-view></router-view></keep-alive>缓存单个指定路
原创
2022-12-13 10:25:05
260阅读
WEB的网页缓存分析xChrome会自动本次缓存Nginx的本地资源nginx在1.0之后的版本，当处理本地资源文件的时候，会自动追加Etag和Last-modified头部信息Chrome在收到一个资源携带了Date和Last-Modified头部，同时，没有Expires头部，会自动决定过期策略，简单的规则有个例子，不确定正确性，但是Chrome就是会保持这个过期策略，下次请求的时候会直接
转载
2024-10-08 15:04:22
61阅读
需求在开发vue的项目中有遇到了这样一个需求：一个视频列表页面，展示视频名称和是否收藏，点击进去某一项观看，可以收藏或者取消收藏，返回的时候需要记住列表页面的页码等状态，同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面，也就是进入的时候是视频列表页面的第一页 一句话总结一下： pageAList->pageADetail->pageAList,
转载
2024-06-13 14:58:41
1397阅读
vue中，我们所要实现的一个场景就是：1.搜索页面==>到搜索结果列表页时，搜索结果列表页面要重新获取数据，2.搜索结果列表页面==>点击进入详情页==>从详情页返回列表页时，要保存上次已经加载的数据和自动还原上次的浏览位置。缓存组件，vue2中提供了keep-alive。首先在我们的app.vue中定义keep-alive<keep-alive>
转载
2024-06-07 19:57:03
19阅读
【前端】VUE 缓存动态页面 JeecgBoot切换tab缓存标签页。
什么是keep-alive有时候我们不希望组件被重新渲染影响使用体验；或者出于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。官网释义：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组
我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。不过在我前端工作的生涯中一直以为前端就是写写页面，写写交互，就已经很了不起，这种没有志向的想法发导致我日后的工作一直处于瓶颈。做人嘛总要有梦想嘛，不然跟一条咸鱼有什么区别。最近我一直在关于前端优化的问题，原来对页面进行有效缓存对于响应速度会大大提高。我也是综合自己看到的几篇
转载
2024-04-29 10:01:04
156阅读
前端缓存的优势1、可配置需要缓存的资源；2、网络无连接应用仍可用；3、本地读取缓存资源，提升访问速度，增强用户体验；4、减少请求，缓解服务器负担。前端缓存的实现在需要应用缓存在页面的根元素(html)里，添加属性manifest="demo.appcache"。路径为以 .appcache 为后缀的缓存清单文件<!DOCTYPE html>&l...
转载
2022-07-12 17:09:33
69阅读
文章目录1.分类2.强缓存2.1 Expires2.2 Cache-Control3.协商缓存4.扩展4.1 缓存失效问题1.分类前端缓存分为强缓存和协商缓存两种
原创
2022-05-26 01:32:16
234阅读
什么是web缓存web缓存主要指的是两部分：浏览器缓存和http缓存。浏览器缓存：比如,localStorage,sessionStorage,cookie等等。这些功能主要用于缓存一些必要的数据，比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。注意，像localStorage，sessionStorage这种用户缓存数据的功能，他只能保存5M左右的数据，多了不行。cookie则
原创
2022-09-07 21:29:01
302阅读
缓存方式localStoragesessionStoragestorage.js（实际上时多种方式的集合也包括了前两种)vuexkeep-alive(主要用于保留组件状态或避免重新渲染，自动缓存，并不能自己读写)localStorage可长期存储数据，除非用户清楚localStorage信息，否则数据会一直存在。同一中浏览器之间，不同页面，数据可以共享。//存
// 将this.pickerIte
转载
2024-03-25 14:43:32
123阅读
vue-router时 keep-alive 页面缓存问题解决keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在 keep-alive内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 作用：在组件切换过程中将状态保
转载
2024-04-16 16:53:08
66阅读
一、< keep-alive >< keep-alive > 用来缓冲插槽中的内容（缓冲后不会重新渲染），就是 < keep-alive >……< / keep-alive>标签包裹的内容，里面只允许一个根标签，多个根标签只缓冲第一个标签，如：<keep-alive>
<div>root1</div>
<
转载
2024-08-03 16:06:21
631阅读
问题描述大家用vue脚手架搭建前端工程时，常被缓存问题所困扰，具体的表现就是，当程序版本升级时，用户因为缓存访问的还是老的页面，然后很多同学很暴力的直接在index.html中加入了这几行代码： <meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<
转载
2024-04-29 09:41:01
274阅读
缓存，不管是PC 端还是移动端，不可避免的问题。vue中有一个keepAlive,这个api 基本 能实现我们开发的一些需要。 一、简单介绍下keep-alive: 1、把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染，实现页面缓存； 2、<
转载
2023-06-01 15:30:27
309阅读
前言 遇到这一个个问题 需要是这样的 Vue里面的不刷新问题页面分为： A 主页 B列表页 C 详情页A beforeRouteLeave 时设置 to.meta.keepAlive = false (A 进入 B页面时)， 不缓存 B列表页B beforeRouteLeave 时 （B -> C）列表页进详情页时 from.meta
转载
2024-05-17 16:57:11
216阅读
web缓存主要指的是两部分：浏览器缓存和http缓存。浏览器缓存一般指localStorage，sessionStorage，cookie等，主要用于缓存一些必要数据在客户端，有大小的容量限制。http缓存主要是针对html，css，img等静态资源，常规情况下，我们不太会去缓存一些动态资源，因为缓存动态资源的话，数据的实时性就不能保证，所以我们一般都只会去缓存一些不太容易被改变的静态资源。htt
转载
2024-02-26 14:29:38
50阅读
功能概述：前端项目中有同一接口重复触发的并发现象一些公共数据接口，如用户信息，配置信息等接口需要多次获取首页有大量重复请求影响启动时间适用条件：基本的公共数据和用户信息get类获取数据接口基本原则就是缓存不更新或者更新周期较长的数据大体思路：初次请求时将接口promise缓存到map对象中，map中的key名使用api名+参数拼接；下一次请求到同一key名的接口直接返回缓存中的promise；如果
转载
2024-02-28 22:25:43
34阅读
这周遇到了一个新需求，产品反馈地图瓦片服务的图片资源没有Http缓存，每次移动地图范围都会向后台发处请求/响应数据，影响了客户端的地图加载体验。所以需要增加这样一种缓存：1）针对同一个请求资源地址URL，首次加载需要缓存数据，后续加载直接读取缓存；2）后台数据发生更新时，需要实时更新缓存； 在完成这个需求之前，我借机补习了一下前端的缓存体系：一 HTTP缓存 提起前端缓存，首先
转载
2024-02-17 13:26:24
17阅读
前端缓存，主要分为两种，HTTP缓存和浏览器缓存。HTTP缓存，主要存在于服务器请求传输时需要记录的一些参数，在服务器代码上设置。浏览器缓存，主要是由前端JS代码主动存储的某些参数。缓存是前端项目性能优化中简单高效的一种方式。优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。例如：前端需要发起一个数据请求，可以分为发起网络请求、后端处理
转载
2023-08-21 16:22:27
106阅读
