前端面试过程中经常会出现这道题目“浏览器输入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阻塞问题。