从输入url地址到页面渲染

总体分为一下几个过程：

1. DNS 解析将域名解析成 IP 地址
2. TCP 连接三次握手
3. 发送 HTTP 请求
4. 服务器处理并放回 HTTP 报文
5. 浏览器解析渲染页面
6. 断开连接：TCP 四次挥手

URL

URL（Uniform Resource Locatr），统一资源定位符，用于定位互联网的资源。俗称网址

组成部分：scheme://host.domain:port/path/filename，例如：https://www.lufangyong.com

各部分解释如下：

• schema: 定义因特网服务的类型，常见的协议有 http、https、ftp、file，其中最常见的是 http，而 https 则是进行加密的网络传输
• hots：定义域主机（http 的默认主机是 www）
• domain：定义因特网域名，比如 www.lufangyong.com
• prot：定义主机上的端口号（http 的默认端口号是 80）
• path：定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）
• filename：定义文档/资源的名称

DNS 域名解析

在浏览器输入网址后，首先要经过域名解析，因为浏览器并不能直接通过域名找到对应的服务器，而是通过 IP 地址

什么是域名解析

DNS 协议提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。DNS 是一个网络服务器，我们的域名解析简单来说就是在 DNS 上记录一条信息记录。

例如 baidu.com 220.114.23.56（服务器外网IP地址）80（服务器端口号）

浏览器如何通过域名去查询 URL 对应的 IP 呢

• 浏览器缓存：浏览器会按照一定的频率缓存 DNS 记录
• 操作系统：如果浏览器缓存中找不到需要的 DNS 记录，那就去操作系统中找
• 路由缓存：路由器也有 DNS 缓存
• ISP 的 DNS 服务器：ISP 是互联网服务提供商（Internet Service Provider）的简称，ISP 有专门的 DNS 服务器对应 DNS 查询请求
• 根服务器：ISP 的 DNS 服务器还找不到的话，它就会向根服务器发出请求，进行递归查询（DNS 服务器先问根域名服务器 .com 域名服务器的 IP 地址，然后再问 .baidu 域名服务器，以此类推）

小结

浏览器通过向 DNS 服务器发送域名，DNS 服务器查询到与域名相对应的 IP 地址，然后返回给浏览器，浏览器再将 IP 地址打在协议上，同时请求参数也会在协议搭载，然后一并发送给对应的服务器。接下来介绍向服务器发送 HTTP 请求阶段，HTTP 请求分为三个部分：TCP 三次握手、http 请求响应信息、关闭 TCP 连接。

TCP

按层次分，TCP 位于传输层，提供可靠的字节流服务。

所谓的字节流服务（Bety Stream Service）是指，为了方便传输，将大块数据分割成以报文（segment）为单位的数据包进行管理。而可靠的传输服务是指，能够把数据准确可靠地传给对方。一言以蔽之，TCP 协议为了更容易传送大数据才把数据分割，而且 TCP 协议能够确认数据最终是否送达到对方

确保数据能达到目标

为了准确无误地将数据送达目标处，TCP 协议采用三次握手（there-way handshaking）策略。用 TCP 协议把数据包送出去后，TCP 不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了 TCP 的标志（flag）———— SYN（synchronize）和 ACK（acknowledgement）

发送端首先发送一个带 SYN 标志的数据包给对方。接受端收到后，回传一个带有 SYN/ACK 标志的数据包以示传达确认信息。最后，发送端在回传一个带 ACK 标志的数据包，代表 “握手” 结束

若在握手过程中某个阶段莫名中断，TCP 协议会再次以相同的顺序发送相同的数据包

服务器处理请求并返回 HTTP 报文

MVC 后台处理

浏览器解析渲染页面

浏览器拿到响应文本 HTML 后，开始解析渲染页面

分为五个步骤：

1. 根据 HTML 解析 DOM 树
2. 根据 CSS 解析生成 CSS 规则树
3. 结合 DOM 树和 CSS 规则树，生成渲染树
4. 根据渲染树计算每一个节点的信息
5. 根据计算好的信息绘制页面

根据 HTML 解析 DOM 树

• 根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个节点。
• 在读取 HTML 文档，构建 DOM 树的过程中，若遇到 script 标签，则 DOM 树的构建会暂停，直到脚本执行完毕

根据 CSS 解析生成 CSS 规则树

• 解析 CSS 规则树时 js 执行将暂停，直到 CSS 规则树就绪
• 浏览器在 CSS 规则树生成之前不会进行渲染

结合 DOM 树和 CSS 规则树，生成渲染树

• DOM 树和 CSS 规则树全部准备好了以后，浏览器才开始构建渲染树
• 精简 CSS 并可以加快 CSS 规则树的构建，从而加快页面相应速度

根据渲染树计算每一个节点的信息

• 布局：通过渲染树中渲染对象的信息，计算出每一个渲染树对象的位置和尺寸
• 回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染

根据计算好的信息绘制页面

• 绘制阶段：系统会遍历呈现树，并调用呈现器的 paint 方法，将呈现器的内容显示在屏幕上
• 重绘：某个元素的背景色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘
• 回流：莫格元素的尺寸发生了变化，则需重新计算渲染树，重新渲染

断开连接

当数据传送完毕，需要断开 tcp 连接，此时发起 tcp 四次挥手

参考资源

从 URL 输入到页面展现到底发生什么？