从输入url到页面渲染到底经历了什么？

想知道从输入url到页面渲染到底经历了什么？就必须要知道浏览器的工作原理。

下面我先用一个流程图简单的说一下从导航中输入url到页面渲染的几个重要步骤。

正文正式开始啦！

DNS解析

对于一个web页面来说导航的第一步是要去寻找页面资源的位置。如果导航中输入一个域名地址，浏览器并不能通过域名找到对应的服务器，需要通过DNS解析成IP地址，一旦获取到服务器IP地址，浏览器接下来就要试图和服务器建立连接了。

TCP三次握手

浏览器通过TCP“三次握手”与服务器建立连接。所谓三次握手(Three-way Handshake)，是指建立一个 TCP 连接时，需要客户端和服务器总共发送3个包。

三次握手的目的是连接服务器指定端口，建立 TCP 连接，并同步连接双方的序列号和确认号，交换 TCP 窗口大小信息。在 socket 编程中，客户端执行 connect() 时。将触发三次握手。

三次握手的过程示意图如下。

1. 第一次握手（SYN=1，Seq=X）

   客户端发送一个 TCP 的 SYN 标志位置1的包，指明客户端打算连接的服务器的端口，以及初始序号 X,保存在包头的序列号(Sequence Number)字段里。

2. 第二次握手(SYN=1, ACK=1, seq=y, ack=x+1)

   服务器发回确认包(ACK)应答。即 SYN 标志位和 ACK 标志位均为1。服务器端选择自己 ISN 序列号，放到 Seq 域里，同时将确认序号(Acknowledgement Number)设置为客户的 ISN 加1，即X+1。 发送完毕后，服务器端进入 SYN_RCVD 状态。

3. 第三次握手(ACK=1，seq=x+1，ack=y+1)

   客户端再次发送确认包(ACK)，SYN 标志位为0，ACK 标志位为1，并且把服务器发来 ACK 的序号字段+1，放在确定字段中发送给对方，并且在数据段放写ISN的+1

   发送完毕后，客户端进入 ESTABLISHED 状态，当服务器端接收到这个包时，也进入 ESTABLISHED 状态，TCP 握手结束。

发送HTTP请求

一旦我们建立了到web服务器的连接，浏览器就会发送一个初始的HTTP请求。对于网站来说，这个请求通常是一个HTML文件。

HTTP请求（request）由请求行、消息报头、请求正文组成。

1. 请求行由Method、requestUrl、HttpVersion组成。

   1. Method：GET、POST、HEAD、PUT、DELETE、TRACE、CONNECT、OPTIONS

      1. GET：请求获取Request-URL所标识的资源

      2. POST：在Request-URL所标识的资源后附加新的数据

      3. HEAD：请求获取由Request-URL所标识的资源的响应消息报头

      4. PUT：请求服务器存储一个资源，并用Request-URL作为其标识

      5. DELETE：请求服务器删除Request-URL所标识的资源

      6. TRACE：请求服务器回送收到的请求信息，主要用于测试或诊断

      7. CONNECT：保留将来使用

      8. OPTIONS：预检请求

   2. RequestUrl： 请求的url

   3. HttpVersion：HTTP/1.1、HTTP/2和HTTP/3。详解可以看看阮一峰老师的HTTP协议入门

