hello大家好，我是Range。

今年的秋招，部分公司已经开始了，不知道校招同学们准备怎么样了。对于校招，我们通常关注的是基础知识的掌握情况，比如数据结构、算法、计算机网络、操作系统等，对这些基础理论的考察，也是秋招的必考问题集里。

相信很多同学都听过一个很经典的前端面试问题：从输入URL到页面渲染出来，都会经历哪些？今天带来的这篇文章，主要集中在问题的前半段，即从输入URL到接受到服务端返回的首字节，这个过程主要涉及到的是基础的计算机网络知识，强烈建议校招同学对这个过程中每一个知识点都要吃透，因为这些问题校招的频率实在是太高了。

下面是正文部分。

面试官：输入URL回车后到页面渲染发生了什么？

近期，小编也是在准备秋招面试，也是面了好几家公司，这个问题也是面试官很可能会问到的问题，当问到时，咱们怎么来进行回答呢？

这里小编先给大家说一下面试的套话，在详细具体介绍一下其中的过程。

面试套话：“检查缓存、先解析URL、然后DNS域名解析、再发起HTTP请求建立TCP连接、服务端响应返回页面资源进行渲染、然后断开TCP连接”

过程：

1、（找）DNS解析 -> 寻找哪台机器上有你需要资源根据网址找IP
2、TCP连接 -> 客户端和服务器，TCP作为其传输层协议
3、发送HTTP请求 -> HTTP报文是包裹在TCP报文中发送的请求行，请求报头，请求正文
4、服务器处理请求并返回HTTP报文 -> 状态码,响应报头和响应报文。
5、浏览器解析渲染页面 -> 浏览器在收到HTML,CSS,JS文件后依次渲染
6、连接结束 -> 断开TCP连接四次挥手

正文

当咱们在浏览器输入url到页面渲染的时候，电脑其实做了很多操作，其中就包括了后半段，生成dom树，cssom树，render树，回流，重绘，这个咱们之前已经聊完了，有不清楚的小伙伴可以看看这之前的这篇文章浏览器的页面渲染

本期咱们就来把前半段也给细细聊明白来。

输入url到页面渲染

url解析

首先就是判断用户输入的url是否合法，一个合法的url的样子如下



https://juejin.cn/user

协议号
https://是协议号，多了个s指的是TLS，相比较http，https进行了加密
ip
ip因为很难记住，因此人们用域名来进行代替
端口
默认端口号是80。协议号，ip，端口是同源策略三要素
路径
比如user页，home页

dns解析

DNS(Domain names Systems)就是将域名对应的ip地址找到来

dns解析也有好几个步骤，这些步骤目的都是去找到对应的ip来，比如我访问baidu.com

1、去操作系统的本地缓存中查找ip

这就相当于第一次访问一个新的地址，浏览器会帮你把地址域名对应的ip映射关系存入本地中，这样日后再次访问就不需要查找了

2、去系统配置的dns服务器（或缓存）中查询

3、去根服务器中查询

4、去com顶级域名服务器中查找

5、去到baidu.com这个域名服务器中查找

6、本地缓存改ip地址减少下次dns的步骤

tcp三次握手

此时已经拿到了对方的ip，接下来就是通过tcp的三次握手来建立网络连接

其实如果没有tcp照样可以进行网络通讯，这里先插入udp

udp

udp(User Datagram Protocal)用户数据报协议

以前面试官很喜欢问tcp和udp二者的区别，现在好像问这个比较少了

udp特征如下：

无连接：不需要再正式传数据之前建立双方的连接
如果网络通讯依靠tcp得话，tcp相比udp就更礼貌了，还需要先寒暄几下
只是数据报文的搬运工，不会对数据报文进行拆分和拼接
从这里就可以看出，udp传输的时候可以很高效，但是不安全

总结下特点

不可靠性
因为面向无连接，不会去备份数据，没有拥塞控制
这个拥塞控制我来举个情景：udp传输的时候不会去管网络好坏，都是一个劲的去传输，就像是一个莽夫在路上开车，路况你无从控制的，万一碰到了窄路就会发生拥堵
拥塞控制就是可以控制网不好的时候传少点，网好的时候传多点
高效
传输方式：一对一（单播），一对多（多播），多对一，多对多（广播）

虽然行为很莽夫，但是因为传输高效以及方式导致这个udp还是有很多应用场景的

