从url输入到页面渲染：导航流程

从用户输入url到页面显示的过程涉及到网络协议，web安全、浏览器渲染等等内容，一直是面试官考查的重点，事实上从用户输入url地址到页面渲染的过程主要可以分为两个部分：一是导航，也就是从用户输入url到页面开始解析；二是渲染，也就是浏览器端将获得的JavaScript 、css、html解析并渲染最终展示页面。本篇将主要分析导航流程。

一、用户输入

用户在地址栏输入时浏览器会判断用户输入是搜索内容还是请求的url:

• 如果是搜索关键字，地址栏会根据浏览器默认的搜索引擎来合成新的带搜索关键字的url。
• 如果用户输入符合请求url的格式，比如www.baidu .com，那么地址栏会根据规则添加协议合并成完整的url：https://www.baidu.com。

需要注意的是当用户在地址栏输入并按下回车键后首先会触发当前页面的beforeunload事件，如果当前页面监听了beforeunload事件那么可以在beforeunload的事件监听函数里询问用户是否要离开当前页面，因此如果当前页面没有监视beforeunload事件或者在监听beforeunload的事件处理函数里没有取消导航，那么浏览器便开始地址栏最后生成url地址的加载。

二、请求url

在这一步浏览器主线程会通过IPC(进程间通信)把url请求发送给网络进程，网络进程会真正的发起url请求流程，具体流程如下：
1、判断资源是否已缓存：首先网络进程会查找本地缓存是否缓存了请求资源，如果本地存在缓存资源，那么直接返回资源给浏览器主进程，如果本地缓存不存在请求资源，那么网络进程会正式开始网络请求流程。
2、获取IP地址以及端口号：正式网络请求流程的第一步就是通过DNS解析获取请求域名对应的服务器地址。此时需要注意DNS缓存，即如果某个域名解析过了，那么浏览器会缓存解析的结果，以供下次查询时直接使用，这样也会减少一次网络请求。拿到IP地址后就需要获取端口号，通常情况下如果URL没有特别指明端口号那么HTTP协议默认的就是80端口。
3、等待TCP队列：接下来我们需要根据IP地址以及端口号建立与请求服务器之间的TCP连接（如果请求协议是HTTPS那么需要先建立TLS连接，HTTPS其实是HTTP+SSL/TLS两部分组成，也就是在HTTP上又加了一层处理加密信息的模块），这儿我们需要解释一下HTTP协议和TCP协议之间的关系：浏览器使用HTTP协议作为应用层协议，用于封装请求的文本信息，并使用TCP/IP协议作为传输层协议将请求文本信息发送到网络上，因此在HTTP工作开始之前，浏览器需要通过TCP协议与服务器建立连接。
但事实上在建立TCP连接之前请求还需要排队等待，Chrome有个机制，同一个域名同时最多只能建立6个TCP连接，因此如果在同一个域名下同时有10个请求发生，那么其中4个请求会进入排队等待状态，直至进行中的请求完成。
4、建立TCP连接：这个阶段是通过“三次握手”来建立客户端和服务器之间的连接，TCP是面向连接的通信传输协议，面向连接是指在数据通信开始之前先做好两端之间的准备工作。
5、发送请求信息：一旦建立了TCP连接，浏览器就可以和服务器通信了，而HTTP正是在这个通信过程中负责请求文本信息的封装并将请求文本发送到网络上，事实上HTTP请求报文由三部分构成：

• 请求行：包括了请求方法、请求URI(Uniform Resource Indetifier)和HTTP版本协议，展示基础请求信息。

GET /md?articileId=104327800 HTTP/1.1

• 请求头：即HTTP的报文头，用于把浏览器相关一些基础信息告诉服务器，比如包含了浏览器所使用的操作系统、浏览器内核等信息，以及当前请求的域名信息等等，同时浏览器端会将与该域名相关的Cookie等数据附加到请求头中。

Host: editor.csdn.net
Connection: keep-alive
Pragma: no-cache
Cache-control: no-cache
Upgrade-insecure-Requests: 1
User-Agent: Chrome/74.0.3729.157 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml
Referer: https://editor.csdn.net/md
Accept-Encoding: gzip,deflate,br
Accept-Language: zh-CN,zh;
Cookie: _ga=1848299.ewueu363948

• 请求体：即HTTP的报文体，用于承载请求参数。

6、接受响应信息：服务器在接收并处理来自浏览器的请求信息后会返回一个HTTP的响应信息，响应信息也包括三部分：

• 响应行：包括协议版本和状态码，HTTP的响应状态码以“清晰明确”的语言告诉客户端本次请求的处理结果，其由5段组成：

1xx 消息，一般是告诉客户端，请求已经收到了，正在处理，别急…
2xx 处理成功，一般表示：请求收悉、我明白你要的、请求已受理、已经处理完成等信息.
3xx 重定向到其它地方。它让客户端再发起一个请求以完成整个处理。
4xx 处理发生错误，责任在客户端，如客户端的请求一个不存在的资源，客户端未被授权，禁止访问等。
5xx 处理发生错误，责任在服务端，如服务端抛出异常，路由出错，HTTP版本不支持等。

• 响应头：响应头包含了服务器自身的一些信息，比如服务器生成返回数据的时间、返回的数据类型（JSON、HTML、流媒体等类型），以及服务器要在客户端保存的Cookie等信息。
• 响应体：通常响应体包含了HTML的实际内容。

具体如下图所示：

在此我们需要特别注意一下重定向的情况，即当响应行返回状态码为301时浏览器需要重定向到另一个地址，而需要重定向的地址正是包含在响应头的Location字段中的地址，并使用该地址重新导航，这就是一个完整重定向的流程。

7、断开连接：通常情况下一旦服务器向客户端返回了请求数据，客户端就会通过“四次挥手”关闭TCP连接，不过如果浏览器或者服务器在其头部信息中加入了：

Connection: Keep-Alive

那么TCP连接在发送后将仍然保持打开状态，这样浏览器就可以继续通过同一个TCP连接发送请求。保持TCP连接可以省去下次请求时需要建立连接的时间，提升资源加载速度。

三、响应数据处理

浏览器在接收到服务器返回的响应信息后首先会查看响应头中的Content-Type字段来判断响应体数据的类型，然后浏览器会根据Content-Type的值来决定如何显示响应体的内容。如果Content-Type的值为application/octet-stream类型，这表明数据类型为字节流，那么通常情况下浏览器会按照下载类型来处理此类请求，将请求提交给浏览器的下载管理器，如果Content-Type的值为text/html，那么浏览器会继续进行导航流程，由于Chrome的页面渲染是运行在渲染进程中的，所以接下来就需要准备渲染进程了。
默认情况下每打开一个页面浏览器就会创建一个新的渲染进程。但是如果当打开的页面属于同一站点那么多个页面会同时运行在一个渲染进程中（同一站点即根域名与协议相同），事实上这跟Chrome默认的process-per-site-instance策略有关，也就是当如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话那么新页面会复用父页面的渲染进程。
但是当渲染进程准备好以后还不能立马进入文档解析阶段，因为此时的文档数据还在网络进程中，并没有提交给渲染进程，下次下一步就进入了提交文档阶段。

四、提交文档

这个阶段是指浏览器进程将网络进程接收到的HTML数据提交给渲染进程，具体流程如下：

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

到此为止从用户在地址栏输入到页面渲染过程中的导航阶段已经全部结束了，接下来便是渲染阶段，我将在我的下一篇博客进行总结。