这是一道非常常见的面试题。其中涉及到了网络、操作系统、Web 等一系列的知识。
从输入 URL 到页面展示完整流程示意图(核心节点用蓝色背景标注)：
从图中可以看出，整个流程需要各个进程之间的配合。开始之前，先让我们复习一下各个进程的主要作用：
- 浏览器进程：主要负责用户交互、子进程管理和文件储存等
- 网络进程：面向渲染进程和浏览器进程等提供网络下载功能
- 渲染进程：是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面
因为渲染进程所有的内容都是通过网络获取的，可能会存在恶意代码对系统进行攻击，所以运行在渲染进程中的代码是不被信任的。这也是为什么Chrome会让渲染进程运行在安全沙箱中。
你也可以先回顾之前的这篇文章，来全面的了解浏览器多进程架构00 浅谈Chrome架构发展史 - 掘金 (juejin.cn)
回顾完浏览器多进程架构之后，我们可以简单概括一下整个流程：
- 用户在浏览器进程中输入请求信息
- 网络进程发起URL请求
- 服务器响应URL请求后，浏览器进程开始准备渲染进程 (读取到响应头中的
Content-type就开始准备了)- 渲染进程准备完毕，向渲染进程提交页面数据，称之为提交文档
- 渲染进程接受完文档信息，开始解析页面和加载子资源，完成页面渲染
其中，从浏览器进程发送URL到页面开始渲染的过程叫做导航
接下来，我们对每个过程进行逐一分析。
1. 用户输入
用户输入后，浏览器进程会首先处理输入信息，判断用户输入是为了搜索内容还是还是请求URL
如果是搜索内容，则会使用搜索引擎来合成带搜索关键字的URL
如果判断输入内容符合 URL 规则，则浏览器会根据规则给这段内容加上协议，合成完整的URL，比如输入github.com/cuifanfan，会合成完整的URL：github.com/cuifanfan
用户输入关键字后浏览器会进入这个状态：
从图中可以看出，当浏览器刚开始加载一个地址之后，标签页上的图标便进入了加载状态。页面没有发生替换进入github页面，在提交文档阶段页面内容才会被替换
2.URL请求过程
上一步我们得到了浏览器进程合成的符合规则的URL，下一步便要对该URL发起请求。
浏览器会把合成的URL通过进程间通信(IPC)把URL请求发送到网络进程。
然后网络进程会查找本地缓存，缓存有资源，则直接返回资源给浏览器进程，请求结束。没有资源就进入网络请求流程
网络请求第一步是要进行DNS解析，得到IP地址，如果请求协议是HTTPS，还要建立TLS连接
接下来利用IP和服务器建立TCP连接，连接建立之后，浏览器会开始构建请求行、请求头等信息，并把该域名相关的Cookie等数据附加到请求头当中，然后向服务器发送构建的请求信息。
服务器会根据请求信息生成响应数据(包含响应行、响应头、响应体)，并发送给网络进程，随后由网络进程开始进行解析(实际上当网络进程解析到响应头中的Content-type的时候，浏览器进程就开始准备渲染进程了)
网络进程中常见的几种情况：
- 重定向：当网络进程解析响应行遇到301、302之类的状态码，便会对Location中的URL重新发起一次网络请求
如果响应行是 200，才表示浏览器可以继续处理该请求。
-
响应数据类型处理：
服务器响应头中的
Content-Type告诉浏览器响应体数据是什么类型，浏览器根据Content-type的值决定怎么处理比如
Content-Type: text/html就是告诉浏览器响应数据是一个HTML文本，浏览器将会准备渲染进程来处理。Content-Type:application/octet-stream显示数据是字节流类型的，通常情况下，浏览器会按照下载类型来处理该请求。
3. 提交文档
在网络进程中解析服务器响应头遇到Content-Type的时候，浏览器进程就开始准备渲染进程了。
但此时的响应体数据还在网络进程中。
所以，浏览器进程会向渲染进程发出提交文档的消息，渲染进程收到“提交文档”的消息之后，会和网络进程建立传输数据的“管道”。
等文档数据传输完成，渲染进程会返回“确认提交”的消息给浏览器进程
浏览器收到“确认提交”消息，会更新浏览器界面状态，包括安全状态、地址栏的URL、前进后退的历史状态，然后更新web页面。
更新之后的浏览器状态：
到此，导航算是正式结束了，之后就要开始进行渲染了。
4. 渲染阶段
一旦文档被提交，渲染进程便开始页面解析和子资源加载了。
页面生成完成之后，渲染进程会发送消息给浏览器进程，浏览器接受到消息后，标签图标上的加载动画才会停止
至此，一个完整的页面就生成了。
梳理总结：
-
用户输入URL并回车
1.1 处理输入信息合成URL
- 搜索内容 ---> 使用搜索引擎合成带关键字的URL
- 内容符合URL规则 ---> 添加协议合成完整的URL
-
浏览器进程发送URL到网络进程
2.1 解析URL
- DNS解析获得IP地址
2.2 查看缓存
- 有缓存 ---> 跳到2.5
- 三次握手 ---> 建立TCP连接
2.3 发送HTTP请求
-
拼接本地Cookie
-
收到响应数据
- 重定向 ---> 去Location重新请求 ---> 重复2.3
- 解析到Content-Type ---> 浏览器进程准备渲染进程
2.4 提交文档
- 与网络进程建立管道传送响应数据
- 传输完成 向浏览器进程确认文档被提交
2.5 页面解析和加载子资源
- 向浏览器进程确认页面渲染完成
更多有关页面渲染的内容，请看下节：
