< 了解 HTTP 这一篇就够了 :什么是 HTTP ?HTTP 和 HTTPS 有什么区别 ? >

简介: 在前端开发中,是和浏览器打交道最为频繁的行业之一。但是大部分卷王们,可能仅仅是知道如何使用浏览器,只是知道 URL 跳转到浏览器变成一个完整的网页。 本篇文章将讲述 什么是HTTP、 HTTP 和 HTTPS的区别 及 URL 是如何渲染到页面。那么到这里,肯定会有人问: 那我们为什么要学习这个呢 ? 问得好,这个分为两方面: 一是学习上述内容,能够厚实我们的理论基础。有些内容,虽然用的不多,但是技多不压身,道理懂吧? 二是学习这个,对我们后续的性能优化、排查浏览器上某些错误 的能力都有提升!

👉 前言

在前端开发中,是和浏览器打交道最为频繁的行业之一。但是大部分卷王们,可能仅仅是知道如何使用浏览器,只是知道 URL 跳转到浏览器变成一个完整的网页。 本篇文章将讲述什么是 HTTPHTTP 和 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的格式。

image.png

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 的基础下加入SSLHTTPS 的安全基础是 SSL,因此加密的详细内容就需要 SSLHTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层(在 HTTPTCP 之间)。

image.png

在上述介绍 HTTP 中,了解到 HTTP 传递信息是以明文的形式发送内容,这并不安全。而 HTTPS 出现正是为了解决 HTTP不安全 的特性

为了保证这些隐私数据能加密传输,让HTTP运行安全的SSL/TLS协议上,即 HTTPS = HTTP + SSL/TLS,通过 SSL证书 来验证服务器的身份,并为浏览器和服务器之间的通信进行加密。

SSL 协议位于 TCP/IP 协议与各种应用层协议之间,浏览器和服务器在使用 SSL 建立连接时需要选择一组恰当的加密算法来实现安全通信,为数据通讯提供安全支持。

流程图如下所示:
image.png

💬 流程步骤:

  1. 首先客户端通过URL访问服务器建立SSL连接
  2. 服务端收到客户端请求后,会将网站支持的证书信息(证书中包含公钥)传送一份给客户端
  3. 客户端的服务器开始协商SSL连接的安全等级,也就是信息加密的等级
  4. 客户端的浏览器根据双方同意的安全等级,建立会话密钥,然后利用网站的公钥将会话密钥加密,并传送给网站
  5. 服务器利用自己的私钥解密出会话密钥
  6. 服务器利用会话密钥加密与客户端之间的通信

👉 HTTP 和 HTTPS 的区别

  • HTTPS是HTTP协议的安全版本,HTTP协议的数据传输是明文的,是不安全的,HTTPS使用了SSL/TLS协议进行了加密处理,相对更安全
  • HTTP 和 HTTPS 使用连接方式不同,默认端口也不一样,HTTP是80,HTTPS是443
  • HTTPS 由于需要 设计加密 以及多次握手,导致性能方面不如 HTTP。
  • HTTPS需要SSL,SSL 证书需要花钱,成本相较于 HTTP 大很多,特别是功能越强大的证书费用越高。

👉 URL渲染到页面的过程

