从 URL 输入到页面展现的全过程

• 解析用户输入内容
• 查看是否命中强缓存
• DNS解析
• 建立TCP连接（三次握手）
• 发送HTTP请求（查看是否名字协商缓存，有304，无200）并接受对应的响应报文
• 关闭TCP连接（四次挥手）
• 提交文档阶段
• 浏览器渲染

一、用户输入阶段

用户在地址栏输入内容之后，浏览器会首先判断用户输入的是合法的URL还是搜索内容，如果是搜索内容就合成URL，如果是合法的URL就开始进行加载。

1. 搜索关键字

• 若搜索的内容为关键字，浏览器会对其中不安全字符编码进行转义，使用UTF-8编码，也不能有特殊符号如 ? = 等
• URL对非安全字符转义时使用的是百分号编码，因为它使用百分号加上两位十六进制数表示，每一个中文会被转义成三个字符。
• encodeURI 和 encodeURIComponent 都是用于对URL编码的，唯一区别是 = ? & ; /这类URI组成符号在 encodeURI 不会被编码，但在 encodeURIComponent 中统统会。

2. 合法的URL

如果输入的是合法的URL，说明我们希望通过URL查找到对应服务器上的资源，实质就是查找该域名对应的IP的一个映射关系。

二、查找强制缓存

在有效期内缓存的资源可以被直接使用。 memory cache 或者 disk cache 前者从内存取，后者从磁盘取。通常来说：刷新页面会使用内存缓存，关闭后重新打开会使用磁盘缓存。

• 浏览器首次加载资源，服务器返回200，浏览器不仅会把资源下载下来，还会把responce中的header(date属性用于资源请求时间差)一并缓存下来。
• 下次加载资源时，首先要经过强缓存的处理。强缓存是利用 http头 的 Expires 和 Cache-Control 两个字段来控制的。强缓存中，请求再次发出时，浏览器会根据其中的 Expires 和 Cache-Control 判断目标资源是否 “命中” 强缓存，是则直接从缓存中获取资源，不会再与服务器通信。其中 Cache-Control 的优先级最高，如果 Cache-Control：no-cache，就直接进入到协商缓存的步骤了，如果 Cache-Control：max-age=xxx,就会先比较当前时间和上一次返回 200 时的时间差，如果没有超过 max-age，命中强缓存，不发请求直接从本地缓存读取该文件（这里需要注意，如果没有 Cache-Control，会取 Expires 的值，来对比是否过期），过期的话会进入下一个阶段，协商缓存。

三、DNS解析

DNS 解析目的是找到目标服务器的 IP 地址，才能进行后续的数据请求等操作

1. 先找浏览器缓存
2. 找操作系统hosts文件的缓存
3. 以上两步都没找到就要进行网络请求，去本地DNS付服务器（local DNS）进行查找，如果本地 DNS 服务器的缓存中存在该映射关系那么就直接返回，否则继续后续步骤。
4. 本地域名服务器作为代理服务器，向它上面的根域名服务器建立 UDP 连接后发出请求，根域名服务器返回 查询域的主域名服务器（即 gTLD，如： .com .cn 这种顶级域名）。
5. 本地域名服务器拿到后向 gTLD 发请求， gTLD 是可以找到你想查找域名的 Name Server 地址的，本地 DNS 服务器向 Name Server 地址发送请求 ，拿到该域名对应的 IP 和 TTL（time to live，即 域名解析结果在DNS服务器中存活的时间 ），然后将结果显示自己做一个缓存（根据TTL设置映射存活时间），然后返回给浏览器，DNS解析结束。

Name Server 概念
服务商提供的服务器地址，比如你在阿里云注册的域名，那查找就是去阿里云的服务器查，因为你是去域名提供商的服务器发请求，那肯定是能拿到对应的ip地址的

四、建立 TCP 连接

1. 首先会等待 TCP 队列

