项目优化 - 技术栈

浏览器缓存：

减少服务器端请求和压力，提升用户体验

什么是浏览器缓存

当我们访问一个网站时，会加载各种资源，如 HTML文档、JS、CSS、图片等。浏览器会将一些不经常变的资源保存在本地，这样下次访问相同网站时，就直接从本地加载资源，并不通过请求服务器，这就是浏览器缓存。这样做的好处有：

减少冗余的数据传输，
减轻服务器负担，提升性能
获取资源的耗时减少，页面加载速度得到提升。

浏览器混存简单来说就是在浏览器即本地保存请求资源的副本，在下次请求的时不经过服务器而直接返回的资源的技术。

强缓存

浏览器缓存分为强缓存和协商缓存两种方式，强缓存不需要发送网络请求，强制使用本地缓存；协商缓存需要发送网络请求，根据服务端响应来决定是否使用本地缓存。

浏览器访问网站时，首先会检查强缓存，如果缓存资源未过期则直接使用本地缓存。那么如何判断缓存资源是否过期呢，答案是根据服务器响应请求时设置的如下两个响应头：

Expires：过期时间
Cache-Control：相比于请求时间的有效期

其中，Expire属于Http1.0的请求头，而Cache-Control是Http1.1中新增的。

第一次访问页面，浏览器会根据服务器返回的 response Header 来判断是否对资源进行缓存，如果响应头中有 cache-control 或 expires 字段，代表该资源是强缓存

Expires

是HTTP1.0控制网页缓存的字段，值为一个时间戳，服务器返回该资源缓存的到期时间。但 Expires 有个缺点，就是它判断是否过期是用本地时间来判断的，本地时间是可以自己修改的。到了HTTP/1.1，Expire 已经被 Cache-Control 替代，Cache-Control 使用了max-age相对时间，解决了Expires 的缺陷

注意：当 Cache-Control 与 expires 两者都存在时，Cache-Control 优先级更高
Expires的作用就是告知浏览器缓存资源在过期时间之前都有效，可以直接使用，无需发送网络请求，Expires响应头示例：Expires：Tue，28 Jan 2023 12:59:00 GMT表示缓存资源在GMT2023年1月28日12时59分过期，过期后需要重新发送网络请求。

如果Expires设置为无效时间如0，则代表该缓存资源已经过期即不使用缓存，但是设置Expires过期时间有一个问题，即当浏览器时间跟服务器时间不一致时，那么字段中的过期时间可能不准确。因此，http1.1中引入了Cache-Control以替代Expires。

Cache-Control

是 HTTP1.1 中控制网页缓存的字段，主要取值为

public：资源客户端和服务器都可以缓存
privite：资源只有客户端可以缓存
no-cache：客户端缓存资源，但是是否缓存需要经过协商缓存来验证
no-store：不使用缓存
max-age：缓存保质期，是相对时间

上图中，HTTP 响应头中 Cache-Control 为 max-age = 31536000，意思是说在 31536000 秒后该资源过期，如果未超过过期时间，浏览器会直接使用缓存结果，强制缓存生效 Cache-Control: no-cache 和 no-store的区别：

Cache-Control: no-cache：这个很容易让人产生误解，误以为是响应不被缓存

实际上Cache-Control: no-cache 是会被缓存的，是协商缓存的标识，只不过每次都会向服务器发起请求，来验证当前缓存的有效性

Cache-Control: no-store：这个才是响应不被缓存的意思

memory cache 与 disk cache 的区别？

两者都属于强缓存，主要区别在于存储位置和读取速度上

1）memory cache 表示缓存来自内存， disk cache 表示缓存来自硬盘

2）memory cache 要比 disk cache 快的多！从磁盘访问可能需要5-20毫秒，而内存访问只需要100纳秒甚至更快

memory cache 特点：
当前tab页关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，原来的 memory cache 会变成 disk cache
disk cache 特点：
关闭tab页甚至关闭浏览器后，数据依然存在，下次打开仍然会是 from disk cache

① 第一次打开掘金主页并刷新：缓存来自 memory cache 和 disk cache

② 关闭页面再打开时：所有的缓存都来自 disk cache

一般情况下，浏览器会将js和图片等文件解析执行后直接存入内存中，这样当刷新页面时，只需直接从内存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)

协商缓存

协商缓存的主要流程是：

浏览器在请求头中设置响应的字段。
服务器根据请求头判断是够使用缓存，并返回判断结果
浏览器根据服务器响应结果决定是否使用缓存。

协商缓存的常用请求头如下：

Last-Modified：资源最后修改时间
ETag：资源唯一标识符。

浏览器携带缓存标识向服务器发送请求，服务器根据缓存标识来决定该资源是否过期，一般用于html资源，验证版本是否更新
触发条件：

Cache-Control 的值为 no-cache （协商缓存）

或者 Cache-Control: max-age=0

Last-Modified

Last-Modified：即服务器上资源最后修改的时间，从服务器 Response Headers 上获取

Last-Modified 的验证流程：

浏览器首次发送网络请求时，服务器会在响应头中添加 **Last-Modified **字段
浏览器接收到此字段后，会在后续请求时在请求头中添加If-Modified-Since 字段，此字段的值就是 Last-Modified的值，即资源最后做出修改的时间。
当服务器接收到请求头中的If-Modified-Since字段后，会和服务器中资源的最后修改时间进行比较：如果请求头中的字段值早于服务器中资源的最后修改时间，表示缓存资源需要更新，即返回服务器中的资源；否则返回状态码304，通知浏览器之内使用缓存资源。

