从浏览器输入一个URL到页面呈现出来的过程

URL到底是什么？

URL（Uniform Resource Locator），统一资源定位符，即网址。遵守规则为：scheme://host.domain:port/path/filename

• scheme：定义因特网服务的类型，常见协议：http、https、ftp、file；
• host：定义域主机（http的默认主机是www）；
• domain：定义因特网域名；
• port：定义主机上的端口号；
• path：定义服务器上的路径（若省略，则文档必须位于网站的根目录）；
• filename：定义文档和资源的名称。

从浏览器输入一个URL到页面展示出来的过程

一、DNS解析

浏览器向DNS服务器发送域名，DNS服务器查询到与域名相对应的IP地址并返回给浏览器，浏览器将IP地址和参数等一同搭载在服务器上一并发送给对应的服务器，进行HTTP请求。

1. DNS：简答来说：DNS就是一个可以将域名和IP相互转化的网络服务器。
2. DNS解析（DNS协议）：执行将域名和IP相互转化的操作。作用是使计算机和人都能更方便的读取网址。
3. 浏览器如何通过域名去查询url对应的IP：依次从浏览器缓存、操作系统缓存、路由缓存、ISP的DNS服务器、根服务器中去查找DNS记录

---

二、三次握手

可以理解为浏览器端与服务器端对话的过程。浏览器端询问服务器端：是否可以连接你？服务器端回复：可以。浏览器端回应：好的，我要连接了，你准备接收吧。

---

三、发送HTTP请求

HTTP请求报文包括：请求行、请求头、空行、请求主体四部分。

1、请求行主要包括：请求方法、URL、协议版本

• 请求方法有：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE
• URL
• 协议版本 ，即http版本号

2、请求头由“关键字:值”组成，每行一对。

3、请求主体，承载多个请求参数的数据，还包括回车换行符，不是必须存在的。

---

四、服务器响应

HTTP响应报文包括：响应行、响应头、空行、响应主体四部分。

1、响应行主要包括：协议版本、状态码、状态码描述 ；

2、响应头由“关键字:值”组成，包含响应报文的附加信息；

3、响应主体，承载响应返回数据，还包括回车换行符，不是必须存在的。

---

五、浏览器解析渲染页面

1、根据HTML生成DOM树

• 按照HTML的标签结构解析生成DOM树。这是一个深度优先遍历的过程，当前节点的所有子节点都构建完成后，再构建兄弟节点。
• 在构建DOM树的过程中，如果遇到script标签，则构建暂停至脚本执行完毕。

2、根据CSS生成CSS树

• CSS树构建完成之前，是不会进行渲染的。
• 在构建CSS树的过程中，js脚本将暂停执行至CSS树构建完成。

3、将DOM树和CSS树结合生成渲染树

• DOM树和CSS树都构建完成后，才会开始构建渲染树。

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

• 计算每一个渲染对象的尺寸、位置等信息。
• 回流：布局完成后，若某部分发生了变化影响了布局，就要倒回去重新渲染。

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

• 绘制页面时，会遍历渲染树，使用paint方法呈现。
• 重绘：某个元素发生的变化不影响元素周围或内部布局时，如颜色，浏览器将对其进行重绘。
• 回流：某个元素发生的变化影响到元素周围或内部布局时，如尺寸，将倒回去重新计算渲染树再重新渲染。

---

六、四次挥手

数据传送完毕后，需要断开连接，即发起四次挥手

这也可以理解为一个对话的过程。浏览器端对服务器端说：我的请求报文已经发送完毕了，你准备关闭吧。服务器端回复：你的请求报文已经接收完毕了，我准备关闭了。服务器端对浏览器端说：我的响应报文已经发送完毕了，你准备关闭吧。浏览器端回复：你的响应报文已经接收完毕了，我准备关闭了。