2. 消息报头由Accept、Accept-Charset、Accept-Encoding、Accept-Language、Authorization、Host、User-Agent、Cookie、Referer、Content-Type组成。

   1. Accept：指定客户端接受哪些类型的信息/MIME（image/* 接受任意类型的图片、text/html 接受html文本）

   2. Accept-Charset ：客户端接受的字符集

   3. Accept-Encoding：可接受的内容编码

   4. Accept-Language：指定客户端接受的自然语言

   5. Authorization：证明客户端有权查看某个资源

   6. Host：指定被请求资源的Internet主机和端口号

   7. User-Agent：用户代理

   8. Cookie：浏览器向服务器发送cookie

   9. Referer：产生请求的网页来自于哪个URL

   10. Content-Type：Body编码方式

3.  请求正文由根据头部的Content-Type确定

   1. application/x-www-form-urlencoded: 默认数据编码方式

   2. application/json：序列化后的JSON字符串

   3. text/xml：XML作为编码方式的远程调用规范

   4. text/plain：数据以纯文本形式（text/json/xml/html）进行编码

   5. mutipart/form-data：允许多种类型的数据，既可以有文本数据，又有文件等二进制数据，所以常用于文件上传

服务器响应

服务器一旦接受到请求，它将会使用相关的响应头和HTML的内容进行回复。

服务器响应（response）由状态行、消息报头、响应正文组成。

1. 状态行：状态码

   1. 100~199：表示服务器成功接收部分请求，要求客户端继续提交其余请求才能完成整个处理过程。

   2. 2xx：表示服务器成功接收请求并已完成整个处理过程。

      1. 200（OK 请求成功）。

   3. 3xx：为完成请求，客户需进一步细化请求。例如：请求的资源已经移动一个新地址、 常用

      1. 301: 永久重定向

      2. 302: 临时重定向（所请求的页面已经临时转移至新的url）

      3. 304：客服端有缓存情况下服务端的一种响应

   4. 4xx：客户端的请求有错误.

      1. 400:错误请求，服务器无法解析请求

      2. 401:未授权，没有进行身份验证

      3. 403:服务器拒绝访问

      4. 404:服务器无法找到被请求的网页

      5. 405:请求方式不被允许

      6. 408:请求超时

   5. 5xx:服务器端出现错误

      1. 500:服务器内部错误

      2. 501:服务器不具备完成请求的功能

      3. 503:服务器不可用

2. 消息报头由响应报头、实体报头组成。

   1. 响应报头

      1. Location：用于重定向接受者到一个新的位置

      2. WWW-Authenticate：包含在401（未授权的）响应消息中，客户端收到401响应消息时候，并发送Authorization报头域请求服务器对其进行验证时，服务端响应报头就包含该报头域。

      3. Server：包含了服务器用来处理请求的软件信息。它和User-Agent请求报头域是相对应的，前者发送服务器端软件的信息，后者发送客户 端软件(浏览器)和操作系统的信息。下面是Server响应报头域的一个例子：Server: Apache-Coyote/1.1。

   2. 实体报头

      1. Content-Encoding：媒体类型的修饰符

      2. Content-Language：资源所用的自然语言

      3. Content-Length：正文的长度，以字节方式存储的十进制数字来表示

      4. Content-Type：发送给接收者的实体正文的媒体类型。比如：text/html;charset=UTF-8

      5. Last-Modified: 资源最后的修改日期及时间。

      6. Expires: 响应过期的日期和时间。为了让代理服务器或浏览器在一段时间以后更新缓存中的页面

3. 响应正文

解析渲染页面

浏览器收到数据的第一块，它就开始解析收到的信息。“解析”是浏览器将通过网络接收的数据转换为DOM和CSSOM的步骤，通过渲染器把DOM和CSSOM在屏幕上绘制成页面。

浏览器的渲染图，如图所示：

浏览器的关键渲染路径大致为5个步骤。这篇文章中有详细的解释

1. 处理HTML标记并构造DOM树。浏览器构建DOM树时，这个过程占用了主线程，当这种情况发生时，预加载扫描仪将解析可用的内容并请求高优先级资源，如CSS、JavaScript和web字体。

2. 处理CSS并构建CSSOM树。

3. 将DOM 和 CSSOM 树结合为render tree，计算样式树或渲染树从DOM树的根开始构建，遍历每个可见节点。

4. 在渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。回流是对页面的任何部分或整个文档的任何后续大小和位置的确定。

5. 将各个节点绘制到屏幕上。

TCP四次挥手

浏览器通过TCP“四次挥手”与服务器断开连接。所谓四次挥手(Four-way handshake)，是指TCP断开链接需要发送四个包。

四次挥手的过程示意图如下：

 

1. 第一次挥手(FIN=1，seq=u)

   客户端进程发出连接释放报文，并且停止发送数据。释放数据报文首部，FIN=1，其序列号为seq=u(等于前面已经传送过来的数据的最后一个字节的序号加1)，此时，客户端进入FIN-WAIT-1（终止等待1）状态。TCP规定，FIN报文段即使不携带数据，也要消耗一个序号。

2. 第二次挥手(ACK=1，ack=u+1)

   服务器端确认客户端的 FIN 包，发送一个确认报文，ACK = 1，ack = u + 1，并且带上自己的序列号seq = ，服务端就进入了CLOSE-WAIT（关闭等待）状态。

3. 第三次挥手(FIN=1，ACK = 1, seq = w, ack = u + 1)

   服务器端准备好关闭连接时，向客户端发送结束连接请求，FIN 置为1。

   发送完毕后，服务器端进入 LAST_ACK 状态，等待来自客户端的最后一个ACK。

4. 第四次挥手(ACK=1，seq = u + 1, ack = w + 1)

   客户端接收到来自服务器端的关闭请求，发送一个确认包，并进入 TIME_WAIT状态，等待可能出现的要求重传的 ACK 包。

   服务器端接收到这个确认包之后，关闭连接，进入 CLOSED 状态。

   客户端等待了某个固定时间（两个最大段生命周期，2MSL，2 Maximum Segment Lifetime）之后，没有收到服务器端的 ACK ，认为服务器端已经正常关闭连接，于是自己也关闭连接，进入 CLOSED 状态。

到这里整个流程就结束了。下一篇文章我们再来谈一谈在这个流程上我们能做哪些性能优化。

参考文献

渲染页面：浏览器的工作原理

TCP协议

HTTP教程