最近部门组织了一次前端性能优化交流会,大家从输入页面 URL 到最终页面展示内容这个过程提出了许多优化点。但同时发现很多同学对 HTTP 协议层的知识不能串联起来,于是整理了这篇文章,希望可以给大家带来一丝灵感。

当我们在页面上发起一个 AJAX 请求的时候,在网络协议层面都经历了哪些内容?

如上述代码所示,我们对 baidu.com 发起了一个网络请求,最终在 then 方法中得到了具体的响应内容。

使用 Wireshark 抓包结果如下:

图中可以看到,请求 baidu.com 时,首先通过TCP 3次握手建立连接,然后通过 HTTP 传输内容,最后通过 TCP 4 次挥手断开连接。

真实的过程更加复杂,我们主要分析以下几点:

一、建立连接阶段

要获取baidu.com的网页内容,就需要和baidu服务器建立连接,怎样建立这个连接呢?

1、DNS 域名解析

通过 DNS 解析,我们就能找到 baidu 服务器对应的 IP 地址。如图:

经过 DNS 解析后,我们就能得到 baidu.com 的 IP 地址了:39.156.69.79 和 220.181.38.148,通常客户端会随机选中一个 IP 地址进行通信。

其实 IP 不一定要通过 DNS 解析才能获取,它通常会被客户端缓存,只有在 DNS 缓存都没有命中的时候才会请求 DNS 服务器。

判断步骤如下:

  • 判断浏览器是否有缓存 IP 地址。
  • 判断本机是否有缓存该 IP 地址,如:检查 Host 文件。
  • 判断本地域名解析服务器是否有缓存 IP 地址,如:电信,联通等运营商。
  • 向 DNS 根域名解析服务器,解析域名 IP 地址。
  • 向 DNS 二根域名解析服务器,解析域名 IP 地址。
  • 以此类推,最终获得 IP 地址。

2、建立 TCP 连接

有了 IP 地址之后,客户端和服务器端就能建立连接了,首先是建立 TCP 连接。TCP 是一种面向连接的、可靠的、基于字节流的传输层通信协议。

在这一层,我们传输的数据会按照一个个的字节装入报文中,当报文的长度达到最大分段(MSS)时,就会发送这个报文。如果传输的报文很长,可能会被拆分成多个 TCP 报文进行传输。TCP 报文头如下:

我们主要看以下几点:

  • 源端口、目的端口。
  • 序列号:seq,报文的唯一标识。
  • 确认号:ack,报文的确认标识,便于确认 seq 是否已经收到。
  • TCP 标记:SYN 、ACK、FIN
  • 窗口:表示发送方可以接收的字节数,即接收窗口大小,用于流量控制。

接下来,我们看一下 TCP 是怎样建立连接的?

如图所示,建立 TCP 连接需要 3 个步骤,俗称三次握手。

  • 第一次握手:客户端向服务器端发送序列号 seq=x 的标识,表示开始建立连接。
  • 第二次握手:服务器端回发一个 ack=x+1 的标识,表示确认收到第一次握手,同时发送自己的标识 seq=y。
  • 第三次握手:客户端发送 ack=y+1 的标识,标识确认收到第二次握手。

经过了 3 次握手,即保证了客户端和服务器端都能正常发送和接收数据,TCP 连接也就建立成功了。

二、TCP 可靠传输原理

上文中说到,TCP 是可靠的传输,这是为什么呢?这是因为 TCP 内部使用了停止等待协议 ARQ ,它通过确认重传机制,实现了信息的可靠传输。例如:

  • 客户端发送数据 M1
  • 服务器端确认数据 M1 收到
  • 客户端发送数据 M2
  • 服务器端确认数据 M2 收到
  • 依次类推 …

在这期间,如果某一条数据很久都没有得到确认,客户端就会重传这条数据。这样一来,对于与每一次发送的数据,服务器端都得到了确认,即保证了数据的可靠性。

虽然 ARQ 可以满足数据可靠性,但每次只能发送和确认一个请求,效率太低了,于是就产生了连续 ARQ 协议。

连续 ARQ 协议会连续发送一组数据,然后再批量等待这一组数据的确认信息,好比把单线程 ARQ 变成了多线程,大大提高了资源的利用效率。

如:

  • 客户端发送数据 M1、M2、M3、M4。
  • 服务器端确认数据 M4 收到,表示 M4 及之前的数据都收到了。
  • 客户端发送数据 M5、M6、M7、M8。
  • 服务器端确认数据 M8 收到,表示 M8 及之前的数据都收到了。

在这个流程中,服务器端不需要对每一个数据都返回确认信息,而是接收到多个数据时一并确认,这个方式叫做 累计确认

