浏览器工作原理（4）-HTTP协议，缓存机制

最新推荐文章于 2022-11-25 23:11:53 发布

xxz15152

最新推荐文章于 2022-11-25 23:11:53 发布

阅读量282

点赞数

文章标签： http 网络 chrome

本文链接：https://blog.csdn.net/u013448372/article/details/107308618

版权

本次内容主要是http请求流程，浏览器的缓存机制

HTTP是一种允许浏览器向服务器获取资源的协议

先抛出两个问题：

第一次访问一个站点会很慢，第二次访问时，速度就快了
登录一个网站之后，再次打开，直接处于登录状态，如何实现？

这些秘密都存在http的请求过程中

浏览器端发起HTTP请求流程

如果在浏览器地址栏输入 https://time.geekbang.org/index.html, 接下来浏览器会完成哪些动作呢？

1. 构建请求

浏览器构建请求行信息，构建好之后，准备发起网络请求

GET /index.html HTTP1.1

2. 查找缓存

在真正发起请求之前，浏览器会先查看缓存中是否有要请求的文件，如果发现缓存中存在，则会直接拦截请求，返回缓存中的副本，请求结束，而不会去服务器重新下载，这样的话有以下几点好处：

缓解服务器压力，提升性能
加载资源更加快速

如果缓存中没有找到资源，则就会从服务器上获取了

3. 准备IP地址和端口

HTTP和TCP的关系：浏览器是以HTTP协议作为应用层协议，用来封装请求的文本信息，然后使用TCP/IP作为传输层协议发送到网络上，在http工作之前，浏览器需要通过TCP与服务器建立连接，HTTP的内容是通过TCP的传输数据阶段来完成的。

TCP和HTTP的关系示意图 HTTP请求的第一步是先建立TCP连接，建立TCP连接的第一步是要有IP地址和端口号，想要获取这些数据，只能从URL入手
DNS也成为域名系统，Domain Name System负责把域名解析成IP地址，HTTP协议的默认端口为80

4. 等待TCP队列

Chrome对同一域名最多只能建立6个TCP连接，多余的请求会排队等待，直到正在进行中的请求完成

5. 建立TCP连接

上一小节介绍了建立TCP连接的过程，这里不再赘述

6. 发送HTTP请求

TCP建立之后，浏览器就可以跟服务器进行通信了，HTTP中的数据在TCP数据传输的阶段来完成。

首先浏览器会向服务器发送请求行，包含请求方法，请求URL，HTTP版本信息等

使用POST方式向服务器发送数据是以请求体来发送

浏览器发送请求行之后，还要以请求头的形式发送浏览器的其他信息，如操作系统，浏览器内核，域名信息，浏览器的Cookie等信息

服务器端处理 HTTP 请求流程

经历了一系列的封装，传输，现在请求终于到达了后端服务器，然后服务器会根据请求来返回对应的资源，这个过程分为以下几步：

返回请求
服务器返回的内容包括响应行，响应头，响应体

响应行：包含协议版本，状态码
响应头：包含服务器生成返回数据的时间、数据类型、Cookie等
响应体：包含客户端请求的数据或者htm文件等
断开连接
正常情况，返回请求数据之后，就要断开连接了，但是如果请求头或者响应头信息了包含了Connection:Keep-Alive 字段，则不会断开连接，浏览器会通过同一个TCP连接发送请求，保持TCP连接有助于提升资源的加载速度
重定向
重定向是只服务器自动跳转至某个网址，返回状态码为301，location为重定向的地址

总结

1、第二次打开一个网址，为什么比第一次快？

从上面的分析过程中发现，浏览器会自动缓存数据，其中包含DNS缓存，页面资源缓存，下面分析一下资源缓存的处理情况：
在这里插入图片描述
从图上可以看出，浏览器第一次请求时，服务器返回响应头给浏览器，浏览器通过响应头中的cache-control字段来设置最大缓存时长，时间为秒

cache-control:max-age=2000

这个参数的意思的是，如果在2000秒之内请求资源，则会返回浏览器缓存中的内容

如果在缓存期之外进行请求，浏览器会向服务器发起请求，并在请求头中加入if-none-match字段

if-none-match:"4f80f-13c-3a1xb12a"

服务器收到if-none-match字段，来判断请求的资源是否有更新

如果没有更新，则返回304状态码和not-modified字段，意味着浏览器的缓存可以继续使用
如果更新了，则会返回新的资源

2、登录状态怎么保持？

首次登录时，使用post的方式将用户名密码传送给服务器
服务器检查后台，验证用户是否正确，正确的话则会生成一段表示用户身份的字符串，将字符串写到响应头的set-cookie中

Set-Cookie: SERVERID=3431a294a18c59fc8f5805662e2bd51e|159465212|159455169;Path=/

浏览器收到服务器传来的Set-Cookie字段，会缓存至本地

用户再次访问时，浏览器发起HTTP请求之前，先读取本地的cookie数据，并把数据写进请求头，发送给服务器

Cookie: SERVERID=3431a294a18c59fc8f5805662e2bd51e|159465212|159455169;Path=/

服务器收到HTTP请求头之后，先查找请求头里的Cookie字段，查询后台，如果有对应的信息，则表示已登录，生成用户信息并返回至浏览器页面
浏览器收到后端信息，自动登录并展示用户信息及相关内容