11

作者:杨志晓

一、相关协议类概念:

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
clipboard.png

b.Ip报文解析
1_2.png
clipboard.png

ip报头长度计算:
1_3.png
clipboard.png

5*4 =20

c.tcp报文解析
1_4.png
clipboard.png

三、http1.0基本原理

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

1_6.png
clipboard.png

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

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

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

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

1_7.png
clipboard.png

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

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

1_8.png
clipboard.png

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

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

1_9.png
clipboard.png

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

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

1_10.png
clipboard.png

http2.0 :

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

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

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

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

1_13.png
clipboard.png

附课堂板书:

1_14
clipboard.png..]


AI及LNMPRG研究
7.2k 声望12.8k 粉丝

一群热爱代码的人 研究Nginx PHP Redis Memcache Beanstalk 等源码 以及一群热爱前端的人