比如直播，在线游戏，视频通话，只要是实时通讯的，就要用上udp协议

tcp

tcp(Transmission Control Protocal)传输控制协议

tcp特征如下

需要握手来建立连接和断开连接
通过某种算法保障了数据的可靠性
既然是网络协议，那么传输一定是会受网络影响的，tcp在传输之前会先把数据先进行备份，并且可以通过网络的好坏来进行拥塞控制，网不好就慢慢发

tcp有些字段也比较重要：

Sequence Number
序列号：给每个数据报文都打上序列号，保证了接收顺序
Acknowledgement Number
确认号：接收端期望接收到的下一个字节的编码是多少。比如你接收了第一包，确认号就是第二个包
标识符
URG = 1表示数据包的优先级，1表示最高，加急的效果
ACK = 1表示该数据包有效，比如超时重传后，先前很慢过来的数据包就成了无效的
SYN = 1; ACK = 0 表示连接请求报文
SYN = 1; ACK = 1 表示应答连接报文

就是因为有这么多字段，才可以使得tcp可靠传输

tcp和udp的区别

这里跟大家概括一下TCP和UDP的区别

TCP：1、面向有连接 2、可靠性：有流量拥塞控制 3、有序性

TCP是一种面向连接的协议，在传输数据之前，必须建立连接，然后才能传输数据。
TCP是一种可靠的协议，在传输数据时，会进行数据校验，如果发现数据错误，则会重新发送数据。

UDP：1、无连接 2、不靠性：没有流量拥塞控制，丢包不管 3、高效：不管丢包，像2打电话网络卡了你后面只能听到对方现在的声音对于实时性要求很高的场景：直播，视频通话

第一次握手

客户端向服务端发送建立连接请求，客户端进入SYN-SEND状态，syn就是报文，send就是发送

第二次握手

服务端接收到建立连接请求后，向客户端发送一个应答，服务端进入SYN-RECEIVED状态，received就是接收到了

第三次握手

客户端接收到应答后，发送确认接收到应答，客户端进入ESTABLISHED状态，established就是建立了

这里面试官就很可能会问你这个问题了：为什么要三次握手？两次行不行？

不行，如果是两次握手，发送端可以确定自己发送的信息对方能收到，也能确定对方发的包自己能收到，但接收端只能确定对方发的包自己能收到无法确定自己发的包对方能否收到
并且两次握手的话，客户端有可能因为网络阻塞等原因会发送多个请求报文，延时到达的请求又会与服务器建立连接，浪费掉许多服务器的资源。

数据传输（http协议--超文本传输协议）

也就是我们说的http发请求

服务端响应请求返回数据

浏览器渲染页面

这里面的详细过程已经在上一篇文章讲得很详细了

解析html代码，生成一个dom树
解析css代码，生成CSSOM树
将dom树和CSSOM树结合，去除不可见的元素，生成Render Tree
计算布局，（回流 | 重排）根据Render Tree进行布局计算，得到每一个节点的几何信息
绘制页面，（重绘）GPU根据布局信息绘制

tcp四次挥手断开连接

第一次挥手

客户端向服务端发送断开请求连接

第二次挥手

服务端接收到断开连接请求后，告诉应用层去释放tcp连接，此时服务端仍然可以给客户端发送数据包

应用层指的是OSI七层协议

路由器一般是网络层，交换机是物理层，应用层就是为终端或者应用提供网络服务

第三次挥手

服务端向客户端发送最后一个数据包FINBIT后，服务端进入Last-ACK状态

第四次挥手

客户端接收到服务端的释放连接请求后，向服务端确认应答，最终双方均进入closed状态

面试官：能否仅三次挥手

第四次就是客户端确认收到了释放连接的请求，也就是确认可以关闭，如果没有这一步，客户端就一直都是开放的状态，浪费性能

结尾

输入url后第一步就是url解析，判断url是否合法，然后就是dns解析，这个过程就是解析出域名对应的ip，一层一层的找，然后就是tcp三次握手建立连接，建立好连接就是http数据通讯，服务端响应请求返回数据，浏览器通过生成html树，cssom树，合并成render树，回流重绘渲染好页面，最终tcp四次挥手断开连接。

原文链接：https://juejin.cn/post/7402781870658797619

从输入URL到浏览器收到首字节

正文