前端性能-页面渲染过程

前言：

---

前面的很多文章都零星讲述到关于页面渲染过程，这章就简单总结下从 URL 输入到页面展现的渲染过程。了解页面渲染的流程，更方便我们开发高性能的页面和提高用户的体验有很重要的意义。

从输入 URL 到页面加载的历程：

---

• 输入URL并进行跳转；
• URL解析/DNS解析查找域名IP地址；
• 建立TCP请求连接：三次握手；
• 客户端发送HTTP请求；
• 服务器接收数据；
• 服务器响应请求/MVC；
• 服务器返回数据；
• 客户端接收数据；
• 浏览器加载资源/渲染页面；
• 断开TCP 连接：四次挥手；

大概的历程是这样的，我们对其进行解析，但是不会太过于深入。

输入URL并进行跳转：

不仅限于输入URL，从其他方式例如点击跳转，js跳转等各种方式都能进行页面的跳转进行页面的访问。

URL解析 / DNS解析：

URL ： 统一资源定位器，用于定位互联网上资源，简称网址。我们通过URL从Web服务器请求页面。

URL结构：scheme://host.domain:port/path/filename

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

浏览器对 URL 进行检查时首先判断协议，如果是 http/https 就按照 Web 来处理，另外还会对 URL 进行安全检查，然后直接调用浏览器内核中的对应方法，接下来是对网络地址进行处理，如果地址不是一个IP地址而是域名则通过DNS（域名系统）将该地址解析成IP地址。IP地址对应着网络上一台计算机，DNS服务器本身也有IP，你的网络设置包含DNS服务器的IP。

DNS的解析域名的方式&