1、根据 IP 协议找到目标服务器

这里有个疑问,TCP 的每一次握手,是怎么找到目的服务器的呢?

答:通过 IP 协议。

IP 协议的目的是实现网络层的数据转发,它通过路由器不断跳转,最终把数据成功送达目的地。上文中的每一次 TCP 握手以及数据交互,都是通过 IP 协议去传输的。

IP 报文头如下:

2、IP 寻址算法

我们可以把网络中的所有计算机都看做是一个点,计算机之间的连接看做是一条线,这些点和线就组合成了一个图。例如:

通过上图,我们就把复杂的网络转化成了数学问题。IP 寻址算法,其实就是图论中的最短路径的算法。

最短路径算法在 IP 协议中有 2 种实现:

  • RIP 协议:使用距离矢量算法,确保 IP 路由跳转的次数最小
  • OSPF 协议:使用迪杰斯特拉算法,确保 IP 路由跳转的速度最快

通过以上两个协议,我们就能找到通往目的地的路径了。

3、以太网协议

这里抛出一个问题:IP 数据是怎样从一个路由器跳到另一个路由器呢?

答:通过以太网协议。

IP 协议主要是用来寻找最优路径的,具体的传输是由以太网协议来做的。

以太网属于数据链路层,它主要负责相邻设备的通信。原理是通过查询交换机 Mac 表,找到通信双方的物理接口,进而开始通信。

以太网报文头如下:

我们只用关心以下 3 个点:

  • 源 Mac 地址
  • 目的 Mac 地址
  • 校验码 CRC:校验当前帧是否有效。

4、通过网线向服务器硬件接口传输比特信息

通过以太网协议,我们找到了目标机器的硬件接口,接下来要怎么发送信息呢?

答:通过物理层。

在没有 WiFi 的年代,我们只能通过插网线来进行上网,网线其实就是物理层的设备之一。网线可以由多种材料组成,最常见的就是光纤和电缆。

光纤和电缆的传输原理类似,都是通过两个信号来模拟二进制数据的,一个信号即为一个比特。

  • 电缆中:高电位表示 1 ,低点位表示 0。
  • 光纤中:光亮表示 1,光熄灭表示 0。

如:在光纤中,我们通过观察光的闪动,即可得知传输的二进制数据。

有了这些物理设备,我们就能把复杂的数据转换成光信号或者电信号进行传输了。

二、发送数据阶段

1、建立安全层 SSL

本文的案例是发送一个 HTTPS 的请求,所以在发送数据之前,会创建一个 SSL 安全层,用于数据加密,通常的加密方法有两种:

(1)非对称加密

  • A 有钥匙,B 没有钥匙,且他们都有一个公共的锁,B 给 A 发送数据时,都会先把数据锁起来再发送。

    • 接收数据时,A 用钥匙解开锁,即可得到数据。除 A 以外,其他人没有钥匙,也就获取不到数据。
    • 实现了单向通信加密。

(2)对称加密

  • A、B 双方都有一把相同的钥匙和一个公共的锁,每次发送数据时,都把数据放在锁里进行发送。
  • 接收数据时,A、B 双方就用各自的钥匙来解锁。其他人没有钥匙,也就获取不到数据。
  • 实现了双向通信加密。

到这里为止,所有的准备工作都就绪了,接下来才是发送 HTTP 请求。

2、发送 HTTP 请求

HTTP 协议其实就是制定了一个通信规则,规定了客户端和服务器之间的通信格式。以请求 baidu 首页为例:

如上图所示,发起 HTTP 请求时,必须遵守以下规则:

  • 请求方法(必填) GET
  • 请求地址(必填) /
  • HTTP 协议版本(必填) 1.1
  • 其他 HTTP 头部字段(可选) Host、User-Agent、Accept
  • 请求参数,放在空行后面(可选)

服务器响应请求时,同样遵守了 HTTP 响应规则:

  • HTTP 协议版本(必填) 1.1
  • 响应状态码(必填) 200
  • 状态码描述(必填) OK
  • 其他 HTTP 头部字段(可选) Date、Server、ETag、Last-Modified 等
  • 请求参数,放在空行后面(可选)

只要我们遵守这个规则,就能进行 HTTP 通信了。到目前为止,我们已经分析完成了数据请求的所有过程,你是否都理解了呢?

