浏览器缓存原理

First paint

直译过来是第一次渲染，也就是浏览器的白屏时间，从白屏到页面有东西为止
一般来说是页面解析完head或者开始解析body
白屏加载的过程：

1. DNS Lookup：浏览器从DNS服务器中查询域名
2. 建立TCP连接
3. 服务端处理响应
4. 客户端下载，解析，渲染整个界面

白屏加载优化：

• DNS解析优化：DNS缓存优化，DNS预加载策略，稳定可靠的DNS服务器
• TCP链路优化
• 服务器端优化
• 浏览器下载，解析，渲染优化：精简HTML和CSS代码结构，避免使用内联JS代码

浏览器构建HTTP请求流程

在浏览器地址栏上输入一串地址以后，浏览器发送HTTP请求的流程：
首先构建HTTP请求行，构建完以后，浏览器准备发送网络请求
在发送网络请求之前，浏览器先会在内存和硬盘上查询是否有要请求的文件，如果查询到有请求的文件，浏览器就会拦截请求，返回该资源的副本，这么做的好处是：

1. 减轻服务器压力，提升性能
2. 加快网站加载速度

准备IP和端口，在发送HTTP请求之前，请求DNS域名系统，返回对应的IP地址，URL没有指定端口的话默认为8080端口
等待TCP队列，Chrome浏览器同时最多只能6个TCP连接
建立TCP连接，发送HTTP请求，首先发送请求，请求行内容包括，请求方法，请求URI，HTTP版本协议，发送请求行以后，还要发送请求头

服务端处理HTTP请求流程：
首先服务器先发送响应行，包括协议版本和状态码，在发送响应头
断开连接，一般来说发送完响应就会断开TCP连接，如果在头信息中加入

Connection: keep-Alive

就能保持连接，可以省去下一次请求的时间和资源，提高性能，提升资源加载速度
重定向

两种缓存模式

浏览器每次请求之前会查询请求结果以及缓存标识，如果没有缓存标识，就向服务器请求资源，请求完都会被请求结果和缓存标识放到浏览器缓存中
一、强制缓存
强制缓存就是在浏览器缓存中查询请求结果，并且根据结果的缓存规则来决定是否使用缓存结果，主要是两个字段，Expires和Cache-Control，Cache-Control的优先级更高

在HTTP1.0使用Expires强制缓存，Expires的值为缓存有效时间，在HTTP1.1以后使用Cache-Control代替了它，Expires的原理是比较客户端时间和服务端返回的时间，但是但凡有一端的时间不对，就导致Expires不准确

Cache-Control的控制规则比较多

指令	作用
public	所有内容都缓存，包括客户端和代理服务器端
no-store	默认不缓存，直接请求服务器
no-cache	只有客户端内容缓存, 采用协商缓存
private	只有客户端内容缓存
max-age=xx	缓存有效时间

缓存存储的位置：内存，硬盘
一般Js，图片，字体等常用文件就会存放在内存中，提高访问效率
CSS文件一般存在硬盘中

缓存验证：
LastModified文件最后修改的时间，服务器端返回的时候会把文件修改时间加上
Etag通过数字签名验证是否过期

二、协商缓存
协商缓存是强制缓存失效以后的缓存方式，访问浏览器缓存失败，返回缓存标识符给客户端，客户端携带缓存表示符发起HTTP请求，主要有以下两种情况：

1. 返回304状态码，资源未更新

2. 返回200状态码，资源已经更新
   把缓存标识和请求结果存放到浏览器缓存中

if-Modified-Since：文件最后修改的时间，服务器返回了Last-Modified以后，客户端携带这个时间告诉服务端文件上次更新的时间，如果这个时间比服务器端的文件最后更新时间要早，那么就会返回200，更新资源，反之返回304，代表可以使用缓存文件

if-None-Match：客户端发送请求的时候，带上上一次服务端返回的Etag，