# url解析

# 地址解析

分析出用什么协议,并表示是什么。主机端口号是什么?

# 编码

encodeURI 对整个url进行编码:处理空格/中文...

encodeURIComponent 主要对传递的参数信息进行编码

escape 因为不是所有后端语言都支持unescape进行解码的

# 缓存检查

先检查是否存在强缓存,如果存在强缓存且缓存没有失效就走强缓存。如果没有存在强缓存或者强缓存已经失效,这个时候就要检查是否存在协商缓存。如果存在协商缓存就走协商缓存,如果没有存在协商缓存,那就去服务器获取最新数据。

缓存位置:

  • memory cache 内存缓存
  • disk cache 硬盘缓存

打开网页:查找disco开始中是否有匹配。如果有则使用如果没有则发送网络请求。

普通刷新因为太不没有关闭,因此memory cat是可用的。会被优先使用,其次才是disco开始。

强制刷新:浏览器不使用缓存,因此发送的请求头部均带有cache-control:no-cache,服务器直接返回200和最新内容。

# 强缓存

浏览器对于缓存的处理根据第一次请求资源时返回的响应头来确定的

Expires:缓存过期时间,用来指定资源到期的时间。(HTTP/1.0)

cache-control:cache-control:max-age=2592000,第一次拿到资源后的2592000内再次发送请求,读取缓存中的信息。(HTTP/1.1)

两者同时存在的话,cache-control的优先级高于Expires。

解决办法:

  1. 服务器更新资源后,让资源名称和之前不一样
  2. 当文件更新后,我们在html导入的时候可以加一个后缀
<script src="./index.js?12345"></script>
  1. 不使用强缓存

# 协商缓存

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

第一次向服务器发送请求强缓存和协商缓存都没有,向服务器发送请求时,不会传递任何标识,服务器收到请求后会将内容和last modified和etag值返回给客户端。客户端拿到信息后渲染,并把相应的信息和标识缓存到本地。第二次向服务器发送请求时会携带两个参数给服务器,服务器根据标识判断文件是否更新。如果文件没有更新,则返回304通知客户端读取缓存信息。如果服务器内容更新过,则返回200及最新资源信息,服务器还会将最新的last modified和etag值返回给客户端。当304时客户端从本地缓存中读取内容进行渲染。如果是200则直接渲染,并且把最新的结果和标识缓存到本地。

响应头带的

last-modified:资源文件最后更新的标识

etag:记录的是一个标识,根据资源文件生成的,每次资源文件更新后都会重新生成一个新的etag

请求头带的

if-none-match: Etag值

if-modified-since: last-modified的值

强缓存和协商缓存针对于我们的静态资源文件,而且是不经常更新的。

# 数据存储

vuex、redux、localstorage等

# DNS解析

递归查询

迭代查询

每一次DNS解析花费的时间预计在20~120毫秒,这里我们可以做优化:

  • 减少DNS请求次数
  • DNS预解析

服务器拆分的优势:资源的合理利用;抗压能力增强;提高HTTP并发。。。

# TCP三次握手

TCP三次握手的目的就是为了在客户端和服务器端建立连接通道。

seq序号:用来标识从TCP端向目的地端发送的字节流,发起方发送数据时对此进行标记

ack确认序号:只有act标志位为1时,确认序号字段才有效,ack = seq + 1

标志位:

ACK:确认序号

RST:重置连接

SYN:发起一个新连接

FIN:释放一个连接

为什么是三次握手而不是两次或四次呢?

如果是两次握手的话服务器无法知道客户端是否正确收到数据,有可能客户端并没有收到服务端发送的信息,这个时候通道是建立失败的。

TCP作为一种可靠传输控制协议,其核心思想:既要保证数据可靠传输,又要提高传输的效率。

# 数据传输

客户端和服务器建立好连接通道后,客户端把数据传递给服务器。

# TCP四次挥手

四次挥手是因为要及时反馈

# 页面渲染

是不是每次发送请求都需要执行TCP的三次握手和四次挥手呢?

在http1.0是这样的

connection: keep-alive 保证TCP通道建立后可以不关闭,在http1.0里需要手动设置,但是在http1.1里默认打开