从输入url到页面加载完成中间发生了什么朋友面试凉经，被问了烂大街的问题（url输入到页面渲染的整个过程），答完以后面试

从输入url到页面加载完成中间发生了什么？

这道面试题可谓是逢面必问，如今前端卷的一批，如果只是回答页面从服务器拿资源到页面的渲染的话那可不太行，今天将会把多个前端相关的知识点串联起来，当面试官眼前一亮！！

全文会出现多次面试官提问，都是一些常见的面试问题，请注意咀嚼！！！

很快啊，我们就进入了主题。

众所周知，计算机网络协议有五层，分别是应用层、传输层、网络层、数据链路层、物理层，本文将按照这五层进行阐述。

网络协议.png

第一关：应用层

应用层主要是为应用程序提供了网络服务。

DNS解析

DNS域名系统主要负责记录互联网中主机名和该主机IP地址之间的映射关系，运行在用户主机上的某些应用程序需要将主机名转换为IP地址，这些应用程序将调用DNS的客户机端，并指明需要被转换的主机名。

HTTP/HTTPS

HTTP，全称Hypertext Transfer Protocol，即超文本传输协议，是一种应用层协议，它规定了客户端和服务器之间请求和应答的标准方式，用于传输超文本（例如网页）。HTTP协议简单、易于理解和使用，请求和应答的整个过程都采用文本格式。
HTTPS，全称Hypertext Transfer Protocol Secure，即超文本传输安全协议，是以安全为目标的HTTP通道。简单讲是HTTP的安全版。HTTPS经由HTTP进行通信，但利用 SSL/TLS 来加密数据包。它的主要目的提供对网站服务器的身份认证，保护交换资料的隐私与完整性。

面试官：http跟https的端口号是多少？
答：http（80端口） https（443端口）

面试官：http版本有哪些？
答：http1.0 http1.1 http2.0

面试官：各个版本主要内容是什么？
答：1、http1.0每次与服务器交互都需要新开一个链接。
    2、相比于http1.0，http1.1只需要建立一次链接，可以进行多次的请求，但是请求和响应必须按顺序一一对应。
    3、http2.0的新特性主要有二进制分帧、多路复用、首部压缩、服务器推送。（接下来分点回答）
    二进制分帧：2.0中帧是通信中最小单位信息，并且采用二进制格式传输数据，不同于1.x的文本格式。数据被分成一个或多个帧以流的形式发送，多个帧之间可以乱序传输,通过帧首部的流标识进行重新组装。
    多路复用：该特性是基于二进制分帧而实现了在一个TCP链接里，客户端和浏览器都可以同时发送多个请求或响应，而且不用按照顺序一一对应，这样就避免了“队头阻塞”。
    首部压缩：在客户端跟服务端使用“首部表”来跟踪和存储之前发送的键值对，对于相同的数据，不再每次请求和响应发送。
    服务器推送：允许服务端推送资源给客户端，服务端会顺便把一些客户端需要的资源一起推送过去。需要注意理解的是，这里的推送是是基于客户端的一次请求返回非请求所需的资源，并不是服务端主动推送数据，服务端主动推送数据的话可以使用Websocket。

http考察的点比较少，主要是考察https的对称加密跟非对称加密,两种加密方式的区别就是加密跟解密用的是否是同一把密钥，接下来会着重讲解非对称加密。

CA证书是由认证机构服务者签发，是数字签名的技术基础保障，也是网上实体身份的证明，能够证明某一实体的身份及其公钥的合法性，证明该实体与公钥二者之间的匹配关系。

废话不多说，先上图了解大概流程！！

加密.png

接下来我们将根据图中步骤进行具体的讲解

①客户端发送请求，把客户端支持的加密套件的列表跟客户端生成的随机数发送给服务端。

②服务端接收后，选择一套加密套件、ca证书（里面包含公钥）和服务端生成的随机数发送给客户端。

③客户端拿到ca证书以后会验证是否合法，如果不合法那么会弹出提示，合法的话将会根据服务端跟客户端生成的随机数和加密算法生成随机数，然后用公钥加密随机数传输给服务端。

④服务端拿到加密的随机数以后用私钥解密，并且用选择的加密套件和随机数对数据进行加密。

https也不是完全安全的，他有可能收到中间人劫持的攻击，只是攻击的成本更高、更复杂，让人望而却步了。

第二关：传输层

传输层负责向用户提供端对端的通信服务，实现流量控制以及差错控制。

TCP/UDP

