在浏览器中输入URL到显示主页的过程？

bdundun

已于 2022-08-31 14:30:23 修改

阅读量3.4k

点赞数 2

分类专栏：计算机网络&浏览器&操作系统文章标签：前端网络

于 2021-11-24 21:34:23 首次发布

本文链接：https://blog.csdn.net/weixin_44915595/article/details/121525549

版权

计算机网络&浏览器&操作系统专栏收录该内容

14 篇文章 2 订阅

订阅专栏

首先推荐一篇经典的文章：深入理解现代浏览器
从发起 URL 请求开始，到首次显示页面的内容，在视觉上经历的三个阶段：
第一个阶段，等请求发出去之后，到提交数据阶段，这时页面展示出来的还是之前页面的内容。（影响因素：网络）
第二个阶段，提交数据之后渲染进程会创建一个空白页面，显示空白页面的时间称为解析白屏，并等待 CSS 和 JavaScript 文件的加载完成，生成 CSSOM 和 DOM，然后合成布局树，最后还要经过一系列的步骤准备首次渲染。（通常情况下的瓶颈主要体现在下载 CSS 文件、下载 JavaScript 文件和执行 JavaScript。策略：前端性能优化——优化首次页面渲染）
第三个阶段，等首次渲染完成之后，就开始进入完整页面的生成阶段了，然后页面会一点点被绘制出来。
从输入 URL 到页面展示完整流程示意图：
在这里插入图片描述
整个过程需要三个进程（分别是浏览器进程、网络进程、渲染进程）之间的配合，配合过程如下：

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

回到问题，在浏览器中输入URL到显示主页的过程？
整个过程需要浏览器进程、渲染进程、网络进程之间的配合，我把这个过程分为四个阶段来阐述，分别是：用户输入阶段、url请求阶段、提交文档阶段、渲染阶段。
一、用户输入

合成URL(用户输入URL，浏览器会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，在这段内容上加上协议合成合法的URL)
按下回车（当用户键入回车之后，意味着当前页面即将要被替换成新的页面，不过在这个流程继续之前，浏览器还给了当前页面一次执行 beforeunload 事件的机会，beforeunload 事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面，因此用户可以通过 beforeunload 事件来取消导航，让浏览器不再执行任何后续工作。当前页面没有监听 beforeunload 事件或者同意了继续后续流程，浏览器导航栏显示loading状态，但是页面还是呈现前一个页面，这是因为新页面的响应数据还没有获得）

二、URL请求过程

浏览器进程通过进程间通信（IPC）把URL发送到网络进程
查找缓存。网络进程获取到URL，先去浏览器缓存中查找是否有缓存文件，如果有，拦截请求，直接返回资源副本；否则，进入网络请求过程；
进入网络请求流程的第一步就是进行DNS解析，获取服务器IP地址（找到服务器地址才能进行通信呀），并准备端口（火狐和谷歌同时访问b站，电脑会给谷歌和火狐分配不同的端口号），如果没有端口号，http默认80，https默认443。（IP地址：端口号=套接字socket）
等待TCP队列。现在已经把端口和 IP 地址都准备好了，那么下一步是不是可以建立 TCP 连接了呢？答案依然是“不行”。Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。当然，如果当前请求数量少于 6，会直接进入下一步，建立 TCP 连接。
利用IP地址和服务器建立TCP连接，三次握手，如果协议是HTTPS，还需要建立TLS连接
发起HTTP请求：构建请求行，请求头，并把cookie等数据加到请求头中。然后发送构建的请求信息。
然后通过底层的传输层、网络层、数据链路层、物理层的传输，数据到达了目的服务器的应用层。
应用层HTTP解析请求头和请求体，如果需要重定向，HTTP直接返回HTTP响应数据的状态code301或者302，同时在响应头的Location字段中附上重定向地址，浏览器会根据code和Location进行重定向操作；否则，返回新数据，200的状态码。
数据传输完成，TCP四次挥手断开连接。如果，浏览器或者服务器在HTTP头部加上如下信息，TCP就一直保持连接。保持TCP连接可以省下下次需要建立连接的时间，提示资源加载速度Connection:Keep-Alive
浏览器收到返回的响应头后，开始解析响应头（服务器依次返回响应行响应头响应体）
1）重定向，状态码为301或302。在响应头的location字段中告诉浏览器要重定向的URL
2）响应行状态码为200。表示可以继续处理该请求。然后进行响应数据类型的判断，返回的响应体数据类型content-type如果是字节流类型，则为下载类型。表示该请求提交给浏览器的下载管理器。URL请求导航结束。若为text/html则继续

总结：浏览器中的 HTTP 请求从发起到结束一共经历了如下八个阶段：构建请求、查找缓存、准备 IP 和端口、等待 TCP 队列、建立 TCP 连接、发起 HTTP 请求、服务器处理请求、服务器返回请求和断开连接。
三、提交文档
所谓提交文档，就是指浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程，具体流程是这样的：

当浏览器进程接收到网络进程的数据之后，如果响应是HTML文件，便由浏览器进程中的UI线程联系渲染进程（IPC通信），向渲染进程发起“提交文档”的消息；如果响应是一个zip等文件，则交给下载管理器；
提交文档的消息由浏览器进程发出，让网络进程和渲染进程建立数据传输的管道（接收HTML）。完成后渲染进程“确认提交”的信息给浏览器进程。然后浏览器进程开始更新页面状态
进入渲染阶段：

四、渲染阶段

构建DOM树（浏览器无法直接理解和使用HTML，所以需要将HTML转化为浏览器能够理解的DOM树。）
css、图片、视频交给资源加载器加载，不会阻塞DOM树解析；js资源下载和执行会阻塞dom树的解析（defer和async）
根据CSS构建CSSOM树
1）把css转换为浏览器能够理解的结构——结构化样式表（styleSheets)
2）标准化属性值。如 2em ->32px。转换为渲染引擎能够理解的，标准化的计算值。
3）计算出DOM树中每个节点的具体样式computedStyle（涉及继承和层叠）。

将DOM树和CSSOM树结合，组合成一棵Render树。
4. 根据Render树进行布局(layout)
即确定每个树节点的宽、高、位置及元素之间的位置关系(第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为重排(reflow)，也有些文章称之为回流。
4. 开始绘制（重绘发生于此阶段）
1）分层
渲染引擎为特定的节点生成专用的图层，并且生成一棵对应的图层树（LayerTree）
2）图层绘制
渲染引擎会把图层的绘制拆分成很多小的绘制指令，即一个绘制列表
3）栅格化操作（raster）（栅格化线程）
主线程将绘制列表提交给合成线程；合成线程将图层划分为图块；最终图块会在GPU进程中生成位图。
5. 合成和显示栅格化操作完成后，合成器线程会生成一个绘制命令，浏览器进程根据位图绘制页面，最终呈现在了用户的浏览器上。