深进剖析从输进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到页面显示过程的资料请关注其它相关文章！