深入剖析从输入URL到页面显示过程原理

前言

说说从输入 URL 到页面显示的过程，这是一个在面试中经常会被问到的问题，此问题能比较全面地考察应聘者知识的掌握程度。其中涉及到了网络、操作系统、WEB 等一系列的知识。

以 Chrome 浏览器为例，目前的 Chrome 浏览器有以下几个进程：

浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。

渲染进程。主要职责是把从网络下载的 html、javascript、CSS、图片等资源解析为可以显示和交互的页面。

GPU 进程。其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。

网络进程。主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，后面才独立出来，成为一个单独的进程。

插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

在了解了浏览器有哪些进程，以及它们各自的职责之后，结合这些进程，我们再来分析从输入 URL 到页面显示的过程。

1. 用户输入

如果输入的是内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。

如果输入的是 URL，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL。

2. URL 请求过程

浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程，网络进程接收到 URL 请求后，会在这里发起真正的 URL 请求流程。那具体流程是怎样的呢？

网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程。这请求前的第一步是要进行 DNS 解析，以获取请求域名的服务器 IP 地址。如果请求协议是 https，那么还需要建立 TLS 连接。

接下来就是利用 IP 地址和服务器建立 tcp 连接 (三次握手)。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。

服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程。等网络进程接收了响应行和响应头之后，就开始解析响应头的内容了。

Content-Type 是 Http 头中一个非常重要的字段， 它告诉浏览器服务器返回的响应体数据是什么类型，然后浏览器会根据 Content-Type 的值来决定如何显示响应体的内容。

如果 Content-Type 字段的值被浏览器判断为下载类型，那么该请求会被提交给浏览器的下载管理器，同时该 URL 请求的导航流程就此结束。但如果是 HTML，那么浏览器则会继续进行导航流程。

3. 准备渲染进程

如果协议和根域名相同，则属于同一站点。

但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话，那么新页面会复用父页面的渲染进程。

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

4. 提交文档

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

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

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

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

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

5. 渲染阶段

一旦文档被提交，渲染进程便开始页面解析和子资源加载。

渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。

渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。

创建布局树，并计算元素的布局信息。

对布局树进行分层，并生成分层树。

为每个图层生成绘制列表，并将其提交到合成线程。

合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。

合成线程发送绘制图块命令 DrawQuad 给浏览器进程。

浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

最后

以上就是笔者对这一常考面试题的一些总结，对于其中的一些具体过程并没有详细地列举出来，更多关于输入URL到页面显示过程的资料请关注其它相关文章！