浏览器地址输入url到显示页面的步骤（HTTP）

大致步骤：

  1. DNS解析 （浏览器缓存->系统缓存->host文件查找->路由器缓存->ISP DNS缓存->从根域名服务器递归搜索）
  2. 建立TCP连接 （TCP三次握手）
  3. 浏览器向服务器发送HTTP请求
  4. 服务器返回结果给浏览器
  5. 浏览器渲染页面 （解析HTML，构建DOM树；解析CSS，构建CSSOM树；合并构建渲染树；layout/painting）
  6. 断开TCP连接 （TCP四次挥手）

DNS

什么是DNS

域名系统（英文：Domain Name System，缩写：DNS）是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS使用TCP和UDP端口53。当前，对于每一级域名长度的限制是63个字符，域名总长度则不能超过253个字符。 –维基百科

域名解析逐级查询：

  1. 浏览器缓存：首先会向浏览器缓存中获取上一次访问的记录。
  2. 操作系统缓存：查找存储在操作系统运行内存中的缓存。
  3. 在host文件中查找：读取系统中预设的host文件中的设置。
  4. 路由器缓存：有些路由器也有DNS缓存功能，访问过的域名会存在路由器上。
  5. ISP DNS缓存：互联网服务提供商（如中国电信）也会提供DNS服务，比如比较著名的 114.114.114.114，在本地查找不到的情况下，就会向ISP进行查询，ISP会在当前服务器的缓存内查找是否有记录，如果有，则返回这个IP，若没有，则会开始向根域名服务器请求查询。
  6. 顶级DNS服务区/根DNS服务器：根域名收到请求后，会判别这个域名(.com)是授权给哪台服务器管理,并返回这个顶级DNS服务器的IP。请求者收到这台顶级DNS的服务器IP后，会向该服务器发起查询，如果该服务器无法解析，该服务器就会返回下一级的DNS服务器IP（nicefilm.com），本机继续查找，直到服务器找到(www.nicefilm.com)的主机。

TCP

拿到了要请求的IP地址后，浏览器通过操作系统的Socket与服务器进行TCP连接，即三次握手。

TCP连接三次握手

本机主动打开连接：

  • 本机将标识位SYN设置为1，seq(Sequence number) = x (TCP规定SYN = 1时不能携带信息，x为随机产生的一个值)，然后将状态设为SYN_SEND
  • 服务器受到SYN报文进行确认，将SYN标识位设为1，ACK设为1，seq = y，ack(Acknowledgement Number) = x + 1，然后进入SYN_RECV状态，这个状态被称为半连接状态。
  • 客户端再进行一次确认，将ACK置为1(此时不用SYN)，seq = x + 1，ack = y + 1，最后客户端和服务器都进入ESTABLISHED状态。

三次握手分别是 SYN、ACK/SYN、ACK

HTTP请求与响应

超文本传输协议 （英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识。 –wiki

在应用层，浏览器会分析这个url，并设置好请求报文发出。请求报文中包括请求行、请求头、空行、请求主体。

  • 请求行：请求行中包括请求的方法，路径和协议版本。
  • 请求头：请求头中包含了请求的一些附加的信息，一般是以键值的形式成对存在，比如设置请求文件的类型accept-type，以及服务器对缓存的设置。
  • 空行：协议中规定请求头和请求主体间必须用一个空行隔开。
  • 请求主体：对于post请求，所需要的参数放在请求主体中。

服务器在收到请求后会根据url匹配到的路径做相应的处理，最后返回浏览器所需要的页面资源。浏览器会收到一个响应报文，包括响应行、响应头、空行、报文主体。

  • 响应行：同样包含了协议版本，还包含了状态码和状态码的原因短语。
  • 响应头：与请求头的格式一致，但各自有不同的首部。
  • 空行
  • 报文主体：请求所需要的资源。

页面呈现

至此浏览器已经拿到了一个HTML文档，并开始解析。

  • 通过HTML解析器解析HTML文档，构建一个DOM Tree，同时通过CSS解析器解析HTML中存在的CSS，构建Style Rules，两者结合形成一个Attachment。
  • 通过Attachment构造一个呈现树（Render Tree）。
  • Render Tree构建完毕，进入到布局阶段（layout/reflow），将为每个阶段分配一个应出现在屏幕上的确切坐标。
  • 最后将全部的节点遍历绘制出来后，一个页面就展现出来了。

连接关闭

现在的页面为了优化请求的耗时，默认都会开启持久连接（keep-alive），那么当tab标签页关闭时，才会确切关闭TCP连接。关闭过程即四次挥手。

TCP断开连接四次挥手

关闭是一个全双工的过程，发包的顺序不一定。一般是客户端主动发起的关闭。

假设最后一次客户端发出的数据seq = x，ack = y;

  1. 客户端发送一个报文给服务端，其中FIN设置为1，seq = x + 1，此时客户端的状态为FIN_WAIT_1。
  2. 服务端受到包后，状态转换为CLOSE_WAIT，发送一个ACK = 1，ack = x + 2的包。客户端收到包后将状态切换为FIN_WAIT_2。
  3. 服务器处理完任务后，向客户端发送一个FIN包，seq = y；同时将自己的状态置为LAST_ACK。
  4. 客户端收到包后将状态切换为TIME_WAIT，并向服务端发送ACK包，ack = y + 1，等待2MSL后关闭连接。