一文搞懂IT基础知识,讲通HTTP、TCP、IP、以太网相关推荐

  1. 一文搞懂 DNS 基础知识,收藏起来有备无患~

    你知道的越多,不知道的就越多,业余的像一棵小草! 你来,我们一起精进!你不来,我和你的竞争对手一起精进! 编辑:业余草 juejin.cn/post/6844903497494855687 推荐:ht ...

  2. 一文搞懂 DNS 基础知识,收藏起来有备无患

    点击上方 "编程技术圈"关注, 星标或置顶一起成长 后台回复"大礼包"有惊喜礼包! 每日英文 Life is just like a journey. Ther ...

  3. 一文搞懂python3基础大全(变量,标准数据类型,标识符,行与缩进,运算符和表达式,条件语句if,循环语句,函数,文件,面向对象,错误和异常,模块)

    2.Python3基础 2.1.变量 Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建.变量没有类型,"类型"是变量所指的内存中对象的类型 ...

  4. 一文搞懂数据库锁知识

    数据库锁知识(INNODB) 库锁 表锁 MDL锁 意向锁 在线DDL的效率问题 锁升降级机制 行锁 四种隔离级别 行锁的分类 行记录锁(Record Locks) 间隙锁(Gap Lock) 临键锁 ...

  5. 一文看懂MOSFET基础知识

    什么是MOSFETMOSFET的原意是:MOS(Metal Oxide Semiconductor金属氧化物半导体),FET(Field Effect Transistor场效应晶体管),即以金属层( ...

  6. 广告算法所需要搞懂的基础知识

    先简单解释下基本的:DSP(Demand Side Platform)是需求方平台,负责接受投放需求,找人群数据,实现投放竞价等功能的那么一个中央管理控制平台.DMP(Data Management ...

  7. 网络知识扫盲,一文搞懂 DNS

    在找工作面试的过程中,面试官非常喜欢考察基础知识,除了数据结构与算法之外,网络知识也是一个非常重要的考察对象. 而网络知识,通常是很抽象,不容易理解的,有很多同学就在这里裁了跟头.为了更好地通过面试, ...

  8. LeetCode刷题复盘笔记—一文搞懂0 - 1背包之494. 目标和问题(动态规划系列第九篇)

    今日主要总结一下动态规划0-1背包的一道题目,494. 目标和问题 题目:494. 目标和 Leetcode题目地址 题目描述: 给你一个整数数组 nums 和一个整数 target . 向数组中的每 ...

  9. 一文搞懂AWS EC2, IGW, RT, NAT, SG 基础篇下

    B站实操视频更新 跟着拉面学习AWS--EC2, IGW, RT, NAT, SG 简介 长文多图预警,看结论可以直接拖到"总结"部分 本文承接上一篇文章介绍以下 AWS 基础概念 ...

最新文章

  1. 吴恩达机器学习入门2018高清视频公开,还有习题解答和课程拓展,网友:找不到理由不学!...
  2. 蚂蚁研发流程大公开:上百个开发者也能同时在一个 App 环境内进行高效开发
  3. CMake 手册详解(五)
  4. 史上最全的女人坐月子注意事項
  5. Careercup - Microsoft面试题 - 5672369481842688
  6. 202.结构体之位域
  7. 容器,Docker和Azure Container Service
  8. 计算机图形学全代码,计算机图形学作业参考代码
  9. java删除文件夹部分内容_java 删除文件夹中的所有内容而不删除文件夹本身
  10. 公制螺纹与英制螺纹区别
  11. GTA5 全自动线上网络优化器,解决上线困难、切换困难![MCGC]GTA5网络优化器 GTA5网络优化_MCGC
  12. 昨晚《体育世界》LBJ在CCTV5
  13. jpg转换excel转换器_Excel转换功能变得简单
  14. Linux字符设备驱动之LED驱动
  15. High Reward Low Risk Strategies
  16. Linux发行版:CentOS、Ubuntu、RedHat、Android、Tizen、MeeGo
  17. 【微信小程序】解决点击(bindtap)和长按(bindlongtap)冲突
  18. VW和VH移动端布局
  19. HTML我的家乡宁夏学生网页设计作品 dreamweaver作业静态HTML网页设计模板 宁夏旅游景点网页作业制作
  20. Rstudio手动安装程序包

热门文章

  1. java .net des_DES加密解密 JAVA与.NET互通程序代码
  2. php 实现跨站下载图片,一个图片url访问后直接下载怎样实现
  3. 大厂产品是如何做行业调研和规划的?附汇报模版(PPT)
  4. 工业互联网解决方案创新应用报告(2020)
  5. 上班之第一个无聊周末
  6. php 并发 100 压测,简单PHP把握站点并发数
  7. mysql 无法处理非法数据_MySQL 处理非法数据
  8. hbase sqoop 实验_SQOOP安装及使用-实验
  9. oracle segment undo_Oracle Undo工作原理
  10. 程序员or需求工程师,谁决定软件的最高水平?