文章目录

• 一、域名解析过程
• 二、建立TCP连接
• 三、http请求
• • 1、HTTP请求和响应格式
  • • 1.1.http请求格式
  • 2、HTTP请求过程
  • • （1） 建立TCP连接
    • （2） Web浏览器向Web服务器发送请求命令
    • （3） Web浏览器发送请求头信息
    • （4） Web服务器应答
    • （5） Web服务器发送应答头信息
    • （6） Web服务器向浏览器发送数据
    • （7） Web服务器关闭TCP连接
• 四、浏览器获取资源和渲染过程

1. 域名解析
2. 发起TCP三次握手建立连接
3. 建立连接后发起http请求
4. 服务器响应请求，浏览器获取html源码
5. 浏览器解析html代码，并请求相关css,js和图片资源
6. 浏览器渲染页面

一、域名解析过程

在浏览器输入一串域名要访问某网站的时候，浏览器帮我们做了如下事情（以Chrome浏览器和windows系统为例）：

1. Chrome浏览器首先检查自己本地是缓存是否有对应的域名，有则直接使用。【查看Chrome浏览器dns缓存地址：chrome://net-internals/#dns】
2. 如果浏览器缓存中没有，则查询系统DNS缓存中的域名表，有则直接使用。【windows查看域名表的命令：ipconfig /displaydns】
3. 系统缓存中还是没有，则检查hosts文件中的映射表。【windows中hosts文件路径：C:\Windows\System32\drivers\etc】
4. 本地实在找不到，则向DNS域名服务器发起请求查询。【DNS服务器IP是本地配置的首选服务器，一般常用的有114.114.114.114（电信运营商提供）和8.8.8.8（Google提供）】

• DNS服务器首先查找自身的缓存，有对应的域名ip则返回结果
• 如果缓存中查找不到，DNS服务器则发起迭代DNS请求，首先向根域服务器发起请求查询，假如本次请求的是www.baidu.com,根域服务器发现这是一个com的顶级域名，就把com域的ip地址返回给DNS服务器
• DNS服务器向com域ip地址发起请求，查询该域名的ip，此时该服务器返回了baidu.com的DNS地址。
• 最后DNS服务器又向baidu.com的DNS地址发起查询请求，最后找到了完整的ip路径返回给DNS服务器，DNS再把ip信息返回给windows内核，内核再返回给浏览器，于是浏览器就知道该域名对应的ip地址了，可以开始进一步请求了。
  　　--------------------------------------------------------------------------------------------------------------------------

DNS请求原理：

每个域名用小数点分隔开变成多级，从右到左等级逐级递减，所以最右边的等级最高，每个域都有用一个域名服务器，管理则下属域名，分布如下图：

所以DNS发送查询请求的时候，先从根服务器获对应顶级域名的ip，然后再逐级从定义域名ip向下查找各个下属域服务的，找到完整的域名ip。这是一个迭代查询的过程。

--------------------------------------------------------------------------------------------------------------------------

　总的来说：域名解析的过程就是一个由近及远的过程，采取就近原则，再自顶向下搜索。

【如果连DNS服务器也没解析成功，那么进行如下步骤：】

5. 操作系统就会查找NetBIOS name Cache（NetBIOS名称缓存，就存在客户端电脑中的），那这个缓存有什么东西呢？凡是最近一段时间内和我成功通讯的计算机的计算机名和Ip地址，就都会存在这个缓存里面。什么情况下该步能解析成功呢？就是该名称正好是几分钟前和我成功通信过，那么这一步就可以成功解析。

6. 如果第⑤步也没有成功，那会查询WINS 服务器（是NETBIOS名称和IP地址对应的服务器）

7. 如果第⑥步也没有查询成功，那么客户端就要进行广播查找

8. 如果第⑦步也没有成功，那么客户端就读取LMHOSTS文件（和HOSTS文件同一个目录下，写法也一样）

