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
You need to sign in or sign up before continuing.
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
Hide 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