标签：

（1）浏览器解析 URL

为了能让我们的知识层面看起来更有深度，我们应该考虑下面两个问题了：

从浏览器输入 URL 到渲染成功的过程中，究竟发生了什么？

浏览器渲染过程中，发生了什么，是不是也有重绘与回流？

OK，兴致来了，我们就先从 浏览器解析 URL 看起，先来看看当用户输入 URL，到浏览器呈现给用户页面，经历了以下过程：

版本 A：

用户输入 URL 地址。

对 URL 地址进行 DNS 域名解析。

建立 TCP 连接（三次握手）。

浏览器发起 HTTP 请求报文。

服务器返回 HTTP 响应报文。

关闭 TCP 连接（四次挥手）。

浏览器解析文档资源并渲染页面。

讲到这里，突然想起一个对话：

学生：“老师，这门课的考试重点是什么？”

老师：“全都是重点！”

enm...老师会不会被打我不知道，但是 jsliang 这样写会被怼我就清楚，所以，咱还是结合上面的图，进一步勾勒我们的结构：

很好，jsliang 感觉自己的画图技术又进了一步~

①：虽然很感激网上有那么多的文章可以参考，但是在我查了二十来篇文章后，jsliang 觉得这部分十有八九有问题撒，问了些小伙伴，它们有的说对，有的说错。不过，不妨碍小伙伴们继续往下看哈。
②：为了避免出篓子，下面贴出另外一个版本，小伙伴们可以在评论区说出你支持哪个版本哈：

版本 B

用户输入 URL 地址。

对 URL 地址进行 DNS 域名解析。

进行 TCP 连接。

进行 HTTP 报文的请求与响应。

浏览器解析文档资源并渲染页面。

在这里我们可以清晰的了解到从 用户输入 URL，到浏览器呈现给用户页面，经历了哪些过程。

那么剩下的就简单了：

什么是 DNS 解析，它是怎么个流程？

什么是 TCP 三次握手，什么是 TCP 四次挥手，它们的流程是怎样的？

浏览器解析文档资源并渲染页面是个怎样的流程？

Let‘s go~ 逐步完成下面三个知识点！

参考文献 1：《网页解析的全过程(输入url到展示页面)》
参考文献 2：《浏览器渲染页面过程剖析》

（2）DNS 域名解析

首先，我们解决第一个问题：

什么是 DNS 解析，它是怎么个流程？

DNS（Domain Name System）是 域名系统 的英文缩写，提供的服务是用于将主机名和域名转换为 IP 地址的工作：

域名： <---> DNS <---> IPV4：119.147.15.13

IPV4 是造假的，仅用来说明 DNS 解析后能返回 IP 地址

所以，当用户在浏览器输入 时，DNS 经历了以下步骤：

浏览器根据地址，在自身缓存中查找 DNS（域名服务器） 中的解析记录。如果存在，则直接返回 IP 地址；如果不存在，则查找操作系统中的 hosts 文件是否有该域名的 DNS 解析记录，如果有就返回。

在条件 1 中的浏览器缓存或者操作系统的 hosts 文件中都没有这个域名的 DNS 解析记录，或者已经过期，则向域名服务器发起请求解析这个域名。

先向本地域名服务器中请求，让它解析这个域名，如果解析不了，则向根域名服务器请求解析。

根服务器给本地域名服务器返回一个主域名服务器。

本地域名服务器向主域名服务器发起解析请求。

主域名服务器接收到解析请求后，查找并返回域名对应的域名服务器的地址。

域名服务器会查询存储的域名和 IP 的映射关系表，返回目标 IP 记录以及一个 TTL（Time To Live）值。

本地域名服务器接收到 IP 和 TTL 值，进行缓存，缓存的时间由 TTL 值控制。

将解析的结果返回给用户，用户根据 TTL 值缓存在本地系统缓存中，域名解析过程结束。

看文字总是难以理解的，跟着 jsliang 画张图过一遍，就感觉清晰了：

（3）TCP 三次握手与四次挥手

然后，我们解决第二个问题：

什么是 TCP 三次握手，什么是 TCP 四次挥手，它们的流程是怎样的？

什么是 TCP 呢？TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。

简单来说，它的作用就是将数据流从一台主机可靠地传输到另一台主机。

至于具体的工作原理，这里暂时涉及不到，我们目前只想知道两个点：三次握手与四次挥手。

三次握手：