如果第八步还没有解析成功，那么就宣告这次解析失败，那就无法跟目标计算机进行通信。只要这八步中有一步可以解析成功，那就可以成功和目标计算机进行通信。

二、建立TCP连接

第一次握手：客户端向服务器发送SYN报文，并发送客户端初始序列号Seq=X；等待服务器确认，

第二次握手：服务器接收客户端的SYN报文，然后向客户端返回一个包SYN+ACK响应报文，并发送初始序列号Seq=Y

第三次握手：客户端接受SYN+ACK报文，并向服务器发送一个ACK确认报文，至此连接建立

【建立连接的最重要目是让连接的双方交换初始序号(ISN, Initial Sequence Number)，所以再响应的ACK报文中会包含序列号递增序列】

三、http请求

1、HTTP请求和响应格式

1.1.http请求格式

http请求格式由四部分组成：请求行、请求头、空行、消息体

　　请求行：是请求消息的第一行，由请求方式（GET/POST/DELETE/PUT）、请求资源路径、http版本号组成

请求头：请求头中的信息有和缓存相关的头（Cache-Control，If-Modified-Since）、客户端身份信息（User-Agent）等等

空行：空行表示消息头的内容到此为止，接下来该解析消息体了，（所以空行必不可少）

消息体：并不是所有的请求都有消息体。

------------------------------------------

http响应格式和请求格式类似，包括：状态行、响应头、空行、消息体

状态行：由http版本号、状态码、状态说明组成

响应头：响应头是服务器传递给客户端用于说明服务器的一些信息，以及将来继续访问该资源时的策略。

空行：空行表示消息头的内容到此为止，接下来该解析消息体了，（所以空行必不可少）

消息体：就是服务器返回的数据信息

2、HTTP请求过程

http请求是在三次握手建立tcp连接后开始进行的，基本流程如下：

（1） 建立TCP连接

在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能，才能进行更层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80

（2） Web浏览器向Web服务器发送请求命令

一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令例如：

（3） Web浏览器发送请求头信息

浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。

（4） Web服务器应答

客户机向服务器发出请求后，服务器会客户机回送应答，HTTP/1.1 200 OK应答的第一部分是协议的版本号和应答状态码

（5） Web服务器发送应答头信息

正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。

（6） Web服务器向浏览器发送数据

Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据

（7） Web服务器关闭TCP连接

一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码Connection:keep-alive，TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

四、浏览器获取资源和渲染过程

1. 用户输入网址（假设是个 HTML 页面，第一次访问，无缓存情况），浏览器向服务器发出HTTP请求，服务器返回 HTML 文件； （善用缓存，减少HTTP请求，减轻服务器压力）

2. 浏览器载入 HTML 代码，发现 内有一个 引用外部 CSS 文件,则浏览器立即发送CSS文件请求，获取浏览器返回的CSS文件； （CSS文件合并，减少HTTP请求）

3. 浏览器继续载入 HTML 中 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了； （CSS文件需要放置最上面，避免网页重新渲染）

4. 浏览器在代码中发现一个 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； （图片文件合并，减少HTTP请求）

5. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码； （最好图片都设置尺寸，避免重新渲染）

6. 浏览器发现了一个包含一行 JavaScript 代码的<script>标签，会立即运行该js代码；（script最好放置页面最下面）

7. js脚本执行了语句，它令浏览器隐藏掉代码中的某个

   ,突然就少了一个元素，浏览器不得不重新渲染这部分代码； （页面初始化样式不要使用js控制）

8. 终于等到了 </html>的到来，浏览器渲染完毕

9. 如果换肤的话，JavaScript 让浏览器换了一下<link>标签的 CSS 路径；

10. 浏览器向服务器请求了新的CSS文件，重新渲染页面。

有了上面的过程所以才会看到一个页面除了主要的请求地址，还多出了许多其他请求，类似的如下图：

参考：
https://www.cnblogs.com/caijh/p/7698819.html （HTTP请求过程-域名解析和TCP三次握手建立链接）