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

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

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

这张完整的流程示意图，和本人以前看别人面试题解答的不同，它不是为了面试而去答题，是从学习浏览器原理的角度去看待这个面试题，按照以往的面试题答案是从输入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来处理返回的数据（如状态码为30一、302则重定向从新创建链接），另外Content-Type是HTTP头中一个很是重要的字段， 它告诉浏览器服务器返回的响应体数据是什么类型，而后浏览器会根据Content-Type的值来决定如何显示响应体的内容。

准备渲染进程

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

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

提交文档

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

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

  

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

渲染阶段

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

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

参考

极客时间课程《浏览器工做原理与实践》