当前位置:首页 » 硬盘大全 » 页面缓存生效
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

页面缓存生效

发布时间: 2023-07-15 06:18:46

1. 网站缓存功能是什么意思

提前下载后储存在本地硬盘

缓存的最根本的目的是为了提高网站性能,减轻频繁访问数据而给数据库带来的压力.再进一步,合理的缓存了某种数据形式,还会减轻程序运算时,对CPU带来的压力.首先,我们要知道一个最基本的效率规则,操作内存中的数据比操作存放在硬盘上的数据是要快N个数量级的.操作简单的文本结构的数据比操作数据库中的数据快N个数量级.

目前缓存的做法分为两种模式:


第一种模式是内存缓存,缓存数据存放在服务器的内存空间中,这种模式的效率是最高的.这里要注意的是:每一个服务器的资源都是有限的,盲目的把所有数据都加在到内存中,将可能会导致服务器资源占用过多,而造成Web服务失败.


第二种模式就是文件缓存,缓存数据存放在服务器的硬盘空间中.存放格式有很多种类,如:文本格式,XML格式,二进制格式等等.这里要注意的是,服务器I/O的处理能力有限,当一次性读取过大数据时(>1M),它并没有想象中那么的高效.这个时候就需要你有一个合理的文件结构来解决了.但这已经不在我们本次要讲叙的内容范围内了.

2. 前端缓存的理解 或者 前端数据持久化的理解(强制缓存、协商缓存)

缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于 缓存文件可以重复利用 ,还可以减少带宽,降低网络负荷。

        对于一个数据请求来说,可以分为发起 网络请求、后端处理、浏览器响应 三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。

①不存在该缓存结果和缓存标识,强制缓存失效,则直接向服务器发起请求

②存在该缓存结果和缓存标识,但该结果已失效,强制缓存失效,则使用协商缓存

③存在该缓存结果和缓存标识,且该结果尚未失效,强制缓存生效,直接返回该结果

控制强制缓存的字段分别是Expires和Cache-Control,其中Cache-Control优先级比Expires高。

Cache-Control、Expires都是缓存到期时间,Cache-Control是相对值,Expires是绝对值,即再次发送请求时,如果时间没到期,强制缓存生效。

注:在无法确定客户端的时间是否与服务端的时间同步的情况下,Cache-Control相比于expires是更好的选择,所以同时存在时,只有Cache-Control生效。

①协商缓存生效,返回304

②协商缓存失效,返回200和请求结果

这里我们以博客的请求为例,状态码为灰色的请求则代表使用了强制缓存,请求对应的Size值则代表该缓存存放的位置,分别为from memory cache 和 from disk cache。那么from memory cache 和 from disk cache又分别代表的是什么呢?什么时候会使用from disk cache,什么时候会使用from memory cache呢?

from memory cache代表使用 内存中的缓存 ,from disk cache则代表使用的是 硬盘中的缓存 ,

3. 修改JS代码 为什么客户端需要删除缓存 才能生效

因为网速问题,浏览器不能每次打开一个页面都从新获取页面中的js,css,图片之类的资源。因为大部分页面被修改的频率不大。这样就可以在网络条件比较差的情况下流畅打开之前的页面。

如果需要浏览器不做缓存,可以在header里写一些信息(没测试过,直接粘的网上的代码)

<metahttp-equiv="Expires"content="0">
<metahttp-equiv="Pragma"content="no-cache">
<metahttp-equiv="Cache-control"content="no-cache">
<metahttp-equiv="Cache"content="no-cache">

动态加载js文件,在js资源url后加随机数

<script>
document.write("<scripttype='text/javascript'src='/js/test.js?"+Math.random();+"'></script>");
</script>

4. 浏览器缓存机制

有dns的地方,就有缓存。浏览器、操作系统、Local DNS、根域名服务器,它们都会对DNS结果做一定程度的缓存。

DNS查询过程如下:

首先搜索浏览器自身的DNS缓存,如果存在,则域名解析到此完成。
如果浏览器自身的缓存里面没有找到对应的条目,那么会尝试读取操作系统的hosts文件看是否存在对应的映射关系,如果存在,则域名解析到此完成。
如果本地hosts文件不存在映射关系,则查找本地DNS服务器(ISP服务器,或者自己手动设置的DNS服务器),如果存在,域名到此解析完成。
如果本地DNS服务器还没找到的话,它就会向根服务器发出请求,进行递归查询。

浏览器本地缓存失效后,浏览器会向CDN边缘节点发起请求。类似浏览器缓存,CDN边缘节点也存在着一套缓存机制。CDN边缘节点缓存策略因服务商不同而不同,但一般都会遵循http标准协议,通过http响应头中的
Cache-control: max-age 的字段来设置CDN边缘节点数据缓存时间。

