👉 前言
在前端开发中，是和浏览器打交道最为频繁的行业之一。但是大部分卷王们，可能仅仅是知道如何使用浏览器，只是知道 URL 跳转到浏览器变成一个完整的网页。 本篇文章将讲述什么是 HTTP、 HTTP 和 HTTPS的区别 及 URL 是如何渲染到页面。
那么到这里，肯定会有人问： 那我们为什么要学习这个呢 ？ 问得好，这个分为两方面： 一是学习上述内容，能够厚实我们的理论基础。有些内容，虽然用的不多，但是技多不压身，道理懂吧？ 二是学习这个，对我们后续的性能优化、排查浏览器上某些错误 的能力都有提升！
🗯️ 废话不多说，开始今天的卷王历程！
👉 什么是 HTTP ？什么是 HTTPS ？
> 基本概念
| 名称 | HTTP | HTTPS |
|---|---|---|
| 中文名 | 超文本传输协议 | 超文本传输安全协议 |
| 外文全名 | Hyper Text Transfer Protocol | Hyper Text Transfer Protocol over SecureSocket Layer |
| 工作层 | 应用层 | 应用层 |
| 作用 | 规定WWW服务器与浏览器之间信息传递规范 | 安全HTTP数据传输通道，保证数据安全性 |
首先，我们需要了解什么是协议，“ 协议 ” 字面意思，是指 用于规范协调两者及两者以上 的不同内容 或 角色之间的 关系、运输等等其他形式的约束。现实生活中也有许多，如： 就业协议、保密协议、租房的租凭协议等等。
> HTTP
超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的 请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；而消息内容则具有一个类似MIME的格式。
HTTP是一个超文本传输协议，即将数据由A传到B或将B传输到A，并且 A 与 B 之间能够存放很多第三方，如： A<=>X<=>Y<=>Z<=>B
传输的数据并不是计算机底层中的二进制包，而是 完整的、有意义的数据。例如：HTML 文件、图片文件、查询结果等超文本，能够被上层应用识别。
在实际应用中，HTTP 常被用于在 Web浏览器 和 网站服务器 之间传递信息，以明文方式发送内容，不提供任何方式的数据加密。
特点如下：
支持客户 / 服务器模式；
简单快速：客户向服务器请求服务时，只需传送请求方法和路径。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快；灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记；无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间；无状态：HTTP协议无法根据之前的状态进行本次的请求处理；
> HTTPS
超文本传输
安全协议（Hyper Text Transfer Protocol over SecureSocket Layer, 简称：HTTPS ），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性 。
HTTPS 在HTTP 的基础下加入SSL，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。
在上述介绍 HTTP 中，了解到 HTTP 传递信息是以明文的形式发送内容，这并不安全。而 HTTPS 出现正是为了解决 HTTP不安全 的特性
为了保证这些隐私数据能加密传输，让HTTP运行安全的SSL/TLS协议上，即 HTTPS = HTTP + SSL/TLS，通过 SSL证书 来验证服务器的身份，并为浏览器和服务器之间的通信进行加密。
SSL 协议位于 TCP/IP 协议与各种应用层协议之间，浏览器和服务器在使用 SSL 建立连接时需要选择一组恰当的加密算法来实现安全通信，为数据通讯提供安全支持。
流程图如下所示：
💬 流程步骤：
- 首先客户端通过URL访问服务器建立SSL连接
- 服务端收到客户端请求后，会将网站支持的证书信息（证书中包含公钥）传送一份给客户端
- 客户端的服务器开始协商SSL连接的安全等级，也就是信息加密的等级
- 客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站
- 服务器利用自己的私钥解密出会话密钥
- 服务器利用会话密钥加密与客户端之间的通信
👉 HTTP 和 HTTPS 的区别
- HTTPS是HTTP协议的
安全版本，HTTP协议的数据传输是明文的，是不安全的，HTTPS使用了SSL/TLS协议进行了加密处理，相对更安全 - HTTP 和 HTTPS 使用连接方式不同，默认端口也不一样，HTTP是
80，HTTPS是443 - HTTPS 由于需要
设计加密以及多次握手，导致性能方面不如 HTTP。 - HTTPS需要
SSL，SSL 证书需要花钱，成本相较于 HTTP 大很多，特别是功能越强大的证书费用越高。
👉 URL渲染到页面的过程
既然了解到HTTP的知识，那么自然要讲到URL渲染到页面的过程。具体流程如下：
URL输入：用户在浏览器的地址栏中输入URL，并按下回车键。
浏览器解析URL：浏览器首先会解析URL，确定协议（如http://或https://）、域名（如www.example.com）和可能的路径、查询参数等。
DNS解析：浏览器会查询本地缓存或向DNS服务器发送请求，以获取域名对应的IP地址。
如果浏览器缓存中有该域名的IP地址，则直接使用缓存中的IP；否则，会向DNS服务器发送解析请求。DNS服务器返回域名对应的IP地址给浏览器。TCP握手：浏览器使用IP地址和端口号（默认为80或443）与服务器建立TCP连接。
TCP握手包括三个阶段：SYN（同步）包发送、SYN-ACK（同步确认）包返回、ACK（确认）包发送。这三个阶段确保双方能够建立可靠的连接。发送HTTP请求：浏览器构建HTTP请求报文，包括请求方法（如GET、POST）、URL、请求头（如User-Agent、Accept-Language等）以及可能的请求体（如POST请求的表单数据）。
浏览器通过已建立的TCP连接将HTTP请求发送给服务器。
服务器处理请求：服务器接收到HTTP请求后，根据请求方法和URL路径找到对应的处理程序。
服务器可能需要查询数据库、执行计算或调用其他服务来生成响应数据。返回HTTP响应：服务器构建HTTP响应报文，包括状态码（如200 OK、404 Not Found等）、响应头（如Content-Type、Content-Length等）以及响应体（即实际的页面内容）。
服务器通过TCP连接将HTTP响应发送回浏览器。
浏览器接收并解析响应：浏览器接收到HTTP响应后，首先检查状态码以确定请求是否成功。
如果状态码表示成功（如200 OK），浏览器会继续解析响应头，了解响应内容的类型、大小等信息。浏览器解析响应体中的HTML代码，并构建DOM（文档对象模型）树。
浏览器渲染页面：浏览器根据DOM树和可能的CSS样式信息构建渲染树。
浏览器进行布局计算，确定每个元素在页面上的位置和大小。
浏览器进行绘制操作，将页面内容渲染到屏幕上。页面加载完成：当所有资源（如图片、脚本等）都加载完成且页面渲染完毕后，用户就可以看到完整的网页内容了。
具体流程可参考大佬博客 点击跳转
🔔 以下HTML页面渲染的流程图
