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

在前端开发领域，很多面试官经常挂在嘴边问“浏览器从输入URL到⻚面展示，这中间发生了什么?”我们不去想面试官有多了解浏览器工作原理，去问问自己有没有掌握浏览器相关工作原理。这道面试题比较全面考察应聘者知识的掌握程度，其中涉及到了网络、操作系统、Web等一系列的知识。

下面的图来自于学习极客时间《浏览器工作原理与实践》

从输入URL到⻚面展示完整流程示意图

这张完整的流程示意图，和本人之前看别人面试题解答的不一样，它不是为了面试而去答题，是从学习浏览器原理的角度去看待这个面试题，按照以往的面试题答案是从输入URL判断ip地址和域名，如果是域名就先解析域名获得ip地址然后找到目标服务器，再根据请求信息返回响应的信息给浏览器，然后浏览器开始渲染工作，最后渲染完成后呈现页面。对于不曾了解过浏览器原理的人来说，只能死记硬背答案，对于域名解析、ip寻址、http网络请求、渲染过程等一概不知。下面就从学习到的作者视角出发，从大的角度去分析这个问题。

从上图中看出，整个过程需要各个进程之间配合，进程职责具体如下：

• 浏览器进程主要负责用戶交互、子进程管理和文件储存等功能。
• 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。
• 渲染进程的主要职责是把从网络下载的HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的⻚面。因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻 击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么Chrome会让渲染进程运行在安全沙箱里，就是为了保证系统的安全。

关于什么是进程、什么是线程，看到一篇好文解释的不错，推荐大家阅读《从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理》

• 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
• 线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）
  一个进程就是一个程序的运行实例，当启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。

再回头看上面的图用蓝色背景标记的节点：

• 首先，用户从浏览器进程里输入请求信息;
• 然后，网络进程发起URL请求;
• 服务器响应URL请求之后，浏览器进程就又要开始准备渲染进程了;
• 渲染进程准备好之后，需要先向渲染进程提交⻚面数据，我们称之为提交文档阶段;
• 渲染进程接收完文档信息之后，便开始解析⻚面和加载子资源，完成⻚面的渲染。

从输入URL到⻚面展示

从几个核心节点具体再来细说一下

用户输入

当用户输入URL后浏览器开始加载地址，标签页上的图标变成加载状态，表示正在等待请求URL地址的响应，等到接收响应数据及提交文档阶段，页面的内容才会发生变化。

URL请求过程

地址URL和页面资源URL请求过程需要浏览器进程与网络进程通信，移交给网络进程处理。网络进程首先会查找本地缓存是否命中资源，如果是则直接返回，如果没有则进入网络请求流程，请求前的第一步是要进行DNS解析，以获取请求域名的服务器IP地址。如果请求协议是HTTPS，那么还需要建立TLS连接。
当IP地址和服务器建立TCP连接后，浏览器端会构建请求行、请求头等信息，并 把和该域名相关的Cookie等数据附加到请求头中，然后向服务器发送构建的请求信息。
服务器接收到请求信息后，会根据请求信息生成响应数据(包括响应行、响应头和响应体等信息)，并发给网络进程。等网络进程接收了响应行和响应头之后，就开始解析响应头的内容了。
根据响应头状态码200和字段Content-Type来处理返回的数据（如状态码为301、302则重定向重新建立连接），另外Content-Type是HTTP头中一个非常重要的字段， 它告诉浏览器服务器返回的响应体数据是什么类型，然后浏览器会根据Content-Type的值来决定如何显示响应体的内容。

准备渲染进程

一般来说，浏览器打开一个新⻚面采用的渲染进程策略就是：

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

提交文档

注意这里的“文档”是指URL请求的响应体数据

• “提交文档”的消息是由浏览器进程发出的，渲染进程接收到“提交文档”的消息后，会和网络进程建立
• 传输数据的“管道”。 等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。

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

  
  
  

  导航完成状态

这也就解释了为什么在浏览器的地址栏里面输入了一个地址后，之前的⻚面没有立⻢消失，而是要加载一会 儿才会更新⻚面。

渲染阶段

一旦文档被提交，渲染进程便开始⻚面解析和子资源加载了，关于这个阶段的完整过程，比较重要关乎到浏览器内核知识点，需另一篇学习笔记着重理解。

敬请期待下一篇学习笔记《浏览器页面的渲染流程》

参考资料：
极客时间课程《浏览器工作原理与实践》