既然了解到HTTP的知识,那么自然要讲到URL渲染到页面的过程。具体流程如下:

  1. URL输入:用户在浏览器的地址栏中输入URL,并按下回车键。

  2. 浏览器解析URL:浏览器首先会解析URL,确定协议(如http://或https://)、域名(如www.example.com)和可能的路径、查询参数等。

  3. DNS解析:浏览器会查询本地缓存或向DNS服务器发送请求,以获取域名对应的IP地址。
    如果浏览器缓存中有该域名的IP地址,则直接使用缓存中的IP;否则,会向DNS服务器发送解析请求。DNS服务器返回域名对应的IP地址给浏览器。

  4. TCP握手:浏览器使用IP地址和端口号(默认为80或443)与服务器建立TCP连接。
    TCP握手包括三个阶段:SYN(同步)包发送、SYN-ACK(同步确认)包返回、ACK(确认)包发送。这三个阶段确保双方能够建立可靠的连接。

  5. 发送HTTP请求:浏览器构建HTTP请求报文,包括请求方法(如GET、POST)、URL、请求头(如User-Agent、Accept-Language等)以及可能的请求体(如POST请求的表单数据)。

    浏览器通过已建立的TCP连接将HTTP请求发送给服务器。

  6. 服务器处理请求:服务器接收到HTTP请求后,根据请求方法和URL路径找到对应的处理程序。
    服务器可能需要查询数据库、执行计算或调用其他服务来生成响应数据。

  7. 返回HTTP响应:服务器构建HTTP响应报文,包括状态码(如200 OK、404 Not Found等)、响应头(如Content-Type、Content-Length等)以及响应体(即实际的页面内容)。

    服务器通过TCP连接将HTTP响应发送回浏览器。

  8. 浏览器接收并解析响应:浏览器接收到HTTP响应后,首先检查状态码以确定请求是否成功。
    如果状态码表示成功(如200 OK),浏览器会继续解析响应头,了解响应内容的类型、大小等信息。

    浏览器解析响应体中的HTML代码,并构建DOM(文档对象模型)树。

  9. 浏览器渲染页面:浏览器根据DOM树和可能的CSS样式信息构建渲染树。
    浏览器进行布局计算,确定每个元素在页面上的位置和大小。
    浏览器进行绘制操作,将页面内容渲染到屏幕上。

  10. 页面加载完成:当所有资源(如图片、脚本等)都加载完成且页面渲染完毕后,用户就可以看到完整的网页内容了。

具体流程可参考大佬博客 点击跳转

🔔 以下HTML页面渲染的流程图

image.png


📑 参考文献

相关文章
|
7天前
|
网络协议 安全 数据安全/隐私保护
Socks5代理和HTTP代理的区别在哪里?
Socks5和HTTP代理是两种IP代理方式,分别基于Socks5及HTTP协议。Socks5支持TCP/UDP,适合P2P、游戏和流媒体,提供传输层身份验证。HTTP代理仅支持HTTP,适用于Web浏览控制和内容过滤。选择代理应根据实际需求,如需高速低延迟选Socks5,需访问控制选HTTP。
|
7天前
|
应用服务中间件 网络安全 nginx
Client sent an HTTP request to an HTTPS server
Client sent an HTTP request to an HTTPS server
19 0
|
7天前
|
网络协议 网络安全 程序员
socket,tcp,http三者之间的原理和区别
socket,tcp,http三者之间的原理和区别
socket,tcp,http三者之间的原理和区别
|
7天前
|
安全 网络协议 网络安全
干货|代理IP协议有何区别?深入了解 SOCKS5、HTTP 代理
HTTP和HTTPS是互联网主要的两大协议,HTTP是基础的简单请求-响应协议,常用于TCP上,但数据传输不安全。HTTPS是HTTP的安全版本,添加了SSL层进行加密和身份验证,提供更高的安全性,用于保护数据和验证网站真实性。HTTPS需CA证书,可能产生费用,并使用443端口而非HTTP的80端口。
|
7天前
|
网络协议 安全 数据安全/隐私保护
干货|代理IP协议有何区别?深入了解 SOCKS5、HTTP 代理
SOCKS5和HTTP是两种代理协议,前者是通用型,支持多种网络流量,提供身份验证、IPv6支持及UDP兼容性,更适合实时数据传输。HTTP代理专用于HTTP协议,适用于Web资源请求。SOCKS5在传输方式、功能、兼容性和安全性上更胜一筹,而HTTP代理则在处理HTTP请求时更专业。选择代理协议应根据需求和应用场景,考虑服务的稳定性和安全性。付费代理如kookeey全球代理,支持双协议,速度快且可扩展性强,是可靠的选择。
|
7天前
|
缓存 安全 算法
网络原理 HTTP _ HTTPS
网络原理 HTTP _ HTTPS
15 0
|
7天前
|
安全 网络协议 算法
【计算机网络】http协议的原理与应用,https是如何保证安全传输的
【计算机网络】http协议的原理与应用,https是如何保证安全传输的
|
7天前
|
网络协议 安全 算法
HTTP协议与HTTPS协议
HTTP协议与HTTPS协议
|
7天前
|
数据采集 缓存 网络协议
静态代理IP是否支持HTTP和HTTPS?
静态代理IP支持HTTP、HTTPS、FTP、Socks5等协议,HTTP协议因其简单、灵活而常用,通常比HTTPS速度快,因无需加密处理。HTTP代理比SOCKS5代理通常更快,因为HTTP专注于HTTP请求,而SOCKS5处理多种网络流量。静态HTTP代理适合浏览器和爬虫,SOCKS5代理支持更多协议,如TCP、UDP。选择取决于应用场景和需求。
|
7天前
|
网络协议 安全
【专栏】`curl`是广泛用于网络编程和自动化脚本的命令行工具,支持HTTP、HTTPS等协议
【4月更文挑战第28天】`curl`是广泛用于网络编程和自动化脚本的命令行工具,支持HTTP、HTTPS等协议。在处理大文件或慢速服务器时,设置超时参数至关重要。本文介绍了`curl`的超时参数,如`-m`(最大操作时间)、`-c`(连接超时)、`--dns-timeout`(DNS解析超时)和`-t`(时间条件)。通过示例展示了如何设置这些超时,并提到了一些高级技巧和注意事项,如错误处理和带宽限制。合理设置超时能提高效率和可靠性,对编写健壮的自动化脚本非常有用。