当浏览器向CDN节点请求数据时,CDN节点会判断缓存数据是否过期,若缓存数据并没有过期,则直接将缓存数据返回给客户端;否则,CDN节点就会向服务器发出回源请求,从服务器拉取最新数据,更新本地缓存,并将最新数据返回给客户端。 CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间,为用户提供更精细化的缓存管理。

CDN 优势
CDN节点解决了跨运营商和跨地域访问的问题,访问延时大大降低。
大部分请求在CDN边缘节点完成,CDN起到了分流作用,减轻了源服务器的负载。

http请求报文(request)
请求行
请求方法  空格  URL 空格  协议版本 回车符 换行符
请求头(通用信息头、请求头、实体头)
头部字段名 冒号  值  回车键 换行符
...
头部字段名 冒号  值  回车键 换行符
空行
回车符   换行符
实体主体(只有post请求有)
主体

http响应报文(response)
状态行
协议版本  空格  状态码 空格  状态码描述 回车符 换行符
响应头部
头部字段名 冒号  值   回车符 换行符
...
头部字段名 冒号  值   回车符 换行符
空行
回车符   换行符
响应正文
正文

浏览器初次向服务器发起请求后拿到请求结果,会根据响应报文中HTTP头的缓存标识,决定是否缓存返回的结果,是则将请求结果和缓存标识存入浏览器缓存中

浏览器每次发起请求,都会现在浏览器缓存中查找该请求的结果以及缓存标识
浏览器                浏览器缓存        服务器

——————第一次发起http请求——————>

<——没有该请求的缓存结果和缓存标识————

——————————————发起http请求——————————————>

<——————————返回该请求结果和缓存规则————————————

——将请求结果和缓存标识存入浏览器缓存——>

强制缓存就是向浏览器缓存查找结果,并根据该结果的缓存规则来决定是否使用该缓存结果的过程

强制缓存的情况分为三种:
1、不存在该缓存结果和缓存标识,强制缓存失效,直接向服务器发起请求
2、存在该缓存结果和缓存标识,但结果已经失效,强制缓存失效,使用协商缓存
3、存在该缓存结果和缓存标识,且该结果没有失效,强制缓存生效,直接返回该结果

控制强制缓存的字段:Expires,Cache-Control

Expires 是 HTTP/1.0 控制缓存的字段,值为服务器返回该请求的结果缓存时间
即再次发送请求是,客户端时间 小于 Expires的值,直接使用缓存结果

Cache-Control 是HTTP/1.1的规则,主要用于控制网页缓存,主要取值为:
public:所有的内容都缓存(客户端和代理服务器都可以缓存)
private:所有内容只有客户端可以缓存(默认值)
no-cache:客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
no-store:即不使用强制缓存,也不使用协商缓存
max-age=xxx:缓存内容将在xxx秒后失效

Expires 是一个绝对值
Cache-Control 中 max-age 是相对值,解决了 Expires时期 服务端与客户端 可能出现时间差的问题

注:Expires和Cache-Control同时存在时,只有Cache-Control生效

协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程

协商缓存的两种情况:
1、协商缓存生效,返回304,继续使用缓存
过程:
浏览器                 浏览器缓存     服务器

————————发起http请求————————>

<——该请求的缓存结果失效,只返回缓存标识——

————————携带该资源的缓存标识,发起http请求————————>

<—————————————304,该资源无更新————————————

——————获取该请求的缓存结果——————>

<——————返回该请求的缓存结果——————

2、协商缓存失败,返回200和请求结果
过程:
浏览器                 浏览器缓存     服务器

————————发起http请求————————>

<——该请求的缓存结果失效,只返回缓存标识——

————————携带该资源的缓存标识,发起http请求————————>

<————————200,资源已更新,重新返回请求和结果———————

——将该请求结果和缓存标识存入浏览器缓存中—>

协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的

控制协商缓存的字段:
(1) Last-Modified/If-Modified-Since:Last-Modified是服务器响应请求是,返回该资源文件在服务器最后被修改的时间;If-Modified-Since再次发起请求时,携带上次返回的Last-Modified的值,服务器将该字段值与该资源最后修改时间对比,决定是否用缓存
(2)Etag/If-None-Match:Etag服务器响应请求时,返回当前资源文件的一个唯一标识,由服务器生成之;If-None-Match是再次发起请求时,携带上次返回的唯一标识Etag的值,服务器收到后,将该字段值与该资源在服务器上的Etag对比,一致 则返回304,否则返回200

注:Etag/If-None-Match优先级高于Last-Modified/If-Modified-Since,同时存在时只有Etag/If-None-Match生效

浏览器缓存分为:内存缓存 和 硬盘缓存

内存缓存特性:
(1)快速读取:内存缓存会将编译解析后的文件,存入该进程的内存中,便于下次运行时快速读取
(2)时效性:一旦关闭进程,进程内存清空

硬盘缓存特性:
永久性:直接写入硬盘文件中
复杂、缓慢:读取缓存对该缓存存放的硬盘文件进行I/O操作,重新解析

