最近想重新系统地整理一下前端的知识，因此写了这个专栏。我会尽量写一些业务相关的小技巧和前端知识中的重点内容，核心思想。
前言
上一篇文章我们讲述了浏览器的进程架构（点击回顾），今天我们来讲一下，浏览器的导航流程。顺道讨论一下一道常见的面试题——“在浏览器里，从输入 URL 到页面展示，这中间发生了什么？”
要完成这个过程是需要多个进程各施其职的，在上篇文章我们列出了浏览器中的几种进程，大部分的在本文都会用到。进程之间通过IPC通讯，这个有兴趣的朋友可以自行查阅。
输入URL
第一步是输入URL，用户在输入URL点击跳转或者按回车之后。其实一步是浏览器会判断我们是在搜索，还是想要导航页面。
- 如果是搜索，浏览器会根据用户设置或者默认的搜索引擎拼接成搜索url，再导航页面。例如我的浏览器设置的搜索引擎是bing，当我在url栏输入“浏览器”确认之后。会看到浏览器会把url处理成
https://cn.bing.com/search?q=浏览器&.... // 后面一串内容
- 如果判断输入内容符合 URL 规则，那么地址栏会根据规则，合成为完整的 URL（如帮你补充遗漏的协议）。如我输入的是www.baidu.com，浏览器会处理为www.baidu.com/
离开当前页
在确认导航之后，浏览器需要离开当前页，在离开之前会调用当前页面的beforeunload事件。这是页面最后的机会，页面可以在这个事件中执行一些数据清理工作，保存表单，或者挽留用户等操作。这个事件可以中断导航行为。
更多关于beforeunload可以看：developer.mozilla.org/zh-CN/docs/…
如果页面没有监听beforeunload事件或者用户同意继续导航之后，我们会看到浏览器已经出现加载的符号了，可是页面窗口显示的仍然是前一个页面。是因为浏览器需要等待【提交文档阶段】，页面内容才会被替换。
URL请求
出现加载符号之后浏览已经发出请求了，这里会出现第一次的进程通讯，浏览器进程把URL发送给网络进程，网络进程发起真正的请求。
然而在请求发送之前，其实还有一个环境，就检查是否有本地缓存，如果有本地缓存，就直接返回资源给浏览器进程，请求就没有发送出去。
如果本地缓存中，没有资源，就正式进入网络请求流程。第一步是进行DNS解析，用域名对应的服务器的真正IP。
获取IP之后，就可以建立TCP连接了（三次握手），当然如果用的是https协议还要建立TLS连接。网络进程构建如请求头（连同cookie等），请求体等信息，向服务端发送http请求。服务端收到请求之后解析，处理，最后返回响应数据给网络进程。网络进程收到响应数据之后，解析内容。
重定向
网络进程解析响应数据之后并不是马上交给浏览器进程，而是先看响应头的状态码是不是301或者302等。如果是的话，说明需要重定向。网络进程从响应头的location字段中找到要重定向的地址，然后重新发送请求，导航动作又重头开始。
响应数据类型处理
如果响应状态码是成功的，且不需要重定向，浏览器就可以继续处理了。网络进程把响应头内容发送给浏览器进程，因为不是所有的响应数据都可以渲染成页面，所以网络进程不必一次把所以响应数据交给浏览器进程。
浏览器会根据响应头中的Content-Type字段判断渲染方式。如果是application/octet-stream，浏览会让下载管理器执行下载工作，并不会开始页面渲染。
像一些别的类型，浏览器也会作对应的后续操作，这里就不展开了。如果Content-Type是Text/html。页面正式开始渲染。
准备渲染进程
终于来到了渲染阶段了，要渲染页面，根据上一篇文章中我们知道浏览器需要一个新的渲染进程。但这里还要注意，新打开的页面是不是“同一站点”。如果是则复用之前的父页面渲染进程，如果不是就会创建一个新的渲染进程。
提交文档
【提交文档】指的是在决定渲染页面，且有了对应的渲染进程之后，浏览器进程把网络进程收到的HTML资源交给渲染进程。
- 渲染进程收到“提交文档”的消息后，会和网络进程建立数据传输的“管道”
- 等数据传输完成之后，渲染进程返回“确认提交”的消息给浏览器进程
- 浏览器进程收到之后，便更新浏览器界面的状态（包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面等）
这也就解释了为什么在浏览器的地址栏里面输入了一个地址后，之前的页面没有立马消失，而是要加载一会儿才会更新页面。
渲染阶段
其实到这里“导航流程”已经结束了，接下来就是页面的渲染阶段了。这是下一篇文章的内容。渲染进程会解析html，生成dom，cssom，render树，layout树等。最后渲染页面，一旦渲染进程完成渲染之后，会通知浏览器进程，浏览器进程就会把标签上的加载符号停止。
图解
总结
“在浏览器里，从输入 URL 到页面展示，这中间发生了什么？”是业内大神很爱问的问题，因为这个问题可以延申得很深很广。
像网络部分可以问TCP的三次握手，四次挥手，https协议等。缓存部分可以问缓存方式，协商方式等。渲染部分就可以问优化方案等。要做到真正可以熟练的应对这道题，就必需熟练掌握各类知识。
而文本重点在浏览器的导航流程，希望对大家有帮助。下一篇文章会讲述浏览器的页面渲染机制。
参考
《浏览器工作原理与实践》——李兵
