从输入URL到页面加载完成

目录

1、涉及的专有网络名词

2、从输入URL到页面加载完成

---

1、涉及的专有网络名词

1.1、超文本传输协议（HyperText Transfer Protocol）

超文本传输协议，简称 HTTP 协议，是一个简单的请求-响应协议，它通常运行在 TCP 之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。通过此协议可以实现万维网上的各种链接。HTTP 是一个应用层的协议，它使用 TCP 连接进行可靠的传输。

1.2、统一资源定位符 URL（Uniform Resource Locator）

万维网用统一资源定位符 URL（Uniform Resource Locator）来标志万维网上的各种文档，并使每个文档在整个因特网的范围内具有唯一的标识符 URL。其格式如下：（URL里的字母是不区分大小写的）。

<协议> : // <主机> : <端口> / <路径> ？<参数><锚点>

1.3、域名系统 DNS（Domain Name System）

互联网中的主机通常不仅仅只有 IP 地址，还有对应的便于用户记忆的主机名字，比如 www.baidu.com/ 。产生于应用层上的域名系统就可以用来把互联网上的主机名转换成 IP 地址。

2、从输入URL到页面加载完成

比如用户输入或点击 优快云 的主页链接：https://www.youkuaiyun.com/，从数据网址到页面加载完成的步骤如下：

（1）浏览器分析链接指向页面的 URL（即：https://www.youkuaiyun.com/）（如果是直接输入网址则不需要这一步）。

（2）浏览器向电信/联通提供的 DNS 服务器询问 https://www.youkuaiyun.com/ 对应的 IP 地址。

（3）DNS 域名系统解析出 URL（https://www.youkuaiyun.com/） 指向的服务器的 IP 地址。

（4）客户端和服务器（特定端口）建立 TCP 链接（三次握手），并向服务器发送 HTTP 请求。

发送 HTTP 请求的过程就是构建 HTTP 请求报文并通过 TCP 协议发送到服务器指定端口。

HTTP请求报文是由三部分组成：请求行，请求报头和请求正文

如果是走的 HTTPS 协议，这里还需要进行 TSL/SSL 三次握手

（6）服务器处理请求并作出响应，返回相应的 html 给浏览器。

（7）浏览器解析并渲染界面，显示（https://www.youkuaiyun.com/）页面。

浏览器在显示页面之前是一个边解析边渲染的过程，首先浏览器解析 HTML 文档构成 DOM 树，然后解析 CSS 文件构建 CSSOM 树，然后将 DOM 树和 CSSOM 树合并成一棵渲染树（这里主要做的是排除非视觉节点，比如 script，meta 标签和排除 display 为 none 的节点，之后进行渲染步骤）。

注：在dom树的构建过程中如果遇到 JS 脚本和外部 JS 连接，则会停止构建 DOM 树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 html 代码的后面。

然后浏览器根据渲染树开始进行页面渲染：浏览器渲染的步骤分为三个：布局（Layout）、绘制（Paint）、合成（Compose ），其中布局步骤是根据渲染树计算出 DOM 节点盒模型的位置和大小，然后绘制步骤是在布局的基础上，给边框、文字和阴影等绘制颜色，最后合成步骤是根据已经布局和绘制好的页面，依据层叠关系展示到前端页面上。浏览器渲染原理

（8）释放TCP链接。