from memory cache:使用内存中的缓存

from disk cache:使用硬盘中的缓存

浏览器读取顺序:memory ——> disk

浏览器将js和图片等文件解析执行后直接存入内存缓存中,F5刷新页面时,from memory cache(使用内存中的缓存)
css文件存入硬盘中,F5刷新页面时,from disk cache(使用硬盘中的缓存)

参考文章
https://segmentfault.com/a/1190000017962411
https://www.cnblogs.com/chengxs/p/10396066.html

5. h5缓存处理方法

缓存的目的:保证每个页面刷新后都能够正常显示,不是为了做全局状态共享

有些人错误的使用缓存去做全局状态共享,这个是低效的。不过可以针对要缓存的信息,也可能是需要全局状态共享的,这个时候要注意内存和缓存里的信息保持一致。
例如token一般是全局状态共享的,同时也要缓存下来,方便刷新后免登陆。

要缓存哪些信息:恢复页面ui需要的最小信息,可以从路由页面维度,去思考每个页面需要缓存哪些信息才能保证用户刷新页面后能够正常显示页面;
缓存要注意的问题
1.缓存在前,使用在后,有时候不注意,会发生没有被缓存,就去被使用了。

分析最小缓存信息,每个页面的最小缓存信息
有这个id就可以获取到整个页面的信息

url带参数 方便刷新不丢失信息
内存缓存

6. java如何将页面每次请求获得的数据缓存起来供使用

?阏飧龊诵牡牡胤剑?褪莂ction这儿不去查数据库,而拿到缓存的数据再直接返回到前台嘛。核心代码逻辑就是:longobsoleteTime=1天;
List
list=cache.get(abc,
obsoleteTime);if(list==null){
list=manager.search(..);
这样的缓存策略很多的啊。比如oscache就可以达到要求,而且用起来很简单,只要一个jar,自己抽象一个cache的接口,套上去,就能用了。

7. vue页面缓存设置,动态设置页面缓存

情景:A页面—>B页面—>C页面,A页面去B页面期望B页面不缓存,B页面去C页面时,期望B页面可以被缓存。(实际场景可以是:A为首页,B为列表页,C为详情页,B滚动翻页后,从C返回B,记录滚动位置。)
通过路由访问钩子设置B页面的keepAlive为true或者false。
离开路由后,判断to.name是否是A的路由名,是的话设置为false,否则设置为true。注意B页面的keepAlive要设置为true。

2.通过vuex结合路由的includes功能以及路由钩子函数实现。(推荐,实现起来优雅)
3.声明一个初始化页面状态,内部变量的函数,从a 页面进入执行初始化函数,其余情况不执行。视图依赖数据驱动,所以可以实现效果。

8. 浏览器中的缓存

在我们使用浏览器访问网页的过程中,浏览器经常会缓存各种网页中的内容。当再次访问同一个网页时,可以发现部分内容是从缓存直接读取的。
查看HTTP的响应信息,就能发现一些端倪。比如响应 200 from cache; 304 not modify 等等。
下面对浏览器使用缓存的各种情形做一下分析:

Pragma是HTTP 1.0版本的一个参数,在HTTP 1.1版本里面这个参数也会生效,如果不想浏览器缓存网页的内容,可以在 Response header 里面加上 :Pragma: no-cache。

Cache-Control是HTTP 1.1版本新增的一个参数。

Cache-Control:no-store 不允许缓存

Cache-Control:no-cache 不允许直接使用缓存,需要先发起请求和服务器协商(这个经常被误认为是不允许缓存,实际上它的作用是让浏览器在使用缓存前先请求服务端一次,确认内容是否有更新)

这样的响应代表没有跟服务端进行交互,内容是直接从本地读取的。

Expires和Cache-control: max-age= 有类似的作用,都是指定缓存内容的有效周期,Expires指定的格式是格林威治时间,max-age则是秒数。

服务端也可以在 Response header 里加上 Last-Modified,它的格式是格林威治时间,再次请求时,浏览器的 Request header 中会多出一个叫 If-Modified-Since的值,通过比较这两个值是否一致来决定是否返回304。

ETag的用法和 Last-Modified 类似,值是一种文件指纹。比如:ETag:"5a3ccff0-5dc"。
服务端在 Response header 里加上 ETag,再次请求时,浏览器的 Request header 中会多出一个叫 If-None-Match的值,通过比较这两个值是否一致来决定是否返回304。

总体来说,浏览器使用缓存时有两种表现:
1.直接从本地读取,不与服务端有交互,就是 200 OK (from memory cache)。
2.请求一次服务端,查看本地缓存是否生效,这种方式叫 协商缓存。如果服务端判断缓存有效,将不返回完整内容,而是返回 304 Not Modified。

在优先级上 Pragma > Cache-Control > Expires。