前端面试过程中经常会出现这道题目“浏览器输入URL到用户看到网页，中间都发生了什么”，以前就踩过这个坑，最近公司出了问题，准备跳槽了，就来回忆下这道题目，先上一张图片。

浏览器请求过程

看了这张图片之后，我将整个过程分为以下六步：

1. DNS域名解析

• 在浏览器DNS缓存中搜索
• 在操作系统DNS缓存中搜索
• 读取系统hosts文件，查找其中是否有对应的ip
• 向本地配置的首选DNS服务器发起域名解析请求

2. 建立TCP连接

TCP三次握手的过程（前端面试经常被问到）：
了解三次握手之前，我们首先要知道TCP报文的基本格式如下图：

TCP报文格式

从图中我们可以看到TCP报文分为首部和数据两部分。数据部分又由IP首部和IP数据报的数据部分组成。当我们建立TCP连接时，TCP报文的数据部分是没有的，所以我们只用关心TCP首部即可。

TCP首都由20字节的固定首部和选项及填充部分组成，在这里我们只用关心固定首部即可。固定首部的组成如下：

• 源端口-2字节
• 目的端口-2字节
• 序号-4字节
• 确认号-4字节
• 数据偏移-4bit
• 保留-6bit
• URG-1bit
• ACK-1bit
• PSH-1bit
• RST-1bit
• SYN-1bit
• FIN-1bit
• 窗口-2字节
• 检验和-2字节
• 紧急指针-2字节

在建立TCP连接的过程中我们要关注的字段如下：

• ACK：TCP协议规定，只有ACK=1时有效，也规定连接建立后所有发送的报文的ACK必须为1
• SYN：在连接建立时用来同步序号。当SYN=1而ACK=0时，表明这是一个连接请求报文，对方若同意建立连接，则应在响应报文中让SYN=1和ACK=1。因此，SYN为1表明这是一个连接请求报文或连接接受报文。
• FIN：完结的意思，用来释放一个连接。当FIN=1时，表明此报文的发送方的数据已经发送完毕，并要求释放连接。
• 序号：首部中的序号指的是本报文段所发送的数据的第一个字节的序号，记住是报文段数据部分第一个字节的序号，不含首部。

说完了基本信息，下面让我们看一张图：

三次握手

一次握手：客户端发出请求连接报文即SYN=1、ACK=0、序号=x
二次握手：服务端收到请求连接报文进行回复确认，发送接受连接报文即SYN=1、ACK=1、序号=y、ack=x+1
三次握手：客户端收到服务端的回复确认报文，再一次进行确认但此时不用SYN=1，这时ACK=1、序号=x+1 、ack=y+1

讲到这里我们不禁想问为什么要进行三次握手，两次确认，第三次握手确认有必要吗？
这主要是防止已失效的连接请求突然又传到了服务端，产生不必要的资源浪费，具体情况请自行脑补。

3. 发起HTTP请求

HTTP请求方法：

• GET：获取服务器数据
• POST：传输数据
• HEAD：获取报文首部
• PUT ：传输文件
• DELETE：删除文件
• OPTIONS：询问支持的方法
• TRACE：追踪路径

HTTP请求报文格式：

HTTP请求报文.png

4. 接收响应结果

HTTP状态码
HTTP响应报文格式：

HTTP响应报文.png

5. 浏览器解析HTML

浏览器从上到下解析HTML文件，构建DOM树，遇到外部的CSS和JS文件时，则向服务器发起请求下载 资源，如果是下载CSS文件，则解析器会在下载的同时继续解析后面的HTML来构建DOM树，如果是再下载JS文件和执行它时，解析器会停止对HTML解析，这便出现了JS阻塞问题。

6. 浏览器布局渲染