【UI】从输入URL到页面展示，中间都发生了什么？

[fayeah]

注意各个进程的关系和工作内容。先看一张流程图：

用户输入

浏览器会先判断关键字是搜索内容，还是有效的URL。

1. 如果是搜索内容，那么会利用浏览器默认的搜若引擎合成带有搜索关键词的URL，以google浏览器为例：
2. 如果输入内容符合URL规则，浏览器加上协议合成完整的URL：http://github.com/
3. beforeUnload，在输入关键字并回车之后，浏览器会给当前页面一个执行beforeUnload的机会，是要清除当前页面的数据还是给用户提示有些数据可能会丢失。
4. 继续后面的流程，但是页面还是显示当前的页面，直到文档提交之后，页面才会更新。

URL请求

1. 进程间通讯，首先浏览器进程会通过进程间通讯（IPC）将URL发送到网络进程；
2. 查缓存，网络进程会先查找有没有缓存，如果有缓存，直接返回给浏览器进程；如果没有查到缓存，直接进入网络请求，我有一篇博客专门写了网络请求是怎么一回事（https://github.com/fayeah/blogs/issues/25）。会进行DNS解析，找到服务器的IP地址；如果协议是**HTTPS**，还需要建立TLS连接；
3. 是否重定向，浏览器 接收到服务器的响应之后，会根据状态做相应的操作。如果返回301/302，那么表示浏览器需要重定向到其他的URL，从Location里面读取目标URL；否则继续处理该请求。
4. 响应体数据类型，浏览器根据不同类型做不同处理，其中判断类型的字段是Content-Type，如果是application/octet-stream，表示是一个下载类型，请求会交给下载管理器进行处理，导航结束；如果是text/html，导航继续。
5. 提交文档
   • 当浏览器进程接收到网络进程的响应头数据之后，向渲染进程发起“提交文档”的消息；
   • 渲染进程收到“提交文档”的消息之后，会和网络进程建立下载数据的“通道”；
   • 当数据传输完毕，渲染进程通知浏览器进程“确认提交”；
   • 浏览器进程收到“确认提交”的消息之后更新浏览器界面：URL，安全状态并更新web页面；
6. 渲染，一旦文档被提交，渲染进程开始页面解析和字资源加载。至此，整个URL到页面都发生了什么，已经完整地走了一遍。

解释“同一站点”

“同一站点”定义为根域名（例如，geekbang.org）加上协议（例如，https:// 或者 http://），还包含了该根域名下的所有子域名和不同的端口， 默认情况下，没打开一个页面会开启一个新的渲染进程。但是对于同一站点，他们会共享一个渲染进程。但这里要注意的是，必须从一个站点打开另外一个站点，新的站点才会复用父页面的渲染流程。

参考：https://time.geekbang.org/column/article/117637