作者：杨志晓

一、相关协议类概念：

a.TCP (Transmission Control Protocol)和 UDP(User Datagram Protocol)协议属于传输层协议。其中 TCP 提供 IP 环境下的数据可靠传输，它提供的服务包括数据流传送、可靠性、有效流控、全双工操作和多路复用。通过面向连接、端到端和可靠的数据包发送。
b.SPDY 协议是 Google 提出的基于传输控制协议 (TCP) 的应用层协议，通过压缩、多路复用和优先级来缩短加载时间。该协议是一种更加快速的内容传输协议。
c.QUIC（Quick UDP Internet Connections)基于 UDP 的传输层协议，提供像 TCP 一样的可靠性。在提高 web 应用性能上，可以选择在应用层使用 HTTP2.0 实现多路传输，在物理层使用 CDN 解决网络拥塞和最后一公里问题。在传输层，目前主要使用 TCP，但由于 TCP 本身的问题（一个充满补丁的丑陋的协议），成为了限制 web 应用性能的一个瓶颈。

二、wireshark 抓包解析报文：

a.mac 网卡（多路访问控制协议(multiple access control protocol)

1_1.png

b.Ip 报文解析
1_2.png

ip 报头长度计算：
1_3.png

5*4 =20

c.tcp 报文解析
1_4.png

三、http1.0 基本原理

a. 通过一个普通 html 分析：
1_5.png

1_6.png

b. 如上图分析：
绿色为：Waiting (TTFB)：TTFB (Time To First Byte)，是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了 TCP 连接时间，发送 HTTP 请求时间和获得响应消息第一个字节的时间。
蓝色为：Content Download

c. 等待时间影响因素：从发送请求到收到响应之间的空隙，会受到线路、服务器距离等因素的影响。

d. 浏览器同域名发出 6 个请求，建立几个 tcp？1 or 6？

带着上面的疑问我们对 demo 进行抓包
抓包分析：

1_7.png

分析后发现：三张图片 +html 总共四个请求
index.html+section4new.png 端口是 55653
section01.png+section2.jpg 端口是 55654

为什么是这样呢：
查看 tcp 抓包：

1_8.png

通过抓包看到：
第一个 http 请求 index.html 请求端口是：55653
第二个 http 请求 section4new.png 请求端口是：55653
第三个 http 请求 section01.png 请求端口是：55654
第四个 http 请求 section2.jpg 请求端口是：55654

同时也看到 tcp 开始建立时同时发出了两条请求

1_9.png

默认谷歌浏览器发起了两条 tcp 请求（浏览器不同, 可能是请求个数少）

同样抓包中看到了 tcp 的三次握手

1_10.png

http2.0：

a. 浏览器加载如下：
1_11.png

b. 讨论点：http1.1 请求会是按照如下图 1 还是图 2？
1_12.png

讨论结论：
http1.1 without pipelining: 通过 tcp 连接上一个请求相应完后，下一个请求才能发出
http1.1 with pipelining: 通过 tcp 连接，上一个请求发出，下一个请求不需要等待，但是返回是同一顺序。
http2.0 在 TCP 连接上传输的是帧，客户端会将要传输的数据拆分为不同的帧，并标记对应的数据流 ID，异步发出，服务端接收到帧集合根据数据流 ID 拼凑起来即为客户端发送来的数据。同理，服务端也是将数据拆分为不同帧返回。

附浏览器同域名请求的最大并发限制：

1_13.png

附课堂板书：

1_14
..]