chrome有个机制，同一域名最多支持建立六个 TCP 连接，如果超过这个数量的连接就必须进入排队等待状态。

知识巩固
对于多路复用，http 1.1 采取建立多个 TCP 连接，http 2.0 采用建立一个 TCP 连接并行发起多个请求

2. 开始建立 TCP 连接

通过 TCP 三次握手与服务器建立连接，进行数据传输。

A：我要跟你建立连接，你那边接受得到我的请求吗？
B：接收到啦！没问题，但得向你确认下，证明这是你真实的要准备跟我建立的连接，而不是你很久之前发过的
A：对，没问题，这是我刚发给你的

五、发送 HTTP 请求并接受相应的结果

先看是否命中协商缓存

• 有则返回状态码 304 并更新资源标识符
• 没有则返回状态码 200 和新资源

超过有效期的，则携带缓存的资源标识向服务端发起请求，校验是否能继续使用，如果服务端告诉我们，可以继续使用本地存储，则返回 304，并且不携带数据；如果服务端告诉我们需要用更新的资源，则返回 200，并且携带更新后的资源和资源标识缓存到本地，方便下一次使用。

然后接收对应响应报文

服务器首选返回相应行、包括协议版本和 状态码，然后会返回响应头包含返回的数据类型，服务器要在客户端保存的 Cookie 等，一般来说是返回 HTML、CSS、JS、Image 文件。

对于是否命中协商缓存

• 协商缓存阶段，则向服务器发送 header 带有 if-None-Match 和 if-Modified-Since 的请求，前者优先级大于第二个，服务器会优先比较 if-None-Match 和 Etag 字段，若相同，命中协商缓存，返回304；否则，返回新的资源文件带上新的 Etag 和 200。
• 协商缓存第二个对应关系是 If-Modified-Since 和 Last-modified ，如果客户端发送的 If-Modified-Since 的值跟服务器获取文件最近改动，相同则命中协商缓存，返回304 ；不一致则返回新的 Last-Modified 和文件 并返回200；

为什么协商缓存中 Etag 优先级大于 Last-modified ？

因为后者是标识着资源的最后修改时间(不准确，因为修改了文件并不代表文件内容发生改变，可能改变后又撤销了)，前者可以理解为是一个资源唯一标识符，是服务器通过内置算法根据文件内容生成的 hash 值，所以更准确，当然，因为计算所以性能消耗更大，不太推荐使用 Etag

六、关闭 TCP 连接

数据传输完成后，通过四次挥手来断开连接。

A：我要断开连接啦
B：好的，你先断开，等我把我这边的数据传完给你我再断
过了一会儿，等B传完后
B：我传完啦，我也可以断开跟你的连接了，听到了吗
A：知道你也断开连接啦，你先断，我过 2MSL 再断，不然怕你听不见我跟你说的话

七、提交文档阶段

1. 网络进程 将获取的数据进行解析，根据响应头的 Content-Type 来判断响应数据的类型，如果是字节流类型，就将该请求交给下载管理器去下载，如果是 text/html 类型，就通知浏览器进程获取到的是 HTML，准备渲染进程。
2. 一般情况下浏览器一个 tab 页面对应一个渲染进程，如果从当前页面打开的新页面并且属于同一站点，这种情况会复用渲染进程，其他情况会默认创建新的渲染进程。
3. 渲染进程准备好之后，浏览器会发出提交文档的消息给 渲染进程 ，渲染进程收到消息后会和 网络进程 建立数据传输的管道（IPC），文档数据传输完成后，渲染进程会返回曲儿提交的消息给 浏览器进程
4. 浏览器收到确认提交的消息后，会更新浏览器的页面状态，包括安全状态，地址栏的URL，前进后退的历史状态，并 更新 web 页面为空白

八、浏览器渲染阶段

浏览器渲染过程，推荐观看：【干货】浏览器是如何运作的？_哔哩哔哩_bilibili

待续...