TCP协议全称是传输控制协议是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC793定义。TCP是面向连接的、可靠的流协议。TCP提供超时重发，丢弃重复数据，检验数据，流量控制等功能，保证数据能从一端传到另一端。
UDP协议全称是用户数据报协议，在网络中它与TCP协议一样用于处理数据包，是一种无连接的协议。UDP有不提供数据包分组、组装和不能对数据包进行排序的缺点。由于UDP在传输数据报前不用在客户和服务器之间建立一个连接，且没有超时重发等机制，故而传输速度很快。

TCP三次握手和四次挥手

三次握手总结一句话就是客户端跟服务端验证对方的接收和发送功能是否正常。

第一次握手：客户端发送一个SYN报文到服务端，询问服务端是否打开并准备好接收数据。（确认客户端发送功能正常）

第二次握手：服务端会议一个SYNC-ACK报文，确认收到SYC报文并询问客户端是否准备好发送数据。（确认服务端发送、接收能力正常）

第三次握手：客户端发送一个ACK报文，确认服务端的SYN-ACK报文。此时，连接就建立起来了。（确认客户端接受能力正常）

四次握手确保了双方都完全关闭了连接，并且所有的数据都已发送和接收。这样的机制可以防止数据丢失或重复发送。

第一次挥手：客户端发送一个FIN报文到服务器，告诉服务器它已经完成数据传输并关闭了连接。

第二次挥手：服务器回应一个ACK报文，确认收到客户端的FIN报文。此时，服务器可以继续发送数据到客户端直到它也完成了数据传输。

第三次挥手：服务器发送一个FIN报文到客户端，告诉客户端它已经完成数据传输并关闭了连接。

第四次挥手：客户端发送一个ACK报文，确认收到服务器的FIN报文。此时，连接就被关闭了。

面试官：TCP建立连接以后，客户端出现了故障怎么办？
答：TCP有保活计时器，如果两个小时没收到数据，服务端会发送探测报文，十次以后没有应答就回关闭连接。（当服务端接收到报文以后会重置时间）

第三关网络层

网络层主要负责创建逻辑链路，以及实现数据包的分片何重组，实现拥塞处理、网络互连等功能。

第四关数据链路层

数据链路层主要负责在通信的实体间建立数据路连接。

第五关物理层

物理层主要负责在物理线路上传输原始的二进制数据。

服务端在View层处理用户提交请求，接着在Service层进行系统的业务逻辑处理，然后在Dao层直接操作数据库，最后将数据返回给客户端，接下来就是页面的渲染。

浏览器渲染

浏览器渲染.png

1、DOM树和CSS树

浏览器在接收到数据以后，首先生成DOM树跟CSSOM树。

关于浏览器线程与进程的基础知识：在浏览器中每一个Tab页都有一个渲染进程，渲染进程里面主要是GUI线程，负责解析HTML、CSS，构建DOM树和Render树，布局和绘制等都是这个线程去做的；还有的就是主线程，负责JS代码的执行。这两者是互斥的，正因为如此JS的执行会阻塞GUI渲染线程，原因总结一句话就是JS会影响DOM树跟CSSOM(比如操作document对象),所以我们会把<script>标签放在最后面了，当然也可以使用defer和async两个属性来解决这个问题。

2、render树

在这里我们拿到了DOM树和CSSOM树，接着将DOM树的每个节点添加上样式属性，在这里一些不展示的DOM节点将会被删除，比如dispaly:none。在这里也会进行一些转换比如em转换成px，red转换成rgb。

3、布局

布局是指浏览器计算出每个DOM元素在屏幕上的位置和大小的过程（即盒模型）。这个过程中，浏览器将每个元素的尺寸计算出来后，将它们摆放到正确的位置。

面试官：什么是盒模型？
答：盒模型主要有四个部分组成内容(content)、填充(padding)、边框(border)、外边距(margin)。盒模型有两个属性`box-sizing: content-box`和`box-sizing: border-box`。
content-box：盒模型的宽高即content的宽高，默认值。
border-box：盒模型的宽高是content的宽高+padding+border。

4、绘制

浏览器将计算好的样式信息和布局信息使用图形库转换为图形指令。

5、GPU渲染

将页面展示到屏幕上，此时我们就可以看到已经渲染出来的页面了。

到这里全流程就已经结束了，希望对大家有帮助，如果可以的话就点个赞呗，文章有什么问题也可以在评论区讨论，感谢大佬的纠错。

从输入url到页面加载完成中间发生了什么