【前端面试】- 输入URL到页面加载的全过程（一）

微信搜一搜 “胖蔡话前端” 前端公众号，关注更多前端面试题，或扫描下方二维码关注公众号。

当面试官问我们：“输入一个URL到前端页面加载整个过程发生了什么”？我们该怎么去回答这个问题呢？

这个问题算是一个比较高频出现的前端面试题，因为问题本身涉及的知识点比较多，而且对于不同面试官希望听到的答案可能也不是完全相同。就我之前公司的面试经历而言，我【前端开发】可能比较关心候选人对于页面的加载过程的了解以及页面渲染的生命周期和加载顺序，而我们的架构师比较关心的则是这个过程中出现的数据交换过程的了解。那么，URL加载的全过程究竟做了哪些工作呢？还请大家继续看下去。

这个问题其实我们可以分为两个部分去了解即：数据请求和数据渲染。

数据请求

数据请求阶段主要是实现了客服端请求获取服务端数据的功能，具体流程步骤如下：

• DNS解析
• 建立连接
• 发起请求
• 返回数据

当然，上面是比较常规的步骤，要是考虑缓存因素的话，在DNS解析前还有一个本地缓存获取，在返回数据前也有一个服务器缓存获取【协商缓存】。本篇暂不考虑缓存情况。就上述过程来，我们来简单谈谈可能涉及哪些知识点，在这之前，先上一个网络层的模型供大家观摩观摩，问题主要集中在这块内容里。

带着网络模块图我们来考虑考虑会有哪些问题需要我们去了解。

1、 简单介绍下DNS解析的过程

整个过程大致如上图，客户机会通过访问本地的dns服务器然后逐级向上查询找到目标机器并返回给客户机，本地dns也会堆积进行记录。

2、URL由哪几部分组成？

这个不太常问，但需要了解。完整的URL组成如下

• 协议名
• 域名
• 端口
• 路径
• 查询条件
• 锚点

3、简单介绍下建立连接的过程

或者是问“TCP三次握手的过程是什么？什么是TCP的四次回收？”，这个问题的核心就是需要对于TCP的三次握手和四次挥手过程熟练掌握。

①第一次握手，客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 ISN©。此时客户端处于 SYN_SEND 状态。

首部的同步位SYN=1，初始序号seq=x，SYN=1的报文段不能携带数据，但要消耗掉一个序号。

②第二次握手，服务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答，并且也是指定了自己的初始化序列号 ISN(s)。同时会把客户端的 ISN + 1 作为ACK 的值，表示自己已经收到了客户端的 SYN，此时服务器处于 SYN_RCVD 的状态。

在确认报文段中SYN=1，ACK=1，确认号ack=x+1，初始序号seq=y

③客户端收到 SYN 报文之后，会发送一个 ACK 报文，当然，也是一样把服务器的 ISN + 1 作为 ACK 的值，表示已经收到了服务端的 SYN 报文，此时客户端处于 ESTABLISHED 状态。服务器收到 ACK 报文之后，也处于 ESTABLISHED 状态，此时，双方已建立起了连接。

由于TCP连接是全双工的，因此，每个方向都必须要单独进行关闭。这一原则是当一方完成数据发送任务后，发送一个FIN来终止这一方向的连接，收到一个FIN只是意味着这一方向上没有数据流动了，即不会再收到数据了。但是在这个TCP连接上仍然能够发送数据，直到另一方向也发送了FIN。

①第一次挥手：客户端发送FIN报文，并指定seq=u(u之前的数据已经全部发送，并且数据发到u就可以截止了，就不再有数据了)，用来关闭客户端到服务端的数据传送。客户端进入FIN_WAIT_1状态。

②第二次挥手：服务端收到FIN报文，发送seq=v和确认序号ack=u+1给客户端，服务端进入CLOSE_WAIT状态。

③第三次挥手：服务端发送FIN报文，seq=w和确认序号ack=u+1，用于关闭服务端到客户端的数据传输。服务端状态变成LAST_ACK状态。

④第四次挥手：客户端收到FIN报文，客户端进入TIME_WAIT状态，然后发送一个ACK给服务端，确认序号ack=w+1，服务端进入CLOSED状态。

4、http和https的区别，简单介绍下HTTPS的流程

这个在问到Http协议的时候可能会问到，一般会问“除了http协议你还知道其他哪些协议？”，大多数人都会说到https协议，这时候问题就来了，当然有时候即使你不问，面试官也会主动问你熟不熟悉https协议。这里简单介绍下https的加密过程。

过程大致如图所示，一般不需要回答的特别细节，只需要知道几个重点知识就行：

• https使用的是ssl证书进行加密
• https加密方式为对称加密
• ssl证书是由三方机构颁发的
  如果问得比较深的话，或许还会问到其他加密算法，这个就得靠平时的积累了。