前端经典面试题-从输入URL到渲染页面的过程

前言

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战”

个人总结，仅供参考，觉得满意，赐个赞！抱拳了！

极客浏览器原理渲染.png

大致流程，如图所示：

首先，浏览器进程接收到用户输入的URL请求，浏览器进程会将该URL发送给网络进程。
然后，网络进程发起URL请求。
网络进程收到响应头数据，就会解析响应头数据，并将数据转发给浏览器进程。
浏览器进程接收到网络进程的响应头数据后，发送“提交导航（CommitNavigation）”消息到渲染进程。
渲染进程接收到“提交导航”的消息之后，便开始准备接收HTML数据，接收数据的方式是直接和网络进程简历数据管道。
最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接收和解析页面数据了”。
浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。

我面试回答的流程是：

1. 判断地址栏输入的是搜索内容还是URL地址：

如果是搜索内容，则搜索引擎会把搜索内容合并，并转换成对应的URL；

如果是域名，会加上协议（如https）合成完整的URL.

2.浏览器进程会通过进程间通信（IPC）把URL发送给网络进程

按下回车键之后，浏览器进程会通过进程间通信（IPC）把URL发送给网络进程，网络进程才会发起真正的网络请求。

3. 检查缓存

   网络进程收到URL后，会先查找是否有缓存，如果有缓存，并且没有过期，则返回该资源给浏览器进程。

浏览器缓存机制：juejin.cn/post/697866…

3.如果没有缓存，网络进程会向服务器发起HTTP请求，请求流程：

（1） DNS解析得到对应的IP地址；如果请求协议是 HTTPS，那么还需要建立 TLS 连接。

DNS解析顺序：

客户端与服务器之间递归查询，服务器与服务器直接是迭代查询

（2） 然后利用IP地址和服务器建立TCP链连接。连接建立之后，浏览器端会构建请求行、请求头等信息，
      并把和该域名相关的Cookie等数据附加到请求头中，然后向服务器发送构建的请求信息。

（3） 服务器收到请求信息后，会根据请求信息生成响应数据（响应头、响应行和响应体等信息），并发送给网络进程。

（4） 网络进程收到后，会解析响应头的内容。

重定向

如果返回的状态码是301 Moved Permanently（永久重定向） 或者是302 Found （临时重定向） ,则浏览器会重定向到新的URL，这个新的URL是网络进程从响应头的Location字段中获取的。

重定向.png

4. 建立TCP链接

（1）三次握手

TCP三次握手.png 三次握手：（SYN （同步序列编号）ACK（确认字符））

第一次握手：Client将标志位SYN置为1，随机产生一个值seq=x，并将该数据包发送给Server，Client进入SYN_SENT状态，等待Server确认。
第二次握手：Server收到数据包后由标志位SYN=1知道Client请求建立连接，Server将标志位SYN和ACK都置为1，ack=x+1，随机产生一个值seq=y，并将该数据包发送给Client以确认连接请求，Server进入SYN_RCVD状态
第三次握手：Client收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给Server，Server检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，Client和Server进入ESTABLISHED状态，完成三次握手，随后Client与Server之间可以开始传输数据了。

考点1：为什么不是两次或者四次呢？

简洁回答：

第一次握手表示客户端可以发送
第二次握手表示服务器可以接收，也可以发送
第三次握手表示客户端可以接收

（2）建立连接之后，服务器返回数据

（3）四次挥手

TCP四次挥手.png

第一次挥手：Client发送一个FIN=M(释放一个连接)，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。
第二次挥手：Server收到FIN后，发送一个ack=M+1给Client，确认序号为收到序号+1(与SYN相同，一个FIN占用一个序号)，Server进入CLOSE_WAIT状态。
第三次挥手：Server发送一个FIN = N，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。
第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号ack=N+1，Server进入CLOSED状态，完成四次挥手。

考点1：为什么需要四次呢？

简洁回答：

第一次挥手客户端：发送请求释放连接FIN=M报文；
第二次挥手服务器表示：我还有数据没有发完，你先等一会儿，ACK=M+1；
第三次挥手服务器：发送请求释放连接FIN=N报文,表示你可以断开了；
第四次挥手客户端：发送发送ACK=N+1，并等待2MLS。

考点2：为什么需要等待2MSL呢？

MSL(maximum segment lifetime):最长报文寿命

2MSL = 去向ACK的最大存活时间（1MSL) + 来向FIN的最大存活时间（1MSL）

RFC 793中规定MSL为2分钟，实际应用中常用的是30秒，1分钟和2分钟等

考点3：一定要等2MSL吗?

如果不等的话，释放的端口可能会重连刚断开的服务器端口，这样依然存活在网络里的老的TCP报文可能与新TCP连接报文冲突，造成数据冲突，为避免此种情况，所以最好要等2MSL。

5. 准备渲染进程

默认情况下，Chrome 会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。

渲染进程准备好之后，还不能立即进入文档解析状态，因为此时的文档数据还在网络进程中，并没有提交给渲染进程，所以下一步就进入了提交文档阶段。

6. 提交文档

浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程，具体流程是这样的：

（1）首先当浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息；

（2）渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”；

（3）等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；

（4）浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

7. 页面渲染

（1）HTML通过HTM 解析器转成DOM 树（二叉树类似结构的东西）；

（2）CSS按照CSS规则和CSS解释器转成CSSOM 树（CSS规则树）；

（3）合并DOM树和CSSOM树，形成render 树；

（4）Layout（布局）阶段，计算元素的布局信息。对布局树进行分层，并生成分层树；

（5）Paintting（绘制）阶段，遍历渲染树绘制所有节点，为每一个节点适用对应的样式，并显示到页面上。

参考

浏览器工作原理与实践