服务器根据 if-modified-since 的值，与该资源在服务器最后被修改时间做对比，若服务器上的时间大于 Last-Modified 的值，则重新返回资源，返回200，表示资源已更新；反之则返回304，代表资源未更新，可继续使用缓存
请求的 Request Headers 上携带 if-modified-since 字段：

Etag

ETag：当前资源文件的一个唯一标识(由服务器生成)，若文件内容发生变化该值就会改变

ETag是服务器给文件生成的唯一标识，通常使用内容的散列、最后修改时间戳的Hash值或简单的使用版本号。只要文件发生修改，ETag的值就会相应的改变，

ETag 的验证流程：

与Last-Modified类似，浏览器第首次发送网络请求时，服务器会通过响应头通知浏览器 etag 字段的值。
浏览器接收到该字段后，在后续请求时会在请求头中添加If-None-Match字段，此字段的值就是ETag的值，即服务器资源的唯一标识。
当服务器收到请求头中的 If-None-Match 字段后，与该资源在服务器的Etag值做对比，若值发生变化，状态码为200，表示资源已更新，返回新的资源；反之则返回304，代表资源无更新，可继续使用缓存。

为什么要有 Etag ？

Etag 的出现主要是为了解决一些 Last-Modified 难处理的问题：

1）一些文件也许会周期性的更改，但是内容并不改变(仅仅改变的修改时间)，这时候并不希望客户端认为这个文件被修改了而重新去请求；

2）某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说 1s 内修改了 N 次)，If-Modified-Since 能检查到的粒度是秒级的，使用 Etag 就能够保证这种需求下客户端在 1 秒内能刷新 N 次 cache

注意：Etag 优先级高于 Last-Modified，若 Etag 与 Last-Modified 两者同时存在，服务器优先校验 Etag

协商缓存的两种状态

服务器根据请求头携带的缓存标识，判断该资源是否变化，资源未变化返回304，反之返回200

1）资源未变化，返回304

2）资源已更新，返回200

前端常用的缓存方案

强缓存与协商缓存相结合的方案

1）HTML 文档配置协商缓存；

2）JS、CSS、图片等资源配置强缓存

此方案的好处：当项目版本更新时，可以获取最新的页面；若版本未变化，可继续复用之前的缓存资源；既很好利用了浏览器缓存，又解决了页面版本更新的问题

浏览器的缓存流程

CDN

CDN的全称是Content Delivery Network，即内容分发网络。由于CDN是为加快网络访问速度而被优化的网络覆盖层，因此被形象地称为"网络加速器"。

CDN可以加快用户访问网络资源的速度和稳定性，减轻源服务器的访问压力。

CDN简介

主要思路： 尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

实现方法： 通过在网络各处放置节点服务器 所构成的在现有的互联网基础之上的一层智能虚拟网络 ，CDN系统能够实时地根据网络流量和各节点的连接和负载 状况以及到用户的距离和响应时间 等综合信息将用户的请求重新导向离用户最近的服务节点上，加快访问速度。

目的： 使用户可就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。

优势：

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

工作过程

在没使用cdn之前，传统的网站请求过程如下：

用户在自己的浏览器中输入要访问的网站域名。
浏览器向本地DNS服务器请求对该域名的解析。
本地DNS服务器中如果缓存有这个域名的解析结果，则直接响应用户的解析请求。
本地DNS服务器中如果没有关于这个域名的解析结果的缓存，则以递归方式向整个DNS系统请求解析，获得应答后将结果反馈给浏览器。
浏览器得到域名解析结果，就是该域名相应的服务设备的 IP地址。
浏览器向服务器请求内容。
服务器将用户请求内容传送给浏览器。

当使用了CDN时，DNS 服务器根据用户 IP 地址，将域名解析成相应节点的缓存服务器IP地址，实现用户就近访问。使用 CDN 服务的网站，只需将其域名解析权交给 CDN 的全局负载均衡（GSLB）设备，将需要分发的内容注入 CDN，就可以实现内容加速了。

当用户点击网站页面上的内容URL，经过本地 DNS系统解析，DNS 系统会最终将域名的解析权交给 CNAME 指向的 CDN 专用 DNS 服务器。
CDN 的 DNS 服务器将 CDN 的全局负载均衡设备 IP 地址返回用户。
用户向 CDN 的全局负载均衡设备发起内容 URL 访问请求。
CDN 全局负载均衡设备根据用户 IP 地址，以及用户请求的内容URL，选择一台用户所属区域的区域负载均衡设备，告诉用户向这台设备发起请求。
基于以下这些条件的综合分析之后，区域负载均衡设备会向全局负载均衡设备返回一台缓存服务器的IP地址：
- 根据用户 IP 地址，判断哪一台服务器距用户最近；
- 根据用户所请求的 URL 中携带的内容名称，判断哪一台服务器上有用户所需内容；
- 查询各个服务器当前的负载情况，判断哪一台服务器尚有服务能力。
全局负载均衡设备把服务器的 IP 地址返回给用户。
用户向缓存服务器发起请求，缓存服务器响应用户请求，将用户所需内容传送到用户终端。如果这台缓存服务器上并没有用户想要的内容，而区域均衡设备依然将它分配给了用户，那么这台服务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉到本地。

系统组成

CDN主要由中心节点和边缘节点两部分构成

中心节点：包括CDN网管中心和全局负载均衡DNS重定向解析系统，负责整个CDN网络的分支和管理。
边缘节点：主要指分发节点，由负载均衡设备和高速缓存服务器两部分组成。负载均衡设备负责每个节点中各个高速缓存服务器的负载均衡，保证节点的公族效率；高速缓存服务器负责存储网站的大量资源。通过全局负载均衡设备的控制，用户的请求被指向离其最近的节点。节点中的缓存服务器响应请求。因为其距离用户较近，所以响应时间很快。