Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
yifu-study-front-share
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
CI / CD
CI / CD
Pipelines
Schedules
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
yifu-study
front
yifu-study-front-share
Commits
dc4a659a
Commit
dc4a659a
authored
Nov 08, 2023
by
刘磊
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:刘磊10月分享
parent
2b543f59
Pipeline
#18950
failed with stage
Changes
1
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
89 additions
and
0 deletions
+89
-0
前端分享----浏览器缓存 (1).md
source/_posts/前端分享----浏览器缓存 (1).md
+89
-0
No files found.
source/_posts/前端分享----浏览器缓存 (1).md
0 → 100644
View file @
dc4a659a
### 前言
作为一个前端开发者,每天都在和浏览器打交道,对于浏览器缓存,相信都不会陌生,同时它也是我们日常开发中存在的一个非常重要的优化手段,无论在节省带宽、提高加载和渲染速度、减少网络阻塞,以及提高用户体验上,都有重要的作用。
### 为什么需要缓存?
-
减少用户等待时间,提升用户体验,直接从内存或磁盘中取缓存数据肯定是比从服务器请求更快的。
-
减少了冗余的数据传输。
-
减少服务器的负担,大大提升了网站性能。
### 缓存读写顺序


备注:
**memory cache**
==>浏览器本地缓存
**disk cache**
=> 硬盘缓存
1.
先在 浏览器缓存 中查找,如果有,直接加载。
2.
如果 浏览器缓存 中不存在,则在 硬盘 中查找,这里又细分:
1)如果有强缓存且未失效,则使用强缓存,不请求服务器。
2)如果有强缓存但已失效,使用协商缓存,比较后确定 304 还是 200;
3.
如果硬盘中也不存在,向服务器发起网络请求
4.
如果硬盘中也不存在,向服务器发起网络请求
***
下面将从
** 缓存位置**
和
**缓存策略**
两个角度介绍浏览器缓存。
### 缓存位置
**memory cache(浏览器本地缓存)**
是浏览器内存中的缓存,相比于 disk cache 它的特点是读取速度快,但容量小,且时效性短;不受开发者控制,也不受HTTP协议头的约束。一旦浏览器 tab 页关闭,memory cache 就将被清空,再次重新打开相同页面时不再出现from memory cache的情况。
**disk cache(硬盘缓存)重点**
硬盘缓存取决于HTTP中的响应头信息,它也是浏览器缓存中最重要的内容。因为DNS缓存它主要是做一个ip地址查找并且是自主完成的,memory cache 也是不受控制,算是一个黑盒。所以剩下的可以受我们控制的硬盘缓存的重要性就不言而喻了,大多优化手段也是针对硬盘缓存。
根据 HTTP 响应头的各类字段进行判定资源的缓存规则,比如是否可以缓存,什么时候过期,过期之后是否需要重新发起请求呢?相比于 memory cache 的 disk cache 拥有存储空间时间长等优点。
### 缓存策略 - 强缓存和协商缓存

origin_url=7e63bfa1490c0013bbac3b012a832e50.png&pos_id=img-8561M81x-1699411348306)
根据 HTTP header 的字段将缓存分为两个部分,分别是
**强缓存**
和
**协商缓存**
。
**强缓存:**
使用强缓存策略时,如果缓存资源在过期时间内,是的话直接从本地缓存中读取资源,不与服务器进行通信。
**协商缓存:**
如果强缓存失效后,客户端将向服务器发出请求,进行协商缓存。浏览器携带上一次请求返回的响应头中的 缓存标识 向服务器发起请求(如ETag、Last-Modified等),由服务器判断资源是否更新。如果资源没有更新,则返回状态码 304 Not Modified,告诉浏览器可以使用本地缓存;否则返回新的资源内容。强缓存优先级高于协商缓存,但是协商缓存可以更加灵活地控制缓存的有效性。
#### 强缓存
**强缓存**
的字段有:
**Expires **
和 Cac
**he-Control**
。协商缓存的字段有:
**Last**
-
**Modified **
和
**ETag**
。
当
**Expires **
和
**Cache-Control **
都被设置的时候,浏览器会优先考虑后者。
当
**Last-Modified**
和
**ETag**
都被设置的时候,浏览器会优先考虑后者。
当强缓存失效的时候,则会进入到协商缓存阶段。
#### 协商缓存
一旦发现强缓存无效,浏览器会发送一个请求到服务器,服务器根据请求header中的部分信息来判断资源是否更新。如果没有更新,返回304重定向,告诉浏览器资源未更新,可继续使用本地的缓存;否则返回 状态码200 和 新的资源内容,浏览器缓存新的内容。
**Last-Modify / If-Modify-Since**
浏览器第一次请求一个资源的时候,服务器返回的 header 中会加上 Last-Modify,Last-Modify是一个时间标识该资源的最后修改时间。
当浏览器再次请求该资源时,请求头中会包含 If-Modify-Since,该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后,根据资源的最后修改时间判断资源是否更新。
资源未更新,返回
**304**
重定向,表示资源未更新可以继续使用缓存中的资源。
资源更新,返回200状态码,返回新的资源,并进行硬盘和浏览器缓存。
缺点:如果资源更新的速度是小于 1 秒的,那么该字段将失效,因为 Last-Modified 时间是精确到秒的。所以有了 ETag。
**ETag / If-None-Match**
与 Last-Modify/If-Modify-Since 不同的是,Etag/If-None-Match 返回的是一个校验码。ETag 可以保证每一个资源是唯一的,资源变化都会导致 ETag 变化。服务器根据浏览器上发送的 If-None-Match 值来判断是否缓存。
与 Last-Modified 不一样的是,当服务器返回 304 Not Modified 的响应时,由于 ETag 重新生成过,response header 中还会把这个 ETag 返回,即使这个 ETag 跟之前的没有变化。
<br/>
```
javascript
Cache
-
Control
:
max
-
age
=
3600
// 我希望你把这个资源缓存起来,缓存时间是3600秒(1小时)
Expires
:
Mon
Oct
17
2023
16
:
10
:
32
GMT
// 到达指定时间过期
Date
:
Mon
Oct
16
2023
13
:
30
:
30
GMT
Etag
:
W
/
"121-171ca289ebf"
,
// (后面协商缓存内容)这个资源的编号是W/"121-171ca289ebf"
Last
-
Modified
:
Mon
Oct
16
2023
09
:
20
:
10
GMT
,
// (后面协商缓存内容)这个资源的上一次修改时间
```
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment