从输入URL到页面展示，这中间发生了什么？

这是一道经典的面试题，但是很多人的回答却不尽完美，但是这道题却能比较全面地考察应聘者知识的掌握程度，其中涉及到了网络、操作系统、Web 等一系列的知识。我曾经也遇到过这个问题，于是我花费了一些时间对这个问题进行了整理，以下是我的整理结果。

从URL到页面展示流程.png

1.用户输入，按enter键

• 如果用户输入的是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。
• 如果用户输入的是url地址，地址栏会根据规则，把这段内容加上协议，合成为完整的 URL。

2.URL请求过程

• 浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程，网络进程接收到 URL 请求后，会在这里发起真正的 URL 请求流程。
• 网络进程会查找本地缓存是否缓存了该资源。
  如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程。
• DNS解析，获取请求域名的服务器 IP 地址，利用 IP 地址和服务器建立 TCP 连接。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。
• 服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程，网络进程接收了之后，就开始解析响应头的内容了。

3.网络进程解析响应流程

检查状态码

• 如果是301/302，则需要重定向，从Location自动中读取地址，重新进行第4步。
• 200响应处理：检查响应类型Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行，如果是html则通知浏览器进程准备渲染进程准备进行渲染。
  Content-Type 是 HTTP 头中一个非常重要的字段， 它告诉浏览器服务器返回的响应体数据是什么类型

4.渲染进程

• 通常情况下，打开新的页面都会使用单独的渲染进程；
• 如果从 A 页面打开 B 页面，且 A 和 B 都属于同一站点的话，那么 B 页面复用 A 页面的渲染进程；如果是其他情况，浏览器进程则会为 B 创建一个新的渲染进程。

5.提交文档

• “提交文档”的消息是由浏览器进程发出的，渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”。
• 等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。
• 浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

6.渲染阶段

• 浏览器不能直接理解 HTML 数据，所以第一步需要将其转换为浏览器能够理解的 DOM 树结构；
• 生成 DOM 树后，还需要根据 CSS 样式表，来计算出 DOM 树所有节点的样式；
• 最后计算 DOM 元素的布局信息，使其都保存在布局树中。
• 对布局树进行分层，并生成分层树。
• 为每个图层生成绘制列表，并将其提交到合成线程。
• 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
• 合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
• 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。