在浏览器上输入URL到显示发生了什么

前言

相信很多人和我一样，在使用浏览器搜索或者浏览网页的时候，没有仔细的考虑在浏览器的地址栏输入网址或者搜索关键词之后，浏览器和服务器到底做了什么工作。下面是一个总体的过程，其中蓝色方块的过程会进行详细的解释。

用户输入阶段

1. 合成 URL：用户输入URL，浏览器会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容 + 默认搜索引擎合成新的URL；如果用户输入的内容符合URL 规则，浏览器就会根据 URL 协议，在这段内容上加上协议合成合法的 URL；

2. 加载：用户输入完内容，按下回车键，浏览器导航栏显示 loading 状态，但是页面还是呈现前一个页面，这是因为新页面的响应数据还没有获得

发起URL请求阶段

在发起URL请求阶段，包含许多涉及网络知识的方面，所以将这部分再进行一个拆分。

1. 构建请求：浏览器进程首先会构建请求行信息，然后通过通信进程将 URL 请求发送给网络进程；
2. 查找缓存：网络进程获取到 URL，先去本地缓存中查找是否有缓存资源，如果有则拦截请求，直接将缓存资源返回给浏览器进程，否则，进入网络请求阶段；
3. DNS解析：如果对www.baidu.com进行解析的话，首先会访问浏览器的缓存，然后访问系统缓存(host)，然后访问路由器缓存，一直溯源到顶级域名服务器.com，在这一串的过程中，如果成功查找到，就会将域名对应的IP 地址和端口号，如果没有指定端口号，http 默认 80 端口，https 默认 443。如果是 https请求，还需要建立TLS 连接；
4. 建立TCP 连接：TCP 三次握手与服务器建立连接，与服务器成功的连接以后就要进行数据的传输；
5. 发送 HTTP 请求：浏览器首先会向服务器发送请求行，它包含了请求方法、请求 URI和 HTTP 协议的版本；另外还会发送请求头，告诉服务器一些浏览器的相关信息，比如浏览器内核，请求域名、Cookie 等；如果需要传递参数，则还需要发送请求体；
6. 服务器处理请求：服务器首先返回响应行，包括协议版本和状态码，比如状态码 200 表示继续处理该请求；（如果是 301，则表示重定向，将会在响应头的 Locaiton 字段中加上重定向的地址信息，接下来浏览器获取这个地址，将会重新导航。）服务器也会向浏览器发送响应头，包含了一些信息，比如服务器生成返回数据的时间、返回的数据类型（JSON、HTML、流媒体等类型），以及服务器要在客户端保存的 Cookie 等；
7. 断开 TCP 连接：数据传输完成，正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive，TCP 就会一直保持连接。保持 TCP 连接可以省下下次需要建立连接的时间，提高资源的加载速度；

准备渲染进程阶段

1. 网络进程将获取到的数据包进行解析，根据响应头中的 Content-type 来判断响应数据的类型，如果是字节流类型，就将该请求交给下载管理器，该导航流程结束，不再进行；如果是 text/html类型，就通知浏览器进程获取到的是 HTML，应该准备渲染进程了；
2. 正常情况下每个浏览器的 tab 会对应一个渲染进程，但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话，那么新页面会复用父页面的渲染进程，否则就会创建一个新的渲染进程

提交文档阶段

1. 渲染进程准备好后，浏览器会发出 “提交文档” 的消息给渲染进程，渲染进程收到消息后，会和网络进程建立传输数据的 “管道”，文档数据传输完成后，渲染进程会返回“确认提交”的消息给浏览器进程；
2. 浏览器收到 “确认提交” 的消息后，会更新浏览器的页面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 web 页面，此时的 web 页面是空白页；

页面渲染阶段

收到文档以后，浏览器的渲染过程为：解析HTML生成DOM树 →解析css，生成css规则树→将DOM树和css规则树相结合生成渲染树→从根节点开始计算节点的精确坐标，将渲染树生成布局渲染树→使用UI渲染引擎将布局渲染树绘制到页面上。